Dojo Richtext编辑器工具栏没有正确的样式

时间:2016-06-20 07:26:20

标签: dojo rich-text-editor

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

enter image description here

正如您所见,字体部分未被包装。 任何人都可以帮助我吗?

请参阅以下代码:

<!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>

1 个答案:

答案 0 :(得分:1)

dojo编辑器中有一个插件可用于打破工具栏行。 您可以参考此链接:

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”并使用“||”在插件道具中打破你想要的地方。

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