Select a span in a TinyMCE textarea with jquery

Question

I'm using tinymce in my app with jquery. I am also using the jquery add in for tinymce to load it all locally.

I am pretty noob with jquery but I think I should be able to get it like this.

<h1 class="class">John</h1>
<form>
    <textarea id="id">
        <p>Hello <span class="class">John</span>,</p>
    </textarea>
</form>

<script>
    // Doesn't work for either
    $('form#id.class').text('Mark');

    // Doesn't Work Either for the textarea but does the h1
    $('.class').text('Mark');
</script>

But of course it's not working or why would I be posting this. What am I doing wrong?

I am importing jquery and can grab other things just like that and it works.

http://stackoverflow.com/questions/4705848/rendering-html-inside-textarea — Anil Namde, Feb 17 '17 at 18:53
Instead of `$('form#id.class')`, the selector should be `$('form #id .class')` (notice the spaces after form and #id - they indicate the next part of the selector is a descendant). Of course, if #id is unique (as it should be), all you need is `$('#id .class')` — jbyrd, Feb 17 '17 at 19:34
This is right with just jquery I think the problem is with tinymce. It's being a pain. — ahackney, Feb 17 '17 at 20:17

score 0 · Answer 1 · answered Feb 17 '17 at 18:54

Are you importing the jQuery library?

If not you're going to either want to download jQuery here or use the CDN which can be found here.

If that's not your problem then take a look at the API Documentation for jQuery to see if you're using .text() correctly.

Here is the link: http://api.jquery.com/text/

Also, you shouldn't be using html tags in a textarea. Textareas render everything inside them as text. You'll want to use a content editable div which looks like this <div contenteditable="true"></div>

This is in a form, so I need the section to be an input. How can I make that work? — ahackney, Feb 17 '17 at 19:25

Rounin · Answer 2 · 2017-02-17T19:11:42.710

The content of <textarea> is a text string.

So you'll need to manipulate it the same way that you might manipulate any other text string.

Working Example:

var textArea = document.getElementsByTagName('textarea')[0];
var textAreaContent = textArea.textContent;
textAreaContent = textAreaContent.replace('<span class="class">John</span>','<span class="class">Mark</span>');
textArea.textContent = textAreaContent;

<form>
    <textarea id="id">
        <p>Hello <span class="class">John</span>,</p>
    </textarea>
</form>

N.B. the jQuery for the native javascript above is:

$(document).ready(function(){

$('textarea').text($('textarea').text().replace('<span class="class">John</span>','<span class="class">Mark</span>'));

});

Michael Fromin · Accepted Answer · 2017-02-17T20:12:56.747

When you load TinyMCE to replace a <textarea> the typing you do is not automatically synced with the original <textarea>. Once TinyMCE is loaded you are working in an iFrame - not the original <textarea>. When you submit the form using a standard form submit TinyMCE automatically updates the underling <textarea> before the form is submitted. If you want to get the current value from the editor you can do one of two things:

Use the get() API to talk directly to TinyMCE
Use the triggerSave() API to manually update the underlying <textarea> before you try to work with the <textarea>

The get() API allows you to target a specific instance of the editor on the page and then use the getContent() API to get the data.

The triggerSave() API tells TinyMCE to update the underlying <textarea> immediately after which you can interact with the data in the <textarea> to get what you need.

https://www.tinymce.com/docs/api/tinymce/root_tinymce/#triggersave

Would you be willing to give me an example of how I should do what I'm trying to do? — ahackney, Feb 17 '17 at 20:27

Select a span in a TinyMCE textarea with jquery

3 Answers3