I am using tinymce, Is it possible to apply for only one textarea

Question

I am using tinymce, I have multiple text areas on my page. Is it possible to apply for only one textarea,

1 text area is for description validation is like below

var text = tinyMCE.get('txtdesc').getContent();

But i have more 3 more text areas in my page so tineMCE should not apply for all these text areas

How can i apply only for one text area

// this is my tinyMCE code 
    tinyMCE.init({
        mode : "textareas",
        theme : "advanced"
    });

// /tinyMCE

Showy

Answer 1

For the textarea assign a class="" to textarea property, this will support for you

<script type="text/javascript">
    tinyMCE.init({
        //mode : "textareas",
        mode : "specific_textareas",
        editor_selector : "myTextEditor",
        theme : "simple"
    });
</script>

<textarea id="txtdesc" name="txtdesc" class="myTextEditor" rows="6" cols="96" ></textarea>

Mccartan

How to bind it with attr "id" of textarea. – Conceivable

mode : "exact", elements: "textarea_id" | Please use this in code to use – Moonstone

Answer 2

In the TinyMCE 3.x config you can put class selectors or deselectors to specifically enable or disable TinyMCE on textareas with certain classes, just put the class="" attribute on your textarea.

editor_deselector : "mceNoEditor" // class="mceNoEditor" will not have tinyMCE
editor_selector : "mceEditor", // class="mceEditor" will.

Source.

---

As of TinyMCE 4.0.x

selector: "textarea", // Select all textarea
selector: "textarea.editme", // Select all textarea with the class editme
selector : "textarea:not(.mceNoEditor)", // Select all textarea exluding the mceNoEditor class

Source.

Blandish

Also works on textarea with a specific ID, e.g. selector: "textarea#myTAID" – Christmas

Answer 3

In TinyMCE 4.x there is no deselector so you can use normal css to determine which textareas are selected and which are not.

<script type="text/javascript">
  tinymce.init({
        selector: "textarea:not(.textarea-no-styles)",
 });
</script>

Peppery

I thought that I would add that multiple classes may be entered here, separated by commas, to be excluded: selector: "textarea:not(.regTextarea1,.regTextarea2)" – Shulem

Answer 4

In TinyMCE 4.x, you can use editor_selector option , but before that make sure you must updated mode to 'specific_textareas'

    <script type="text/javascript">
  tinymce.init({
    mode : "specific_textareas",
    editor_selector : "mceEditor",
    });
</script>

Also add css class same as editor_selector value in your textarea, as per above example it should look like this:

<textarea id='textarea1' class='mceEditor'>first text area</textarea>

now, editor will be added in those textarea that have a class named 'mceEditor'.

Alathia

Answer 5

Here's what worked for me on version 4.6.4, and it's simpler :

I've just appended #my_text_area_id to my selector as follows

selector: 'textarea#elm1'
<textarea id="elm1" ...>...</textarea>

hope it helps

Coniah

Answer 6

You can do this by using a selector.

selector: "#text_area_id", // Select with textarea id

Stokes

Answer 7

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.5.4/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Damiano

This answer doesn't address the question... it doesn't even seem to be related to TinyMCE at all. Please see How to Answer and edit your answer to add more information to explain how to solve the problem. – Aerobe