Using TinyMCE's setStyle
( http://www.tinymce.com/wiki.php/API3:method.tinymce.dom.DOMUtils.setStyle ), I could set the style of an element such as:
<img style="border-width: 3px; border-style: solid;" id="avatar" width="40" height="40" alt="avatar.png" src="avatar.png" >
tinyMCE.DOM.setStyle('avatar', 'border-width', '2px');
How can I remove a style? For instance, I wish to remove border-width
and border-style
? I recognize I could just set border-width
to zero, however, do not wish to as it creates other issues.
Looking through the docs, there is no "removeStyle"-like option .
Maybe you could set the value to inherit?
TinyMCE doesn't appear to have any method to do so. Instead, use style
. See http://jsfiddle.net/vcvj22rj/2/
<input type="button" value="Add" id="add" />
<input type="button" value="Remove" id="remove" />
<form method="post" action="somepage">
<textarea name="content" style="width:100%">
<div id="myDiv" style="background-color: blue; height: 50px; width: 50px"></div>
</textarea>
</form>
tinymce.init({
selector: "textarea"
});
$('#add').click(function () {
//Question? Is it "better" to use the ID or select the actual element?
//var div=tinyMCE.activeEditor.dom.select('div');
//tinyMCE.activeEditor.dom.setStyle(div, 'border-width', '5px');
//tinyMCE.activeEditor.dom.setStyle(div, 'border-style', 'solid');
tinyMCE.activeEditor.dom.setStyle("myDiv", 'border-width', '5px');
tinyMCE.activeEditor.dom.setStyle("myDiv", 'border-style', 'solid');
});
$('#remove').click(function () {
var div=tinyMCE.activeEditor.dom.select('div')[0];
console.log(div,div.style);
//Where is "style" property documented?
div.style.removeProperty("border-width");
div.style.removeProperty("border-style");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.