Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TinyMCE and jQuery - attr() is returning an Object

I've solved this by using data() instead of attr(), but I'd still like to know if this is just me, and what's causing it:

I'm using jQuery 1.7.1 and TinyMCE 3.5b3 (jQuery package). No other JS libraries.

This code outputs "string", and the anchor tag's href, as expected, when the link is clicked.

$('a.page_item_delete').on('click', function(event){
    event.preventDefault();
    var $this = $(this);
    console.log(typeof $this.attr('href'));
    console.log($this.attr('href'));
});

When I activate TinyMCE on some textareas on the page, it outputs "Object" and, of course, attr() stops returning an expected value. I'm activating TinyMCE via:

$('textarea.tinymce').tinymce(options);

Has anyone else experienced this behaviour with TinyMCE? Is there a known bug, or workaround? Why is TinyMCE apparently affecting unrelated HTML elements on the page?

like image 795
Wintermute Avatar asked Apr 03 '12 15:04

Wintermute


People also ask

How do I get the content of TinyMCE editor in jQuery?

You can do this using the getContent() API method. Let's say you have initialized the editor on a textarea with id=”myTextarea”. This will return the content in the editor marked up as HTML.

Does TinyMCE require jQuery?

You don't need to use tinymce as a jQuery plugin but the option is there if you would like to. The vast majority of the tinymce source code is in the tinymce. min. js file and the jQuery.

How do I initialize TinyMCE editor?

Initialize TinyMCE 5 on any element (or elements) on the web page by passing an object containing a selector value to tinymce. init() . The selector value can be any valid CSS selector. For example: To replace <textarea id="mytextarea"> with a TinyMCE 5 editor instance, pass the selector '#mytextarea' to tinymce.

How do I use TinyMCE editor in HTML?

Cloud based integration – Add the TinyMCE CDN link to your index. html or similar file, and set up a TinyMCE initialization script. Self-Hosted alongside your application – Download the TinyMCE zip file, and unzip the contents in your project directory. You can then include a local link to the rich text editor.


1 Answers

I am having the same problem. It is being caused by the tinymce-jquery package overriding the attr and css methods of the jquery object. It seems (sadly) that the solution is to not use the jquery version of tinymce.

I haven't worked yet out why this wasn't a problem with jquery 1.6 and is a problem with 1.7.

Edit:

I was using the jquery plugin like this:

$('.wysiwyg', '#EditForm').tinymce({
    -- SETTING HERE
});

and now I have done the following to replicate the behavior I required when using the jquery plugin:

$('.wysiwyg', '#EditForm').each(function(){
    id = $(this).attr('id');
    var ed = new tinyMCE.Editor(id, {
    -- SETTINS HERE --          
    });
    ed.render();
});

Hope this helps

like image 185
Andy Hobbs Avatar answered Nov 12 '22 04:11

Andy Hobbs