CODEWITHSUNDEEP
jquerytinymce-4
Kamran
Kamran

Reputation: 4100

How to add style attribute to an image added with getDoc().createElement( "img" ); in TinyMCE

How To insert an image at cursor position in tinymce

From the above mentioned question I manage to add an Image in TinyMCE. 

var ed = tinyMCE.get('txt_area_id');                // get editor instance
var range = ed.selection.getRng();                  // get range
var newNode = ed.getDoc().createElement ( "img" );  // create img node
newNode.src="sample.jpg";                           // add src attribute
range.insertNode(newNode);                          // insert Node

I am trying to add the width to newNode with this code:

 newNode.style = "width:600px;"; // not working

but its not working, same goes for class I cannot add a class via this code:

newNode.class= "myClass"; // this one is also not working

If any one have some idea please let me know thanks.

Upvotes: 1

Views: 362

Answers (1)

David Thomas
David Thomas

Reputation: 253318

The problem is here:

newNode.style = "width:600px;";

You're accessing the node's style object, rather than the style attribute. So, you can either update, or set, the style object:

newNode.style.width = "600px;";

Or update, or set, the style attribute:

newNode.setAttribute("style", "width:600px");

Note that, in the latter example, any existing values held in the style attribute will be overwritten with the new string; to update only one property value you should use the former example, and target specific properties of the style object.

To update the classes of an element:

newNode.className = "newClassName";

Or:

newNode.classList.add("newClassName");

Upvotes: 2

Related Questions