Search code examples
dojorich-text-editor

Dojo Richtext editor Toolbar is not styling properly

I am creating richtext editor using dojo. I have applied extraPlugin features to this rich text editor. It's working properly but toolbar options are not getting wrapped.

enter image description here

As you can see Font section is not getting wrapped. Can anyone help me??

Please refer following code :

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

  • There is one plugin available in dojo editor to break toolbar line. You can refer this link for this:

    Dojo ToolbarLineBreak

    Solution:

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

    Add one more plugin "dojox/editor/plugins/ToolbarLineBreak" and use "||" in plugin prop to break line where you want.

    Hope if some one finding solution then it will help them.