]>
Commit | Line | Data |
---|---|---|
1 | /** | |
2 | * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. | |
3 | * For licensing, see LICENSE.md or http://ckeditor.com/license | |
4 | */ | |
5 | ||
6 | ( function() { | |
7 | /** @class CKEDITOR */ | |
8 | ||
9 | /** | |
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. | |
13 | * | |
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. | |
16 | * | |
17 | * <div contenteditable="true" id="content">...</div> | |
18 | * ... | |
19 | * CKEDITOR.inline( 'content' ); | |
20 | * | |
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. | |
24 | * | |
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. | |
29 | */ | |
30 | CKEDITOR.inline = function( element, instanceConfig ) { | |
31 | if ( !CKEDITOR.env.isCompatible ) | |
32 | return null; | |
33 | ||
34 | element = CKEDITOR.dom.element.get( element ); | |
35 | ||
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.'; | |
39 | ||
40 | var editor = new CKEDITOR.editor( instanceConfig, element, CKEDITOR.ELEMENT_MODE_INLINE ), | |
41 | textarea = element.is( 'textarea' ) ? element : null; | |
42 | ||
43 | if ( textarea ) { | |
44 | editor.setData( textarea.getValue(), null, true ); | |
45 | ||
46 | //Change element from textarea to div | |
47 | element = CKEDITOR.dom.element.createFromHtml( | |
48 | '<div contenteditable="' + !!editor.readOnly + '" class="cke_textarea_inline">' + | |
49 | textarea.getValue() + | |
50 | '</div>', | |
51 | CKEDITOR.document ); | |
52 | ||
53 | element.insertAfter( textarea ); | |
54 | textarea.hide(); | |
55 | ||
56 | // Attaching the concrete form. | |
57 | if ( textarea.$.form ) | |
58 | editor._attachToForm(); | |
59 | } else { | |
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 ); | |
63 | } | |
64 | ||
65 | // Once the editor is loaded, start the UI. | |
66 | editor.on( 'loaded', function() { | |
67 | editor.fire( 'uiReady' ); | |
68 | ||
69 | // Enable editing on the element. | |
70 | editor.editable( element ); | |
71 | ||
72 | // Editable itself is the outermost element. | |
73 | editor.container = element; | |
74 | editor.ui.contentsElement = element; | |
75 | ||
76 | // Load and process editor data. | |
77 | editor.setData( editor.getData( 1 ) ); | |
78 | ||
79 | // Clean on startup. | |
80 | editor.resetDirty(); | |
81 | ||
82 | editor.fire( 'contentDom' ); | |
83 | ||
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' ); | |
88 | ||
89 | // The editor is completely loaded for interaction. | |
90 | editor.status = 'ready'; | |
91 | editor.fireOnce( 'instanceReady' ); | |
92 | CKEDITOR.fire( 'instanceReady', null, editor ); | |
93 | ||
94 | // give priority to plugins that relay on editor#loaded for bootstrapping. | |
95 | }, null, null, 10000 ); | |
96 | ||
97 | // Handle editor destroying. | |
98 | editor.on( 'destroy', function() { | |
99 | // Remove container from DOM if inline-textarea editor. | |
100 | // Show <textarea> back again. | |
101 | if ( textarea ) { | |
102 | editor.container.clearCustomData(); | |
103 | editor.container.remove(); | |
104 | textarea.show(); | |
105 | } | |
106 | ||
107 | editor.element.clearCustomData(); | |
108 | ||
109 | delete editor.element; | |
110 | } ); | |
111 | ||
112 | return editor; | |
113 | }; | |
114 | ||
115 | /** | |
116 | * Calls {@link CKEDITOR#inline} for all page elements with | |
117 | * the `contenteditable` attribute set to `true`. | |
118 | * | |
119 | */ | |
120 | CKEDITOR.inlineAll = function() { | |
121 | var el, data; | |
122 | ||
123 | for ( var name in CKEDITOR.dtd.$editable ) { | |
124 | var elements = CKEDITOR.document.getElementsByTag( name ); | |
125 | ||
126 | for ( var i = 0, len = elements.count(); i < len; i++ ) { | |
127 | el = elements.getItem( i ); | |
128 | ||
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. | |
132 | ||
133 | data = { | |
134 | element: el, | |
135 | config: {} | |
136 | }; | |
137 | ||
138 | if ( CKEDITOR.fire( 'inline', data ) !== false ) | |
139 | CKEDITOR.inline( el, data.config ); | |
140 | } | |
141 | } | |
142 | } | |
143 | }; | |
144 | ||
145 | CKEDITOR.domReady( function() { | |
146 | !CKEDITOR.disableAutoInline && CKEDITOR.inlineAll(); | |
147 | } ); | |
148 | } )(); | |
149 | ||
150 | /** | |
151 | * Disables creating the inline editor automatically for elements with | |
152 | * the `contenteditable` attribute set to `true`. | |
153 | * | |
154 | * CKEDITOR.disableAutoInline = true; | |
155 | * | |
156 | * @cfg {Boolean} [disableAutoInline=false] | |
157 | */ |