#10117 closed Bug (invalid)
Inline editing does not apply to elements created on the fly
| Reported by: | Dries Geris | Owned by: | |
|---|---|---|---|
| Priority: | Normal | Milestone: | |
| Component: | Core : Editable | Version: | 4.0.1 |
| Keywords: | Cc: |
Description (last modified by )
Hi,
The new inline editing feature is fantastic. It works great when a page is rendered with content and you set the attribute contenteditable="true" for specific elements.
But if you create a new element on the fly, after the page was rendered, it seems that the toolbar is not shown.
Example :
function addBox(){
var divID = new Date().getTime()
var divIdName = "block_"+divID;
var newdiv = document.createElement('div');
newdiv.setAttribute("id", divIdName);
newdiv.setAttribute("contenteditable", "true");
newdiv.innerHTML = "editable data";
document.getElementById("parent_container").appendChild(newdiv);
}
In the body section of the page there's a div called "parent_container" and the new elements are appended to that container
<body onload="addBox();"> <div id="parent_container" name="parent_container"></div> </body>
In the above example, I give the new element the attribute contenteditable=true and indeed, the content is editable, but no toolbar. I know that in this case I could call "CKEDITOR.inline( divIdName );" in the function and in that case it will work.
But what if in the addBox function, I don't set the new div as being editable, but the inner concent of that new div has elements that are editable.
example :
function addBox(){
var divID = new Date().getTime()
var divIdName = "block_"+divID;
var newdiv = document.createElement('div');
newdiv.setAttribute("id", divIdName);
newdiv.innerHTML = "<div class='titleBoxWrapper'><div class='titleBoxHeaderTitleWrapper'><div class='titleBoxHeaderIcon'><img src='' /></div><div class='titleBoxHeaderTitle' contenteditable='true'>header title</div></div><div class='titleBoxContent' contenteditable='true'>new box</div></div>";
document.getElementById("parent_container").appendChild(newdiv);
}
In this example, I cannot call CKEDITOR.inline( divIdName ) as that would make the outer div editable and that is not want I want. The new div has inner elmenents that are editable, but these elements don't have an ID as in real life, the inner content of the new element is loaded from templates and therefore the content is general, without ID's. Only the outer div, into where the template is loaded, get's an ID.
Is there a reason why the toolbar is not shown on all elements having contenteditable="true" when they are created after the page was rendered?
Change History (4)
comment:1 Changed 11 years ago by
| Description: | modified (diff) |
|---|
comment:2 Changed 11 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | new → closed |
comment:3 Changed 11 years ago by
My dear friend hasn't mentioned that you can pass an element instance to the CKEDITOR.inline(). You don't need an id.
comment:4 Changed 11 years ago by
Thanks to both of you for the feedback. It's a shame that AutoInline only works with elements that are on the page when it loads. I knew that you can use CKEDITOR.disableAutoInline=true and then use CKEDITOR.inline('myDiv'), but in my case, the editable elements are loaded from a template and they don't have ID's as the template can be inserted more than once on the same page. So I can cannot not call them directly through their ID's.
CKEDITOR.inline() can also be called for DOM elements, but that's also not the solution.
You could also use CKEDITOR.inlineAll(), but that throws and error for elements that are already a CKEDITOR instance.
I have another way around this problem. A template is always loaded into a div and this parent div always gets an ID.
So this is what I do now, when a new parent div is created with elements, loaded from a template, that should be editable. The editable elements in the template get an additional class appointed, this class is 'contenteditable'.
function addBox(boxType, boxClass){
var divID = new Date().getTime()
var divIdName = "block_"+divID;
var newdiv = document.createElement('div');
newdiv.setAttribute("id", divIdName);
newdiv.setAttribute("class", "resizableBlock " + boxClass);
newdiv.innerHTML = getBoxTemplate(boxType); // get the template for the element to be inserted
document.getElementById("parent_container").appendChild(newdiv);
setEditors(divIdName);
}
function setEditors(divID){
$(".contenteditable", $("#"+divID)).each(function(index, element){
CKEDITOR.inline(element, {
toolbar: [
{ name: 'basicstyles', groups: ['basicstyles', 'cleanup'], items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
]
});
});
}
AutoInline works only with elements that are on page when this loads.
If you want to create element and them make it inline first disable autoinline, then use inline method.
Please check inlinebycode.html sample.