Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Liam Maclachlan
Liam Maclachlan
22,805 Points

How can I get newly added textareas to turn in to WYSIWYG editors, with tinyMCE?

At them moment, my plugin will not append, in jQuery, new textareas as WYSIWYG editors. Any ideas on how to make this work? The ones that appear before the document is loading are fine. I know that it cannot target newly appended elements but I am looking for a workaround.

A demo of my UI is on this codepen, If that helps.

If I haven't explained this question clearly enough, please tell me and I will clarify any details :)

Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey, Marcus Parsons. Long time no talk. Any ideas? :p

1 Answer

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I'm not seeing any mention of tinyMCE in your CodePen.

You can add events to elements that don't yet exist in the DOM by using jQuery's on() and delegated events.

Otherwise, generally plugins like tinyMCE have some sort of code to initialise the plugin on particular elements, so you would just run that on the new elements as you create them.

This article seems to tackle a similar problem: [HOWTO] Fix AJAX/DOM problems (moving, or re-creating textareas)

Liam Maclachlan
Liam Maclachlan
22,805 Points

Good start man.

Yeah, sorry. I should have mentioned that in the codepen that it is not mentioned. It was just a reference to the layout to help get an understading of what I'm trying to acheive.

On the .on() note, that sounds like it might work. I'll have a look in to it and let you know :)

Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey man. You were bang on. I took the init for the paticular tinyMCE config and created a function. Just called it on doc ready and whenever a textarea is appened.

Thanks man.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

No problem!

Mind sharing your working code so others can see the solution? Or update your CodePen or share another?

Liam Maclachlan
Liam Maclachlan
22,805 Points

Sure. Here you go, man :)

FIrst I put the inititialising code in to a function, like so:

function addWYSIWG() {   
    tinymce.init({
        selector: "textarea",
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code",
            "insertdatetime media table contextmenu paste"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
    });
}

and then simply called the function whenever a new textarea was appeneded to the DOM:

$(document).ready(function(){
    addWYSIWYG() // converts all prepended textareas to tinyMCE editors
})

$('button').click(function(){
    $('body').append('<textarea></textarea>') //will add a normal textarea to the DOM
    addWYSIWYG() // converts all newly added textareas to a tinyMCE WYSIWYG
})

Easy when you know how :)

EDIT: Just realised this isn't quite what you said but still works. I will change it to the '.on' event in time, as it seems more manageable and less resource intensive :)

EDIT2:.. or not... what do you think?