CODEWITHSUNDEEP
asp.net-mvcrazorckeditor
invernomuto
invernomuto

Reputation: 10211

ckeditor replaces what it wants

In a Razor View I have a simple textarea

 @Html.TextAreaFor(model => model.Text, new { htmlAttributes = new { @class = "form-control ckHolder" } })

to give to the back-end users a nice html support I am using cKEditor, to bind the plug in to the text area I am doing this:

CKEDITOR.replace("@Html.IdFor(m => m.Text)", {});

All works fine, but today I am started to try to implement a tag system. 

<div class="tag-editor">
 <span class="tag-editor-tags"></span>
 <div class="tag-editor-editable" contenteditable="true"></div>
</div>

The rendering is following:

<div class="tag-editor-editable ui-autocomplete-input cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" contenteditable="true" autocomplete="off" tabindex="0" spellcheck="false" style="position: relative;" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_107"><p><br></p></div>

But I wouldn't have the editor to the content editable div of tags, why I use the explicity CKEDITOR.replace with id of my textarea and I have this behaviour? It's strange, If I don't use .replace the editor doesn't work at all...

Upvotes: 0

Views: 461

Answers (1)

invernomuto
invernomuto

Reputation: 10211

Ok, solved, I found the solution on official documentation

Inline Editing is a new technology introduced in CKEditor 4 that allows you to select any editable element on the page and edit it in-place. As a result, the editor can be used to edit content that looks just like the final page. ...

Note that in this case you need to turn off automatic editor creation first by setting the CKEDITOR.disableAutoInline option to true.

So I have just to add this line under .replace

CKEDITOR.disableAutoInline = true;

Upvotes: 1

Related Questions