javascript - How to add tinymce 4.x dynamically to textarea? - Stack Overflow

admin管理员组

文章数量:1334310

I have a little problem with adding tinymce dynamically to textarea after init.

tinymce.init({
    selector: "textarea",
    theme: "modern",
    height: 100,
    plugins: [
         "advlist autolink image lists charmap print preview hr anchor pagebreak spellchecker",
         "link searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
   ],
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
 }); 

And my button to add new textarea:

$('#add_new_text').click(function(){
var n = 1;
$( '<textarea class="cla" name="text'+n+'"></textarea>' ).appendTo( '#wrap_f' );
n++;
   })

I've tried to do this tinyMCE.execCommand('mceAddControl', false, ''); But it didn't work.

I have a little problem with adding tinymce dynamically to textarea after init.

tinymce.init({
    selector: "textarea",
    theme: "modern",
    height: 100,
    plugins: [
         "advlist autolink image lists charmap print preview hr anchor pagebreak spellchecker",
         "link searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
   ],
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
 }); 

And my button to add new textarea:

$('#add_new_text').click(function(){
var n = 1;
$( '<textarea class="cla" name="text'+n+'"></textarea>' ).appendTo( '#wrap_f' );
n++;
   })

I've tried to do this tinyMCE.execCommand('mceAddControl', false, ''); But it didn't work.

• javascript
• jquery
• html
• tinymce
• tinymce-4

Share Improve this question Follow asked May 7, 2015 at 17:06 Igor LeIgor Le 5311 silver badge77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Have you tried calling tinymce.init function after the appendTo function?

jQuery functions operates synchronously, one at a time. That means, your init function will run after the appentTo pletes, and that means, you don't need a callback for that.

Just write your tinymce.init funtion after the appendTo and get back here to tell the result :)

本文标签： javascriptHow to add tinymce 4x dynamically to textareaStack Overflow