I prefer to initialize controls based on html, however this is not working if a page gets loaded via ajax. If I create the control with javascript after the ajax page load the component renders with all the default values instead of the specified values from the data attributes.
Demo, new area gets prepended before the editor, waits are purely to demonstrate the effects
We have analyzed your sample and you have used jQuery clone() method. The clone method only clones the DOM element, so we cannot expect it copies the model value of RTE(properties). For setting the model values, first we need to take that instance of the corresponding RTE and save that model values in variable, then should pass it to the RTE rendering. Please find the code below.
setTimeout(function () {
// Creates the RTE
var obj=$("#CorrectLoaded").data("ejRTE");
var rte=obj.model;
$("#IncorrectLoaded").ejRTE(rte);
var rteObj = $("#IncorrectLoaded").data("ejRTE");
rteObj.setHtml($("#IncorrectLoaded").val() +
"<br />RTE is created, but with de defaults :( \n<br />RTE Instance is: <br /><pre>" +
JSON.stringify(rteObj, function (key, val) {
if (val != null && typeof val == "object") {
if (seen.indexOf(val) >= 0) {
return;
}
seen.push(val);
}
return val;
})+"</pre>");
}, 9000); |
We have prepared the sample as per your requirement and please find the sample below.
Sample Link: http://jsplayground.syncfusion.com/c1uiv3cf
If we have misunderstood your query, then please get back us with more details, so that we will help you better.
<div id="renderDiv">
<textarea id="FollowUp"
cols="96"
data-ej-showfooter="true"
data-ej-showhtmlsource="true"
data-ej-tools-clear="["clearFormat","clearAll"]"
data-ej-tools-clipboard="["cut","copy","paste"]"
data-ej-tools-copypaste="["cut","copy","paste"]"
data-ej-tools-doaction="["undo","redo"]"
data-ej-tools-links="["createLink","removeLink"]"
data-ej-tools-lists="["unorderedList","orderedList"]"
data-ej-toolslist="["lists","clipboard","doAction","clear","links"]" >
</textarea>
</div> |
<script type="text/javascript" class="jsScript">
$(function() {
$("#FollowUp").attr("data-role", "ejrte");
ej.widget.init($("#renderDiv"));
});
</script> |