4

I have a button, which loads a form when clicked, and another cancel button, which removes the form from dom. When the form is inserted, the textarea is initialized with TinyMCE and it works fine. But after I click cancel, and then load the form for the second time, it doesn't work. I am using TinyMCE 4 and couldn't find a solution anywhere. I am using this:

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

This is what I've tried:

$.ajax(
    // ajax call
).done(function(e) {
    tinymce.init({
        selector: "#testarea",
        menubar: false,
        statusbar: false
    });
});

So, as you can see, I tried reinitializing the plugin after the new content loads with ajax, but it doesn't work.

Any help would be appreciated.

Amar Syla
  • 3,523
  • 3
  • 29
  • 69
  • Either the click event is not unbinding or there is some other issue with your HTML which you haven't provided. – EternalHour Feb 16 '15 at 23:58
  • @EternalHour The only issue is with TinyMCE. THe button works fine, it loads everything as it should do, except that the TinyMCE textarea doesn't get initialized for the second time. – Amar Syla Feb 17 '15 at 14:31
  • you should call init once the form loaded, could you please show us the form load code? – code-jaff Feb 17 '15 at 15:09
  • @code-jaff This is the link to the actual demo: http://amarsyla.com/sandbox/profile/ - To reproduce my problem, please click the Edit icon, click Cancel, and then click the Edit button again. That's where the TinyMCE fails to load for the second time. – Amar Syla Feb 17 '15 at 15:12
  • I'm having the exact same problem I think. Did you find a solution yet? – lukenofurther Mar 18 '15 at 16:53
  • @johnemel No, not yet. I had to postpone my project because of that. – Amar Syla Mar 18 '15 at 17:16
  • @AmarSyla I gave up trying and instead of removing the tinymce control from the page and replacing it with a new one, just left it there and re-used it. – lukenofurther Mar 19 '15 at 16:42
  • 2
    You need to remove the existing tinymce instance before removing the form from the dom. See http://stackoverflow.com/questions/4651676/how-do-i-remove-tinymce-and-then-re-add-it – jdhildeb Sep 30 '15 at 18:27

1 Answers1

1

Try by placing the initialization code at the head section

<!-- Place inside the <head> of your HTML -->
<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    menubar: false,
    statusbar: false
});
</script>
code-jaff
  • 9,230
  • 4
  • 35
  • 56