]>
git.immae.eu Git - perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git/blob - sources/core/creators/inline.js
2 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
10 * Turns a DOM element with the `contenteditable` attribute set to `true` into a
11 * CKEditor instance. Check {@link CKEDITOR.dtd#$editable} for a list of
12 * allowed element names.
14 * **Note:** If the DOM element for which inline editing is being enabled does not have
15 * the `contenteditable` attribute set to `true`, the editor will start in read-only mode.
17 * <div contenteditable="true" id="content">...</div>
19 * CKEDITOR.inline( 'content' );
21 * It is also possible to create an inline editor from the `<textarea>` element.
22 * If you do so, an additional `<div>` element with editable content will be created
23 * directly after the `<textarea>` element and the `<textarea>` element will be hidden.
25 * @param {Object/String} element The DOM element or its ID.
26 * @param {Object} [instanceConfig] The specific configurations to apply to this editor instance.
27 * See {@link CKEDITOR.config}.
28 * @returns {CKEDITOR.editor} The editor instance created.
30 CKEDITOR
.inline = function( element
, instanceConfig
) {
31 if ( !CKEDITOR
.env
.isCompatible
)
34 element
= CKEDITOR
.dom
.element
.get( element
);
36 // Avoid multiple inline editor instances on the same element.
37 if ( element
.getEditor() )
38 throw 'The editor instance "' + element
.getEditor().name
+ '" is already attached to the provided element.';
40 var editor
= new CKEDITOR
.editor( instanceConfig
, element
, CKEDITOR
.ELEMENT_MODE_INLINE
),
41 textarea
= element
.is( 'textarea' ) ? element : null;
44 editor
.setData( textarea
.getValue(), null, true );
46 //Change element from textarea to div
47 element
= CKEDITOR
.dom
.element
.createFromHtml(
48 '<div contenteditable="' + !!editor
.readOnly
+ '" class="cke_textarea_inline">' +
53 element
.insertAfter( textarea
);
56 // Attaching the concrete form.
57 if ( textarea
.$.form
)
58 editor
._attachToForm();
60 // Initial editor data is simply loaded from the page element content to make
61 // data retrieval possible immediately after the editor creation.
62 editor
.setData( element
.getHtml(), null, true );
65 // Once the editor is loaded, start the UI.
66 editor
.on( 'loaded', function() {
67 editor
.fire( 'uiReady' );
69 // Enable editing on the element.
70 editor
.editable( element
);
72 // Editable itself is the outermost element.
73 editor
.container
= element
;
74 editor
.ui
.contentsElement
= element
;
76 // Load and process editor data.
77 editor
.setData( editor
.getData( 1 ) );
82 editor
.fire( 'contentDom' );
84 // Inline editing defaults to "wysiwyg" mode, so plugins don't
85 // need to make special handling for this "mode-less" environment.
86 editor
.mode
= 'wysiwyg';
87 editor
.fire( 'mode' );
89 // The editor is completely loaded for interaction.
90 editor
.status
= 'ready';
91 editor
.fireOnce( 'instanceReady' );
92 CKEDITOR
.fire( 'instanceReady', null, editor
);
94 // give priority to plugins that relay on editor#loaded for bootstrapping.
95 }, null, null, 10000 );
97 // Handle editor destroying.
98 editor
.on( 'destroy', function() {
99 // Remove container from DOM if inline-textarea editor.
100 // Show <textarea> back again.
102 editor
.container
.clearCustomData();
103 editor
.container
.remove();
107 editor
.element
.clearCustomData();
109 delete editor
.element
;
116 * Calls {@link CKEDITOR#inline} for all page elements with
117 * the `contenteditable` attribute set to `true`.
120 CKEDITOR
.inlineAll = function() {
123 for ( var name
in CKEDITOR
.dtd
.$editable
) {
124 var elements
= CKEDITOR
.document
.getElementsByTag( name
);
126 for ( var i
= 0, len
= elements
.count(); i
< len
; i
++ ) {
127 el
= elements
.getItem( i
);
129 if ( el
.getAttribute( 'contenteditable' ) == 'true' ) {
130 // Fire the "inline" event, making it possible to customize
131 // the instance settings and eventually cancel the creation.
138 if ( CKEDITOR
.fire( 'inline', data
) !== false )
139 CKEDITOR
.inline( el
, data
.config
);
145 CKEDITOR
.domReady( function() {
146 !CKEDITOR
.disableAutoInline
&& CKEDITOR
.inlineAll();
151 * Disables creating the inline editor automatically for elements with
152 * the `contenteditable` attribute set to `true`.
154 * CKEDITOR.disableAutoInline = true;
156 * @cfg {Boolean} [disableAutoInline=false]