Dojo Richtext 编辑器工具栏样式不正确

Question

我正在使用 dojo 创建富文本编辑器。我已将 extraPlugin 功能应用于此富文本编辑器。它工作正常，但工具栏选项没有被换行。

如您所见，字体部分未换行。谁能帮帮我？？

请参考以下代码：

<!DOCTYPE html>
<html >
    <head>

        <link rel="stylesheet" href="../_static/js/dojo/../dijit/themes/claro/claro.css">

        <script>dojoConfig = {parseOnLoad: true}</script>
        <script src='../_static/js/dojo/dojo.js'></script>

        <script>
            require(["dojo/parser", "dijit/Editor","dijit/_editor/plugins/FontChoice", "dijit/_editor/plugins/TextColor"]);
        </script>
    </head>
    <body class="claro">
        <div data-dojo-type="dijit/Editor" id="editor1" data-dojo-props="onChange:function(){console.log('editor1 onChange handler: ' + arguments[0])},
        plugins:['cut','copy','paste','|','bold','italic','underline','strikethrough','subscript','superscript','|', 'indent', 'outdent', 'justifyLeft', 'justifyCenter', 'justifyRight','|','foreColor','hiliteColor',{name:'dijit/_editor/plugins/FontChoice', command:'fontName', generic:true}]">
        </div>
    </body>
</html>
</div>

Answer 1

dojo 编辑器中有一个插件可以用来打断工具栏行。你可以参考这个link：

Dojo ToolbarLineBreak

解决方案：

<!DOCTYPE html>
<html >
    <head>

        <link rel="stylesheet" href="../_static/js/dojo/../dijit/themes/claro/claro.css">

        <script>dojoConfig = {parseOnLoad: true}</script>
        <script src='../_static/js/dojo/dojo.js'></script>

        <script>
            require(["dojo/parser", "dijit/Editor","dijit/_editor/plugins/FontChoice", "dijit/_editor/plugins/TextColor","dojox/editor/plugins/ToolbarLineBreak"]);
        </script>
    </head>
    <body class="claro">
        <div data-dojo-type="dijit/Editor" id="editor1" data-dojo-props="onChange:function(){console.log('editor1 onChange handler: ' + arguments[0])},
        plugins:['cut','copy','paste','|','bold','italic','underline','strikethrough','subscript','superscript','|', 'indent', 'outdent', 'justifyLeft', 'justifyCenter', 'justifyRight','||','foreColor','hiliteColor',{name:'dijit/_editor/plugins/FontChoice', command:'fontName', generic:true}]">
        </div>
    </body>
</html>
</div>

再添加一个插件 "dojox/editor/plugins/ToolbarLineBreak" 并使用“||”在插件道具中在你想要的地方换行。

希望如果有人找到解决方案，那么它会对他们有所帮助。

Dojo Richtext 编辑器工具栏样式不正确

Dojo Richtext editor Toolbar is not styling properly

dojo

rich-text-editor