multiple tinymce textareas

前端 未结 5 1117
甜味超标
甜味超标 2021-02-07 14:26

I use tinymce for a webpage that dynamically generates at least 5 texts.
The configuration I use only works on the first textarea unfortunately.



        
相关标签:
5条回答
  • 2021-02-07 14:55

    For TinyMCE 4.0 you have to use a selector or defining a tinymce.init object/method for each desired configuration (https://www.tinymce.com/docs/get-started/multiple-editors/).

    For example, this is a page with 3 editors:

    <!DOCTYPE html>
    <html>
    <head>
      <script src="http://cdn.tinymce.com/4/tinymce.min.js"></script>
      <script type="text/javascript">
      tinymce.init({
        selector: '#myeditable-h1',
        toolbar: 'undo redo'
      });
      tinymce.init({
        selector: '.standard-editor'
      });
      </script>
    </head>
    
    <body>
      <form method="post">
        <h1 id="myeditable-h1">This Title Can Be Edited If You Click Here</h1>
      </form>
    
      <form method="post">
        <div id="myeditable-div1" class="standard-editor">
          <p>This section1 of content can be edited...</p>
        </div>
    
        <div id="myeditable-div2" class="standard-editor">
          <p>This section2 of content can be edited...</p>
        </div>
    
      </form>
    </body>
    </html>
    
    0 讨论(0)
  • 2021-02-07 14:59

    use class in selector i have two or more textarea that i want init those with tiny int so

    <textarea class="mytextarea"></textarea>
    <textarea class="mytextarea"></textarea>
    .
    .
    .
    

    in init tinyint code:

    tinymce.init({
        selector: 'textarea.mytextarea',
        plugins : 'advlist autolink link lists preview table code pagebreak',
        .
        .
        .
    
    0 讨论(0)
  • 2021-02-07 15:02

    If you're using "exact" mode you'll need to specify the ids of the elements you wish to convert to editors.

    function initMCEexact(e){
      tinyMCE.init({
        mode : "exact",
        elements : e,
        ...
      });
    }
    // add textarea element with id="content" to document
    initMCEexact("content");
    // add textarea element with id="content2" to document
    initMCEexact("content2");
    // add textarea element with id="content3" to document
    initMCEexact("content3");
    

    Or, you can use the "textarea" mode, which indiscriminately applies the editor to all textareas.

    function initMCEall(){
      tinyMCE.init({
        mode : "textareas",
        ...
      });
    }
    // add all textarea elements to document
    initMCEall();
    

    Just remember that if you're creating textareas dynamically, you will need to call tinyMCE.init() after creating the elements, because they need to be existing for tinyMCE to be able to convert them.

    Here is the documentation on modes.

    0 讨论(0)
  • 2021-02-07 15:12

    You should use different mode in your configuration. For example mode: "specific_textareas" to work for all textarea with a given class which is specified in the editor_selector parameter.

    In order to work on all textareas with class mceEditor you can use this:

    tinyMCE.init({
        mode : "specific_textareas",
        editor_selector : "mceEditor",
        .....
    
    0 讨论(0)
  • 2021-02-07 15:16

    According to tinymce.com/wiki.php/Configuration:selector, selector is the recommended way of selecting what elements should be editable.

    For all textarea elements, as requested:

    selector: "textarea",
    

    Or more elegantly, only those elements with a specific CSS tag:

    selector: "textarea.editme",
    
    <textarea class="editme">
    
    0 讨论(0)
提交回复
热议问题