hhutch/guitst.cljs

## 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)) ))

## 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>
	(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)) ))
	<!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>