CODEWITHSUNDEEP
javascriptjqueryhtmlcsstinymce
abbood
abbood

Reputation: 23558

how to customize individual textarea in tinyMCE

This answer explains how to, for example, remove the menubar and status bar for all form fields in tinyMCE: 

tinymce.init({
    selector: "textarea",
    menubar:false,
    statusbar: false,
    ..
});

My question is: how can I do that for individual text areas? ie I would like some to have status bars and others not to..

Upvotes: 2

Views: 3069

Answers (3)

abbood
abbood

Reputation: 23558

this is based off pasty's answer above, it keeps it as DRY as possible:

this.setupRichTextEditorSettings = function() {
    var regularElements = ['eobjs','emats','eprocs','eclos','ehoms'];
    var specialElements = ['comment_box'];

    var convertToSelectors = function(elements) {
        return $.map(elements, function(element) {
            return "textarea#"+element;
        });
    };
    var regularElementSelectors = convertToSelectors(regularElements);
    var specialElementSelectors = convertToSelectors(specialElements);

    tinymce.init({
        selector: regularElementSelectors.join(','),
        menubar: false,
        statusbar: false
    })

    tinymce.init({
        selector: specialElementSelectors.join(','),
        menubar: false,
        statusbar: false,
        toolbar: false
    })

};

Upvotes: 1

keenthinker
keenthinker

Reputation: 7830

You need to give your textarea element an id and then use it in every configuration:

tinymce.init({
    selector: "textarea#editor1",
    menubar:false,
    statusbar: false,
    ...
});

<textarea id="editor1"></textarea>

tinymce.init({
    selector: "textarea#editor2",
    // standard toolbar for editor 2
    ...
});

<textarea id="editor2"></textarea>

// and so on...

This way you tell tinyMCE for which textarea the configuration is in effect. Have a look at the advanced example on the tinyMCE site:

selector: "textarea#elm1",
Select only the textarea with ID elm1

UPDATE

Yes, it is possible. You need to set a unique id for all editors, but it is possible to select multiple id's at once like this:

    <script type="text/javascript">
        tinymce.init({
            selector: "textarea#common1,textarea#common2",
            theme: "modern",
            height: 100,
            menubar:false,
            statusbar: false
        });

        tinymce.init({
            selector: "textarea#comment_toolbox",
            theme: "modern",
            height: 100,
            toolbar: false
        });                     
    </script>
</head>
<body>
    <div width="100%" height="100%">
        <textarea id="common1"></textarea>
        <br/>
        <textarea id="comment_toolbox"></textarea>
        <br/>
        <textarea id="common2"></textarea>
        <br/>           
    </div>
</body>

The site looks as expected:

enter image description here

Upvotes: 5

Ren&#233; Roth
Ren&#233; Roth

Reputation: 2136

Use a selector like this:

$('textarea#mytext').tinymce({
 menubar:false,
 statusbar: false,
 ..
});

Upvotes: 0

Related Questions