bsw/jbe@1309: function ui.field.wysihtml(args)
bsw/jbe@1309:   
bsw/jbe@1309:   local toolbar = {
bsw@1845:     { command = "formatBlock", command_blank = "true", icon = "view_headline" },
bsw/jbe@1309:     { command = "formatBlock", command_value = "h1", icon = "title", head_level = "1" },
bsw/jbe@1309:     { command = "formatBlock", command_value = "h2", icon = "title", head_level = "2" },
bsw/jbe@1309:     { command = "formatBlock", command_value = "h3", icon = "title", head_level = "3" },
bsw@1845:     { command = "formatBlock", command_value = "pre", icon = "code" },
bsw@1845:     { },
bsw@1845:     { command = "bold", title ="CTRL+B", icon = "format_bold" },
bsw@1845:     { command = "italic", title ="CTRL+I", icon = "format_italic" },
bsw@1845:     { },
bsw/jbe@1309:     { command = "insertUnorderedList", icon = "format_list_bulleted" },
bsw/jbe@1309:     { command = "insertOrderedList", icon = "format_list_numbered" },
bsw@1845:     { },
bsw/jbe@1309:     { command = "outdentList", icon = "format_indent_decrease" },
bsw/jbe@1309:     { command = "indentList", icon = "format_indent_increase" },
bsw@1845:     { },
bsw@1845:     { command = "insertBlockQuote", icon = "format_quote" },
bsw@1845:     { },
bsw@1845:     { command = "createLink", icon = "insert_link" },
bsw@1845:     { command = "removeLink", icon = "link_off" },
bsw@1845:     { },
bsw/jbe@1309:     { command = "undo", icon = "undo" },
bsw/jbe@1309:     { command = "redo", icon = "redo" }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   slot.put([[
bsw/jbe@1309:     <style>
bsw/jbe@1309:       #wysihtml-html-button {
bsw/jbe@1309:         padding: 2px;
bsw/jbe@1309:         vertical-align: bottom;
bsw/jbe@1309:       }
bsw/jbe@1309:       #wysihtml-html-button.wysihtml-action-active {
bsw/jbe@1309:         color: #fff;
bsw/jbe@1309:         background: #000;
bsw/jbe@1309:       }
bsw/jbe@1309:     </style>
bsw/jbe@1309:   ]])
bsw/jbe@1309:   
bsw/jbe@1309:   ui.container{ attr = { id = "toolbar", class = "toolbar", style = "display: none;" }, content = function()
bsw/jbe@1309:     for i, t in ipairs(toolbar) do
bsw@1845:       if t.command then
bsw@1845:         ui.tag{ tag = "a", attr = {
bsw@1845:           class = "mdl-button mdl-button--raised",
bsw@1845:           ["data-wysihtml-command"] = t.command,
bsw@1845:           ["data-wysihtml-command-value"] = t.command_value,
bsw@1845:           ["data-wysihtml-command-blank-value"] = t.command_blank,
bsw@1845:           title = t.shortcut
bsw@1845:         }, content = function()
bsw@1845:           ui.tag{ tag = "i", attr = { class = "material-icons" }, content = t.icon }
bsw@1845:           if t.head_level then
bsw@1845:             ui.tag{ attr = { class = "head_level" }, content = t.head_level }
bsw@1845:           end
bsw@1845:         end }
bsw@1845:       else
bsw@1845:         slot.put(" &nbsp; ")
bsw@1845:       end
bsw/jbe@1309:     end
bsw/jbe@1309:     slot.put([[
bsw/jbe@1309:       <div data-wysihtml-dialog="createLink" style="display: none;">
bsw/jbe@1309:         <label>
bsw/jbe@1309:           Link:
bsw/jbe@1309:           <input data-wysihtml-dialog-field="href" value="http://">
bsw/jbe@1309:         </label>
bsw/jbe@1309:         <a data-wysihtml-dialog-action="save">OK</a>&nbsp;<a data-wysihtml-dialog-action="cancel">Cancel</a>
bsw/jbe@1309:       </div>
bsw@1502: 
bsw@1502:       <div data-wysihtml-dialog="insertImage" style="display: none;">
bsw@1502:         <label>
bsw@1502:           Image:
bsw@1502:           <input data-wysihtml-dialog-field="src" value="http://">
bsw@1502:         </label>
bsw@1502:         <label>
bsw@1502:           Align:
bsw@1502:           <select data-wysihtml-dialog-field="className">
bsw@1502:             <option value="">default</option>
bsw@1502:             <option value="wysiwyg-float-left">left</option>
bsw@1502:             <option value="wysiwyg-float-right">right</option>
bsw@1502:           </select>
bsw@1502:         </label>
bsw@1502:         <a data-wysihtml-dialog-action="save">OK</a>&nbsp;<a data-wysihtml-dialog-action="cancel">Cancel</a>
bsw@1502:       </div>
bsw@1502: 
bsw/jbe@1309:     ]])
bsw/jbe@1309:     slot.put([[      <a id="wysihtml-html-button" data-wysihtml-action="change_view">]] .. _"expert editor (HTML)" .. [[</a> ]])
bsw/jbe@1309:   end }
bsw/jbe@1309:   
bsw/jbe@1309:   ui.field.text(args)
bsw/jbe@1309: 
bsw@1847:   ui.tag{ tag = "script", attr = { src = request.get_absolute_baseurl() .. "static/wysihtml/wysihtml.js?version=1" }, content = "" }
bsw@1847:   ui.tag{ tag = "script", attr = { src = request.get_absolute_baseurl() .. "static/wysihtml/wysihtml.all-commands.js?version=1" }, content = "" }
bsw@1847:   ui.tag{ tag = "script", attr = { src = request.get_absolute_baseurl() .. "static/wysihtml/wysihtml.toolbar.js?version=1" }, content = "" }
bsw@1847:   ui.tag{ tag = "script", attr = { src = request.get_absolute_baseurl() .. "static/wysihtml/wysihtml_liquidfeedback_rules.js?version=2" }, content = "" }
bsw/jbe@1309:   ui.script{ script = [[
bsw/jbe@1309:     function initEditor() {
bsw/jbe@1309:       var editor = new wysihtml.Editor("]] .. args.attr.id .. [[", {
bsw/jbe@1309:         toolbar:       "toolbar",
bsw/jbe@1309:         parserRules:   wysihtmlParserRules,
bsw@1845:         useLineBreaks: true,
bsw@1847:         stylesheets: "]] .. request.get_absolute_baseurl() .. [[static/lf4.css?version=3",
bsw@1845:         name: "draft"
bsw/jbe@1309:       });
bsw/jbe@1309:     }
bsw/jbe@1309:     if(window.addEventListener){
bsw/jbe@1309:       window.addEventListener('load', initEditor, false);
bsw/jbe@1309:     } else {
bsw/jbe@1309:       window.attachEvent('onload', initEditor);
bsw/jbe@1309:     }
bsw/jbe@1309:   ]] }
bsw/jbe@1309: 
bsw/jbe@1309: end
bsw/jbe@1309: