goog.editor
#Closure_Library #ClojureScript
cljs での利用方法
code:editor.cljs
(ns foo.bar
(:require goog.editor.range)
(:import goog.editor Field
goog.ui.editor DefaultToolbar ToolbarController
goog.editor.plugins BasicTextFormatter LinkBubble LinkDialogPlugin ListTabHandler))
(def ^:private toolbar-buttons
[goog.editor.Command.BOLD
goog.editor.Command.ITALIC
goog.editor.Command.UNDERLINE
goog.editor.Command.FONT_COLOR
goog.editor.Command.BACKGROUND_COLOR
goog.editor.Command.FONT_SIZE
goog.editor.Command.LINK
goog.editor.Command.UNORDERED_LIST
goog.editor.Command.ORDERED_LIST
goog.editor.Command.JUSTIFY_LEFT
goog.editor.Command.JUSTIFY_CENTER
goog.editor.Command.JUSTIFY_RIGHT])
(defn editor field-id toolbar-id
(DefaultToolbar.setLocale "ja-jp")
(let [field (Field. field-id)
buttons (map #(let b (DefaultToolbar.makeBuiltInToolbarButton %)
(.setTooltip b "")
b)
toolbar-buttons)
toolbar-selector (str "#" toolbar-id)
toolbar (DefaultToolbar.makeToolbar (clj->js buttons) (js/document.querySelector toolbar-selector))]
(doto field
(.registerPlugin (BasicTextFormatter.))
(.registerPlugin (LinkBubble.))
(.registerPlugin (LinkDialogPlugin.))
(.registerPlugin (ListTabHandler.)))
(ToolbarController. field toolbar)
(.makeEditable field)
field))
(defn insert-text editor text
(let [dom-helper (.getEditableDomHelper editor)
range (.getRange editor)
new-node (.createDom dom-helper goog.dom.TagName.SPAN nil text)]
(if range
(do (.removeContents range)
(.insertNode range new-node false)
(goog.editor.range/placeCursorNextTo new-node false))
(.setHtml editor false (str (.getCleanContents editor) text)))))
code:main.css
@import "vendor/goog/colormenubutton";
@import "vendor/goog/colorpalette";
@import "vendor/goog/common";
@import "vendor/goog/dialog";
@import "vendor/goog/editor/bubble";
@import "vendor/goog/editor/dialog";
@import "vendor/goog/editor/linkdialog";
@import "vendor/goog/editortoolbar";
@import "vendor/goog/linkbutton";
@import "vendor/goog/menu";
@import "vendor/goog/palette";
@import "vendor/goog/toolbar";