diff options
Diffstat (limited to 'sources/core/creators/inline.js')
-rw-r--r-- | sources/core/creators/inline.js | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/sources/core/creators/inline.js b/sources/core/creators/inline.js new file mode 100644 index 0000000..a1a653c --- /dev/null +++ b/sources/core/creators/inline.js | |||
@@ -0,0 +1,157 @@ | |||
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 | */ | ||