9/17/2023 0 Comments Ckeditor online![]() See the working “Inline Editor” sample that showcases a few usage scenarios for inline editing. See the “Fixed UI for Inline Editor” section in the “Editor User Interface Types” feature description for more information. There is also an optional Div Editing Area plugin that allows to mimic the classic, -based editor’s UI with inline editing. When you call the CKEDITOR.inline method on a, an additional element with inline editing enabled will replace the original. Since CKEditor 4.2 you can also turn elements into inline editors. The list of elements that support inline editing is available in the CKEDITOR.dtd.$editable property. When you click inside the content of this element, the CKEditor 4 toolbar will appear. Turn off automatic editor creation first. Note that in this case you need to turn off automatic editor creation first by setting the CKEDITOR.disableAutoInline option to true.ĭo remember that if the DOM element for which inline editing is being enabled does not have the contenteditable attribute set to true, the editor will start in read-only mode. It is also possible to enable inline editing with explicit code, by calling the CKEDITOR.inline method for the element that needs to have it enabled. The "div" element that contains this text is now editable. In order to achieve this, it is enough to do the following: ![]() Suppose, for example, that you want to make a element with an ID of editor1 editable. Inline Editing is enabled directly on HTML elements through the HTML5 contenteditable attribute. This means that inline editors ignore default CKEditor content styles provided through the configuration option and use the styles from the page that CKEditor is rendered on. Inline editing is a true WYSIWYG experience and on the contrary to classic editing, the styles that are used for edited content come directly from the document stylesheet. To try it out, see the inline editing demo. The CSS styles used for editor content are exactly the same as on the target page where this content is rendered! Unlike in classic editor, there is no element created for the editing area. It is a total WYSIWYG experience, because not only the edited content looks like the final outcome, but also the page and the context where the content is placed is the real one. As a result, the editor can be used to edit content that looks just like the final page. ![]() 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. Home / CKEditor 4 / Guides Inline Editing
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |