Search code examples
javascriptextjsconfigurationtinymcetogglebutton

How to select the "Justify text" toggle button in TinyMCE by default?


My application is written using Ext.js and uses TinyMCE. The toolbars in the TinyMCE editors offers text alignment options: align left, center, right and justify. I would like the "justify" option to be selected by default when the screen containing the editor is loaded. I looked in the docs of TinyMCE and Ext.js to no avail.

Here my configuration code for TinyMCE:

Ext.define('Xxx.config.TinyMceConfig',{
    singleton : true,
    alternateClassName : ['TinyMceConfig'],
    config:{
        plugins: [
            "lists link charmap searchreplace code fullscreen table paste ice"
        ],
        language : "fr_FR",
        docs_language : "fr_FR",
        visual : true,
        cleanup_on_startup : false,
        cleanup : true,
        gecko_spellcheck : true,
        remove_linebreaks : false,
        encoding : "xml",
        entity_encoding : "raw",
        toolbar1 : "fullscreen | undo redo selectall | bold italic underline  alignleft aligncenter alignright alignjustify  | pastetext pasteword pasteEditor",
        toolbar2 : "searchreplace | subscript superscript charmap | unlink removeformat | visualaid table | cleanup code ice_smartquotes",
        toolbar3 : "bullist numlist row_props cell_props | row_before row_after delete_row | col_before col_after delete_col | ice_togglechanges ice_toggleshowchanges iceacceptall icerejectall iceaccept icereject",

        inline_styles : false,
        paste_as_text :true,
        paste_auto_cleanup_on_paste: true,
        paste_text_use_dialog: true,
        paste_retain_style_properties: "margin, border, border-width, border-style, bgcolor, background, border-color, ul, li, ol, page-break-before, " +
            " page-break-after, border-collapse, padding, width, height, font-size, font-weight, font-family, text-align, text-decoration, float, " +
            "display, line-height, align",
        paste_convert_headers_to_strong : true,
        paste_convert_word_fake_lists: false,
        ice: {
            isForceTracking: false,
            isTracking: false,
            user: { name: 'Utilisateur inconnu', id: 1}
        },

        menubar:false,
        statusbar: false,
        elementpath: false,
        toolbar_items_size: 'small'
    },

    constructor: function(config) {
        this.initConfig(config);
    }
});

Solution

  • Try to use tinymce property forced_root_block_attrs, and forcing style in line text-align justify

    config:{
      ...,
      forced_root_block_attrs : { style: 'text-align: justify;' }
    }
    

    tinymce docs: https://www.tiny.cloud/docs/configure/content-filtering/#forced_root_block_attrs