liquid_feedback_frontend

annotate env/ui/field/wysihtml.lua @ 1502:56209dc74a9c

Added image upload to form
author bsw
date Mon Jun 08 13:58:26 2020 +0200 (2020-06-08)
parents 32cc544d5a5b
children fce3409bc9b0
rev   line source
bsw/jbe@1309 1 function ui.field.wysihtml(args)
bsw/jbe@1309 2
bsw/jbe@1309 3 local toolbar = {
bsw/jbe@1309 4 { command = "bold", title ="CTRL+B", icon = "format_bold" },
bsw/jbe@1309 5 { command = "italic", title ="CTRL+I", icon = "format_italic" },
bsw/jbe@1309 6 { command = "createLink", icon = "insert_link" },
bsw/jbe@1309 7 { command = "removeLink", icon = "insert_link", crossed = "\\" },
bsw@1502 8 { command = "insertImage", icon = "insert_image" },
bsw/jbe@1309 9 { command = "formatBlock", command_value = "h1", icon = "title", head_level = "1" },
bsw/jbe@1309 10 { command = "formatBlock", command_value = "h2", icon = "title", head_level = "2" },
bsw/jbe@1309 11 { command = "formatBlock", command_value = "h3", icon = "title", head_level = "3" },
bsw/jbe@1309 12 { command = "formatBlock", command_blank = "true", icon = "format_clear" },
bsw/jbe@1309 13 { command = "insertBlockQuote", icon = "format_quote" },
bsw/jbe@1309 14 { command = "insertUnorderedList", icon = "format_list_bulleted" },
bsw/jbe@1309 15 { command = "insertOrderedList", icon = "format_list_numbered" },
bsw/jbe@1309 16 { command = "outdentList", icon = "format_indent_decrease" },
bsw/jbe@1309 17 { command = "indentList", icon = "format_indent_increase" },
bsw/jbe@1309 18 -- { command = "alignLeftStyle", icon = "format_align_left" },
bsw/jbe@1309 19 -- { command = "alignRightStyle", icon = "format_align_right" },
bsw/jbe@1309 20 -- { command = "alignCenterStyle", icon = "format_align_center" },
bsw/jbe@1309 21 { command = "undo", icon = "undo" },
bsw/jbe@1309 22 { command = "redo", icon = "redo" }
bsw/jbe@1309 23 }
bsw/jbe@1309 24
bsw/jbe@1309 25 slot.put([[
bsw/jbe@1309 26 <style>
bsw/jbe@1309 27 #wysihtml-html-button {
bsw/jbe@1309 28 padding: 2px;
bsw/jbe@1309 29 vertical-align: bottom;
bsw/jbe@1309 30 }
bsw/jbe@1309 31 #wysihtml-html-button.wysihtml-action-active {
bsw/jbe@1309 32 color: #fff;
bsw/jbe@1309 33 background: #000;
bsw/jbe@1309 34 }
bsw/jbe@1309 35 </style>
bsw/jbe@1309 36 ]])
bsw/jbe@1309 37
bsw/jbe@1309 38 ui.container{ attr = { id = "toolbar", class = "toolbar", style = "display: none;" }, content = function()
bsw/jbe@1309 39 for i, t in ipairs(toolbar) do
bsw/jbe@1309 40 ui.tag{ tag = "a", attr = { ["data-wysihtml-command"] = t.command, ["data-wysihtml-command-value"] = t.command_value, ["data-wysihtml-command-blank-value"] = t.command_blank, title = t.shortcut }, content = function()
bsw/jbe@1309 41 ui.tag{ tag = "i", attr = { class = "material-icons" }, content = t.icon }
bsw/jbe@1309 42 if t.crossed then
bsw/jbe@1309 43 ui.tag{ attr = { class = "crossed" }, content = t.crossed }
bsw/jbe@1309 44 end
bsw/jbe@1309 45 if t.head_level then
bsw/jbe@1309 46 ui.tag{ attr = { class = "head_level" }, content = t.head_level }
bsw/jbe@1309 47 end
bsw/jbe@1309 48 end }
bsw/jbe@1309 49 end
bsw/jbe@1309 50 slot.put([[
bsw/jbe@1309 51 <div data-wysihtml-dialog="createLink" style="display: none;">
bsw/jbe@1309 52 <label>
bsw/jbe@1309 53 Link:
bsw/jbe@1309 54 <input data-wysihtml-dialog-field="href" value="http://">
bsw/jbe@1309 55 </label>
bsw/jbe@1309 56 <a data-wysihtml-dialog-action="save">OK</a>&nbsp;<a data-wysihtml-dialog-action="cancel">Cancel</a>
bsw/jbe@1309 57 </div>
bsw@1502 58
bsw@1502 59 <div data-wysihtml-dialog="insertImage" style="display: none;">
bsw@1502 60 <label>
bsw@1502 61 Image:
bsw@1502 62 <input data-wysihtml-dialog-field="src" value="http://">
bsw@1502 63 </label>
bsw@1502 64 <label>
bsw@1502 65 Align:
bsw@1502 66 <select data-wysihtml-dialog-field="className">
bsw@1502 67 <option value="">default</option>
bsw@1502 68 <option value="wysiwyg-float-left">left</option>
bsw@1502 69 <option value="wysiwyg-float-right">right</option>
bsw@1502 70 </select>
bsw@1502 71 </label>
bsw@1502 72 <a data-wysihtml-dialog-action="save">OK</a>&nbsp;<a data-wysihtml-dialog-action="cancel">Cancel</a>
bsw@1502 73 </div>
bsw@1502 74
bsw/jbe@1309 75 ]])
bsw/jbe@1309 76 slot.put([[ <a id="wysihtml-html-button" data-wysihtml-action="change_view">]] .. _"expert editor (HTML)" .. [[</a> ]])
bsw/jbe@1309 77 end }
bsw/jbe@1309 78
bsw/jbe@1309 79 ui.field.text(args)
bsw/jbe@1309 80
bsw/jbe@1309 81 ui.tag{ tag = "script", attr = { src = request.get_absolute_baseurl() .. "static/wysihtml/wysihtml.js" }, content = "" }
bsw/jbe@1309 82 ui.tag{ tag = "script", attr = { src = request.get_absolute_baseurl() .. "static/wysihtml/wysihtml.all-commands.js" }, content = "" }
bsw/jbe@1309 83 ui.tag{ tag = "script", attr = { src = request.get_absolute_baseurl() .. "static/wysihtml/wysihtml.toolbar.js" }, content = "" }
bsw/jbe@1309 84 ui.tag{ tag = "script", attr = { src = request.get_absolute_baseurl() .. "static/wysihtml/wysihtml_liquidfeedback_rules.js" }, content = "" }
bsw/jbe@1309 85 ui.script{ script = [[
bsw/jbe@1309 86 function initEditor() {
bsw/jbe@1309 87 var editor = new wysihtml.Editor("]] .. args.attr.id .. [[", {
bsw/jbe@1309 88 toolbar: "toolbar",
bsw/jbe@1309 89 parserRules: wysihtmlParserRules,
bsw/jbe@1309 90 useLineBreaks: true
bsw/jbe@1309 91 });
bsw/jbe@1309 92 }
bsw/jbe@1309 93 if(window.addEventListener){
bsw/jbe@1309 94 window.addEventListener('load', initEditor, false);
bsw/jbe@1309 95 } else {
bsw/jbe@1309 96 window.attachEvent('onload', initEditor);
bsw/jbe@1309 97 }
bsw/jbe@1309 98 ]] }
bsw/jbe@1309 99
bsw/jbe@1309 100 end
bsw/jbe@1309 101

Impressum / About Us