Wiki source code of Features

Version 99.1 by Manuel Leduc on 2022/06/03 15:16

Show last authors
1 {{velocity output="false"}}
2 #set ($discard = $xwiki.ssx.use('xwiki:Documentation.UserGuide.Features.KeyboardShortcuts'))
3 {{/velocity}}
4
5 The CKEditor integration with XWiki provides most of the standard editing features available in [[CKEditor>>https://ckeditor.com/]] and some additional features that are specific to XWiki.
6
7 {{toc start="2"/}}
8
9 == Standard CKEditor Features ==
10
11 The standard features include: text formatting, lists, links, images, tables and many more. Check the [[CKEditor>>https://ckeditor.com/]] web site to see all the supported features. Note that by default XWiki doesn't enable all the features available in CKEditor because we want the users to focus on the content and leave the styling in the hands of the XWiki skin. This way all wiki pages will have a consistent style. For this we disable by default the features that are related to styles, such as text aligning, changing fonts or text color. If you really need these features you can enable them from the dedicated [[administration section>>||anchor="HAdministrationSection"]].
12
13 {{image reference="ckeditor.png"/}}
14
15 == XWiki Features ==
16
17 In order to integrate CKEditor with XWiki we had to modify some of the standard features, like links and images, and to add new features that only make sense in XWiki, like support for wiki macros.
18
19 === Advanced Content Filter for XWiki Syntax ===
20
21 From the start you need to know that the content you edit with the CKEditor is saved in XWiki as wiki syntax. This means that the HTML produced by the CKEditor is converted at save time to wiki syntax. In order for this conversion to be possible we have to disable the CKEditor features that produce content that cannot be written in wiki syntax and to remove (filter) such content from the CKEditor output. We achieve this by configuring the [[Advanced Content Filter>>https://docs.ckeditor.com/#!/guide/dev_acf]] and the [[Paste Filter>>https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-pasteFilter]] with rules for the [[XWiki Syntax>>platform:Main.XWikiSyntax]].
22
23 In order for a wiki syntax to be compatible with the CKEditor it needs to:
24 * have a parser so that we can convert from the wiki syntax to HTML before the editor is loaded or when switching from Source to WYSIWYG mode
25 * have a renderer so that we can convert from HTML to wiki syntax on save or when switching from WYSIWYG mode to Source
26 * provide a configuration for the Advanced Content Filter; this is hard-coded at the moment unfortunately but we plan to make it plugable
27
28 Changing the wiki syntax while the content is being edited with the CKEditor will trigger a reload of the editor because the Advanced Content Filter configuration cannot be updated on the fly. But don't worry, unsaved changes won't be lost. In case the new wiki syntax doesn't support WYSIWYG editing (because it doesn't have a renderer that would allow the editor to convert the edited content from HTML to the new syntax) then the CKEditor will force the Source mode after the reload, disabling the WYSIWYG mode at the same time.
29
30 Checkout the [[XWiki Rendering Framework>>rendering:Main.WebHome]] documentation for more information on available syntaxes.
31
32 === Wiki Syntax Source ===
33
34 The Source button from the tool bar allows you to view and edit the underlying wiki syntax that is generated by the CKEditor. The text selection (caret) is preserved when switching between Source and WYSIWYG mode ({{info}}since v1.45{{/info}}).
35
36 {{image reference="ckeditor-source.png"/}}
37
38 === Wiki Links ===
39
40 We modified the [[link dialog>>https://ckeditor.com/addon/link]] to add support for creating links to wiki pages and attachments. You can still create links to arbitrary web pages (URLs) and links to mail addresses though.
41
42 {{gallery}}
43 image:ckeditor-linkDialog.png
44 image:ckeditor-linkDialog-suggestions.png
45 image:ckeditor-linkDialog-picker.png
46 {{/gallery}}
47
48 You can select the target page or attachment from the list of suggestions that you get as you type or from the tree picker. You can attach files to the edited page from the Upload tab that is visible when the link target type is set to Attachment, or you can drop them over the editing area and the editor will automatically create a link to the new attachment.
49
50 You can also create links to existing wiki pages and attachments directly from the editing area using the link auto-complete feature. Just type (% class="key" %)[(%%) (open square bracket) followed by at least 2 characters and you will get link suggestions based on the typed text.
51
52 {{velocity}}
53 {{html clean="false"}}
54 <video controls muted src="$doc.getAttachmentURL('ckeditor-link-autocomplete.webm')" width="780">
55 Sorry, your browser doesn't support embedded videos.
56 </video>
57 {{/html}}
58 {{/velocity}}
59
60 To remove a link (unlink) you have multiple options:
61 * click on the link and use the balloon (context) toolbar
62 * right click on the link and use the context menu
63 * or use the toolbar button, if it's available
64
65 === Image Attachments ===
66
67 We modified the [[image dialog>>https://ckeditor.com/addon/image2]] to add support for inserting images that are attached to wiki pages. You can still insert external image though.
68
69
70 {{gallery}}
71 image:ckeditor-imageDialog.png
72 image:ckeditor-imageDialog-suggestions.png
73 image:ckeditor-imageDialog-picker.png
74 {{/gallery}}
75
76
77 You can select the image attachment from the list of suggestions that you get as you type or from the tree picker. You can attach new images to the edited page from the Upload tab or you can simply drop them over the editing area and the editor will automatically upload and insert them.
78
79 {{version since='1.62'}}
80 The ##xwiki-image## has been renamed ##xwiki-image-old## and is replaced by a new ##xwiki-image## plugin. To switch to the new ##xwiki-image## plugin, remove it from the **disabled plugins** field from the [[WYSIWYG Editor>>||anchor="HAdministrationSection"]] section of the Administation. Adding ##xwiki-image## back to the disabled plugin will bring back ##xwiki-image-old##.
81
82 {{gallery}}
83 image:image_plugin_select_gallery.png
84 image:image_plugin_select_document_tree.png
85 image:image_plugin_select_upload.png
86 image:image_plugin_select_icon.png
87 image:image_plugin_select_url.png
88 image:image_plugin_edit_standard.png
89 image:image_plugin_edit_advanced.png
90 {{/gallery}}
91
92 The new ##xwiki-image## plugin aims at covering the same feature as ##xwiki-image-old##. In addition, the new ##xwiki-image## allows users to select an image style, giving a standardized appearance to an image by selecting a style from a dropdown list. Image style can be configured from the [[Image Style Administration page>>Extension.Image.Style.UI.WebHome]].
93
94 {{/version}}
95
96 {{version since='1.63'}}
97 Note for developers: The image selection tabs are now provided using an [[User Interface Extension Point>>doc:xwiki:Documentation.DevGuide.Tutorials.UIXTutorial.WebHome]]. For more information see the [[UIXP documentation>>doc:xwiki:Documentation.DevGuide.ExtensionPoint.CKEditor Plugin Image Selector]].
98 {{/version}}
99
100 === Wiki Macros ===
101
102 We added support for inserting [[wiki syntax macros>>platform:Main.XWikiSyntax||queryString="syntax=2.1&section=Macros"]]. For this you can use either the generic Insert {{velocity}}$services.icon.render('add'){{/velocity}} menu or the dedicated macro toolbar button, when available, which opens the Macro Wizard, allowing you to select a macro and set its parameters.
103
104 Most macros have their output protected (read-only) within the editing area because the output is generated by transforming the macro content based on the parameters you set. The only way to modify the output of such a macro is through the Macro Wizard, which you can open using the same tool bar button or simply by double clicking anywhere on the macro output. If the macro output is empty a place-holder is displayed instead so that you are able to edit the macro parameters.
105
106 If the macro is on a separate line (stand-alone, not inside a paragraph of text) and its content is rendered without being transformed then the editor allows editing the macro content in-place, directly inside the editing area. Some parts of the macro output will still be protected but the area where the macro content is displayed is editable. Using the tool bar button while the caret is inside the macro content will insert a nested macro. Double clicking on the macro output won't open the Macro Wizard. If you want to edit the macro parameters you can use the balloon tool bar visible when the macro content is focused.
107
108 {{gallery}}
109 image:ckeditor-macro-toolbar.png
110 image:ckeditor-macro-select.png
111 image:ckeditor-macro-edit.png
112 image:ckeditor-macro-edit-groups.png
113 image:ckeditor-macro-edit-pickers.png
114 image:ckeditor-macro-output.png
115 {{/gallery}}
116
117 When the output of a macro is selected, the macro name appears on the path displayed on the editor status bar.
118
119 On the "Select Macro" step of the Macro Wizard the deprecated and internal macros are hidden from the "All Macros" category that is selected by default. If you need to use a deprecated or internal macro you need to select the corresponding category explicitly. {{version since="14.4"}}It's also possible to install and select a not yet installed macro at the end of the list.{{/version}}
120
121 On the Edit Macro step the mandatory parameters and those that have an explicit value set are shown first. The advanced parameters are shown last. The deprecated parameters and those that can be edited in-place (within the editing area) are not shown. If there are too many parameters, some of them are collapsed under a "More" section. When inserting a macro, the macro content text area is prefilled with the text selected within the editing area. This means you can for instance transform a paragraph into an error message by selecting the paragraph text, click the Insert Macro button from the tool bar, select the Error Message macro and insert it. The Macro Wizard doesn't show the macro content text area if the macro content can be edited in-place.
122
123 {{velocity}}
124 {{html clean="false"}}
125 <video controls muted src="$doc.getAttachmentURL('ckeditor-macro-inline-edit.webm')" width="780">
126 Sorry, your browser doesn't support embedded videos.
127 </video>
128 {{/html}}
129 {{/velocity}}
130
131 The macro parameters can be grouped, if the macro descriptor says so. Check for instance the [[Include Macro>>extensions:Extension.Include Macro]]. Two types of macro parameter groups are supported:
132
133 * groups of related parameters (e.g. ##reference## and ##type## in the case of the Include Macro)
134 * groups of alternative parameters (only one parameter in the group should be set); this type of groups are displayed using tabs (e.g. "Resource" and "Page" in the case of the Include Macro)
135
136 Some macro parameters will have pickers, depending on their type. The binding between macro parameter types and the associated pickers is done on the server side (check the ##templates/html_displayer## folder inside the XWiki WAR). For instance, if you have a [[wiki-based rendering macro>>xwiki:Documentation.DevGuide.Tutorials.WritingMacros.WikiMacroTutorial.WebHome]], you can set the type of a macro parameter to "org.xwiki.model.reference.DocumentReference" in order to get a document picker when inserting or editing your macro from the WYSIWYG editor.
137
138 === Office Import ===
139
140 You can import office files using a dedicated button from the tool bar. The files are uploaded and attached to the edited page and their content (including images) is inserted in the content of the page. You have the option to filter the styles and to use the [[Office Viewer macro>>extensions:Extension.Office Macro]].
141
142 {{gallery}}
143 image:ckeditor-office-toolbar.png
144 image:ckeditor-office-modal.png
145 {{/gallery}}
146
147 This feature requires the Office Server to be connected. See the [[Office Importer Application>>extensions:Extension.Office Importer Application]] documentation for more information.
148
149 === Custom Styles ===
150
151 We customized the Styles drop down from the tool bar to include only the styles that make sense in XWiki. We added new styles for tables, images and paragraphs that are specific to the XWiki skin.
152
153 {{image reference="ckeditor-styles.png"/}}
154
155 === Spell Checker ===
156
157 The CKEditor integration uses by default the native browser spell checker. To access the spell checking suggestions you need to use one of the following shortcuts:
158
159 * Windows: (% class="key" %)Ctrl(%%) + Right Click
160 * MacOS: (% class="key" %)Alt(%%) + (% class="key" %)Cmd
161 * Linux: (% class="key" %)Ctrl(%%) + Right Click
162
163 If you don't get any suggestions then it may be the case that your browser doesn't support spell checking natively. You can also configure CKEditor to use an external spell checking web service. Checkout the [[CKEditor documentation>>https://ckeditor.com/docs/ckeditor4/latest/guide/dev_spellcheck.html]] for more information.
164
165 If you're looking for a more secure (local) spell checker then there are CKEditor plugins that provide this functionality.
166
167 === Full Screen Mode ===
168
169 We modified the standard full screen mode from CKEditor to integrate with XWiki's form action buttons.
170
171 {{image reference="ckeditor-fullScreen.png"/}}
172
173 === Unsaved Changes Protection ===
174
175 A confirmation popup is shown when leaving the page with unsaved changes. This should prevent you from loosing unsaved changes by mistake. Additionally, on Firefox, unsaved changes are cached and restored if you leave the page and then go back. The same happens if you (soft) reload the page.
176
177 === Keyboard Shortcuts ===
178
179 The following keyboard shortcuts are available:
180
181 * [[standard keyboard shortcuts>>https://ckeditor.com/docs/ckeditor4/latest/features/shortcuts.html]] provided by CKEditor, independent of its integration in XWiki
182 * XWiki custom shortcut keys:
183 ** (% class="key" %)[(%%) (open square bracket) provided by XWiki's custom [[link plugin>>||anchor="HWikiLinks"]]
184 ** (% class="key" %)@(%%) (at sign) provided by [[Mentions Application>>Extension.Mentions Application.WebHome||anchor="HMentionsAuto-Completion"]]
185 ** [[edit form shortcut keys>>xwiki:Documentation.UserGuide.Features.KeyboardShortcuts||anchor="HEditMode"]] to preview, save or cancel the edit form
186 * custom shortcut keys that an administrator can add using the [[##keystrokes##>>https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-keystrokes]] CKEditor configuration parameter from the dedicated [[administration section>>||anchor="HAdministrationSection"]].
187
188 === Administration Section ===
189
190 A dedicated section in the [[Wiki Administration>>extensions:Extension.Administration Application]] is available for the CKEditor where you can enable or disable editing features. Check the [[customization guide>>extensions:Extension.CKEditor Integration||anchor="HCustomization"]] for more advanced configuration options.
191
192 {{image reference="ckeditor-administration.png"/}}
193
194 == Classic Editor vs. Inline Editor ==
195
196 CKEditor can be integrated either by replacing (or acting as) a text area ([[the classic editor>>https://ckeditor.com/docs/ckeditor4/latest/examples/classic.html]]) or by making a paragraph or a section of the page editable in-place ([[the inline editor>>https://ckeditor.com/docs/ckeditor4/latest/examples/inline.html]]). Let's see what are the main differences:
197
198 |=|=Classic Editor|=Inline Editor
199 |**Used by**|[[WYSIWYG edit mode>>xwiki:Documentation.UserGuide.Features.PageEditing||anchor="HWikieditingmode"]], [[Form edit mode>>xwiki:Documentation.UserGuide.Features.PageEditing||anchor="HFormeditingmode28akainlinemode29"]] for TextArea properties|[[In-place editing>>xwiki:Documentation.UserGuide.Features.PageEditing||anchor="HIn-placeediting"]]
200 |**Height**|Fixed|Variable
201 |**Toolbar position**|Fixed, above the editing area|Floating, at the top or at the bottom of the edited section, visible only on focus
202 |**Missing features**|JavaScript execution disabled by default within the editing area|Bottom (path) bar

Get Connected