Skip to content

Instantly share code, notes, and snippets.

@hhutch

hhutch/guitst.cljs

Created August 8, 2011 01:32
Show Gist options
  • Save hhutch/1131051 to your computer and use it in GitHub Desktop.
Save hhutch/1131051 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
guitst.cljs
(ns guitst
(:require
[goog.dom :as dom]
[goog.editor.Field :as goog-editor-field]
[goog.editor.plugins.BasicTextFormatter :as basic-text-formatter]
[goog.editor.plugins.RemoveFormatting :as remove-formatting]
[goog.editor.plugins.UndoRedo :as undo-redo]
[goog.editor.plugins.ListTabHandler :as list-tab-handler]
[goog.editor.plugins.SpacesTabHandler :as spaces-tab-handler]
[goog.editor.plugins.EnterHandler :as enter-handler]
[goog.editor.plugins.HeaderFormatter :as header-formatter]
[goog.editor.plugins.LinkDialogPlugin :as link-dialog-plugin]
[goog.editor.plugins.LinkBubble :as link-bubble]
[goog.ui.editor.DefaultToolbar :as default-toolbar]
[goog.ui.editor.ToolbarController :as toolbar-controller]))
(defn add-link
[parent file]
(let [ss (dom/createDom "link")]
(dom/setProperties ss (.strobj {"type" "text/css"
"rel" "stylesheet"
"href" file}))
(dom/appendChild parent ss)))
(defn ^:export prepenvironment []
(let [head-list (dom/getElementsByTagNameAndClass "head")
prep-css (fn [dir file] (str dir (name file) ".css"))
head (. head-list (item 0)) ]
(doseq [css-file-path
(map #(prep-css "css/" %)
[ :demo :button :dialog :linkbutton :menu :menuitem
:menuseparator :tab :tabbar :toolbar
:colormenubutton :palette :colorpalette
:editortoolbar ])]
(add-link head css-file-path))
(doseq [css-file-path (map #(prep-css "css/editor/" %)
[:bubble :dialog :linkdialog])]
(add-link head css-file-path)) ))
(defn ^:export buildeditor [edit-field-id edit-toolbar-id]
(let [goog-editor (goog.editor.Field. edit-field-id)
buttons (vec (map #(aget goog.editor.Command (name %))
[:BOLD :ITALIC :UNDERLINE
:FONT_COLOR :BACKGROUND_COLOR :FONT_FACE
:FONT_SIZE :LINK :UNDO
:REDO :UNORDERED_LIST :ORDERED_LIST
:INDENT :OUTDENT :JUSTIFY_LEFT
:JUSTIFY_CENTER :JUSTIFY_RIGHT :SUBSCRIPT
:SUPERSCRIPT :STRIKE_THROUGH :REMOVE_FORMAT] ))]
(goog.ui.editor.ToolbarController. goog-editor (goog.ui.editor.DefaultToolbar.makeToolbar.
buttons.array (goog.dom.getElement. edit-toolbar-id)))
(apply #(. goog-editor (registerPlugin (new (aget goog.editor.plugins (name %)))))
[:BasicTextFormatter :RemoveFormatting
:UndoRedo :ListTabHandler
:SpacesTabHandler :EnterHandler
:HeaderFormatter :LinkDialogPlugin
:LinkBubble])
(. goog-editor (makeEditable)) ))
Raw
index.html
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#body { display: block; position: absolute; width: 100%; height: 100%; }
#editMe {
width: 600px;
height: 300px;
background-color: white;
border: 1px solid grey;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="toolbar" style='width:602px'></div>
<div id="editMe"></div>
<script src="out/goog/base.js" type="text/javascript"></script>
<script src="guitst.js" type="text/javascript"></script>
<script type="text/javascript">
goog.require('guitst');
</script>
<script>
guitst.prepenvironment();
guitst.buildeditor("editMe","toolbar");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment