liquid_feedback_frontend

diff env/ui/field/wysihtml.lua @ 1845:71916d0badca

Reworked WYSIWYG editor, added pre formatting
author bsw
date Thu Feb 03 16:03:09 2022 +0100 (2022-02-03)
parents fce3409bc9b0
children bcfa66dd8980
line diff
     1.1 --- a/env/ui/field/wysihtml.lua	Thu Feb 03 16:02:40 2022 +0100
     1.2 +++ b/env/ui/field/wysihtml.lua	Thu Feb 03 16:03:09 2022 +0100
     1.3 @@ -1,23 +1,26 @@
     1.4  function ui.field.wysihtml(args)
     1.5    
     1.6    local toolbar = {
     1.7 -    { command = "bold", title ="CTRL+B", icon = "format_bold" },
     1.8 -    { command = "italic", title ="CTRL+I", icon = "format_italic" },
     1.9 -    { command = "createLink", icon = "insert_link" },
    1.10 -    { command = "removeLink", icon = "insert_link", crossed = "\\" },
    1.11 ---    { command = "insertImage", icon = "insert_image" },
    1.12 +    { command = "formatBlock", command_blank = "true", icon = "view_headline" },
    1.13      { command = "formatBlock", command_value = "h1", icon = "title", head_level = "1" },
    1.14      { command = "formatBlock", command_value = "h2", icon = "title", head_level = "2" },
    1.15      { command = "formatBlock", command_value = "h3", icon = "title", head_level = "3" },
    1.16 -    { command = "formatBlock", command_blank = "true", icon = "format_clear" },
    1.17 -    { command = "insertBlockQuote", icon = "format_quote" },
    1.18 +    { command = "formatBlock", command_value = "pre", icon = "code" },
    1.19 +    { },
    1.20 +    { command = "bold", title ="CTRL+B", icon = "format_bold" },
    1.21 +    { command = "italic", title ="CTRL+I", icon = "format_italic" },
    1.22 +    { },
    1.23      { command = "insertUnorderedList", icon = "format_list_bulleted" },
    1.24      { command = "insertOrderedList", icon = "format_list_numbered" },
    1.25 +    { },
    1.26      { command = "outdentList", icon = "format_indent_decrease" },
    1.27      { command = "indentList", icon = "format_indent_increase" },
    1.28 ---    { command = "alignLeftStyle", icon = "format_align_left" },
    1.29 ---    { command = "alignRightStyle", icon = "format_align_right" },
    1.30 ---    { command = "alignCenterStyle", icon = "format_align_center" },
    1.31 +    { },
    1.32 +    { command = "insertBlockQuote", icon = "format_quote" },
    1.33 +    { },
    1.34 +    { command = "createLink", icon = "insert_link" },
    1.35 +    { command = "removeLink", icon = "link_off" },
    1.36 +    { },
    1.37      { command = "undo", icon = "undo" },
    1.38      { command = "redo", icon = "redo" }
    1.39    }
    1.40 @@ -37,15 +40,22 @@
    1.41    
    1.42    ui.container{ attr = { id = "toolbar", class = "toolbar", style = "display: none;" }, content = function()
    1.43      for i, t in ipairs(toolbar) do
    1.44 -      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()
    1.45 -        ui.tag{ tag = "i", attr = { class = "material-icons" }, content = t.icon }
    1.46 -        if t.crossed then
    1.47 -          ui.tag{ attr = { class = "crossed" }, content = t.crossed }
    1.48 -        end
    1.49 -        if t.head_level then
    1.50 -          ui.tag{ attr = { class = "head_level" }, content = t.head_level }
    1.51 -        end
    1.52 -      end }
    1.53 +      if t.command then
    1.54 +        ui.tag{ tag = "a", attr = {
    1.55 +          class = "mdl-button mdl-button--raised",
    1.56 +          ["data-wysihtml-command"] = t.command,
    1.57 +          ["data-wysihtml-command-value"] = t.command_value,
    1.58 +          ["data-wysihtml-command-blank-value"] = t.command_blank,
    1.59 +          title = t.shortcut
    1.60 +        }, content = function()
    1.61 +          ui.tag{ tag = "i", attr = { class = "material-icons" }, content = t.icon }
    1.62 +          if t.head_level then
    1.63 +            ui.tag{ attr = { class = "head_level" }, content = t.head_level }
    1.64 +          end
    1.65 +        end }
    1.66 +      else
    1.67 +        slot.put("   ")
    1.68 +      end
    1.69      end
    1.70      slot.put([[
    1.71        <div data-wysihtml-dialog="createLink" style="display: none;">
    1.72 @@ -87,7 +97,9 @@
    1.73        var editor = new wysihtml.Editor("]] .. args.attr.id .. [[", {
    1.74          toolbar:       "toolbar",
    1.75          parserRules:   wysihtmlParserRules,
    1.76 -        useLineBreaks: true
    1.77 +        useLineBreaks: true,
    1.78 +        stylesheets: "]] .. request.get_absolute_baseurl() .. [[static/lf4.css",
    1.79 +        name: "draft"
    1.80        });
    1.81      }
    1.82      if(window.addEventListener){

Impressum / About Us