History: CKEditor4
Source of version: 118 (current)
Copy to clipboard
[https://sourceforge.net/p/tikiwiki/code/44920|On 2013-02-18, Arildb upgraded CKEditor to 4.0 in trunk]
The target for the [http://ckeditor.com/demo|CkEditor] 4 integration is to upgrade to the new version of [http://ckeditor.com/demo|CkEditor] for Tiki 11 and move it out of "experimental". The current functionality should be supported "as is".
New features in [http://ckeditor.com/demo|CkEditor] 4, e.g. inline editing, can be added once the core editor is upgraded. A new ((ExperimentalBranches ckeditor4|experimental branch ckeditor4)) is established to integrate the new features.
The current CkEditor 4 integration is based on the "Standard" download package. See [http://ckeditor.com/blog/Intro-to-Customizing-CKEditor-4] for more info. One important passage: "The Standard package doesn’t include plugins like Alignment, Font Size, Color and a few other typical buttons. Why? Because modern websites predefine those things in CSS to avoid low quality content. Users should not "play around" with formatting. Web standards are increasingly more focused on the semantic information of texts. The Standard CKEditor comes with all the necessary tools to create "good web content". The idea is teaching our users about the best way for a "better web", so we made Standard the default option."
! 2013-07-29 Inline Edit: False positives visible in wiki diff after edit
They are not false positives. Check the difference in length between the sections.
The problem is that an extra image is being inserted when inline editing {sign user="arild" datetime="2013-08-23T18:56:34+00:00"}.
Fixed in r47240
{flash type="url" movie="display309" width="1025" height="712"}
! 2013-07-29 Browser detection is required
With Firefox for Android, Opera for Android and the native Android browser, WYSIWYG editing just spins forever. When WYSIWYG-wiki, it should revert to wiki syntax in a regular text box. For HTML-WYSIWYG, either just error message or let user edit HTML in text mode.
! Action items from 2013-02-21 conference call
* --get demo sites up (Pascal)-- Done
* --Revisit in 2-3 weeks to see if on track for Tiki11 with CKEditor4-- CkEditor is integrated
* --Revisit the default tools to be cleaner-- (Geoff). toolbars have been updated
** http://sourceforge.net/p/tikiwiki/code/41080
* --Prefs dependencies instead of profile-- A profile is no longer used
** {img fileId="109"}
! Where to test and demo issues
* 11.x
** http://demo.tiki.org/wysiwyg-html-11x/
** http://demo.tiki.org/wysiwyg-wiki-11x/
* ((ExperimentalBranches ckeditor4)) for inline editing, etc.
** http://demo.tiki.org/wysiwyg-html-trunk/
** http://demo.tiki.org/wysiwyg-wiki-trunk/
These are places to show off issues. We make more than one demo sites because the various modes are mutually exclusive and we need a place to show off issues for each.
! Questions
* How can we reset toolbar to default?
** http://demo.tiki.org/wysiwyg-html-11x/tiki-admin_toolbars.php
** http://demo.tiki.org/wysiwyg-wiki-11x/tiki-admin_toolbars.php
! Regressions
* --Disabled BiDi functions, due to JS error {sign user="arild" datetime="2013-02-18T23:39:48+00:00"}--
* --looks like the toolbar settings are not being observed ie missing icons etc-- {sign user="eromneg" datetime="2013-02-21T15:38:00+00:00"}
** FIXED {sign user="eromneg" datetime="2013-02-21T15:38:00+00:00"}
** The toolbars look ok to me now. Is it solved? {sign user="arild" datetime="2013-04-08T17:26:25+00:00"}
* --when editing a plugin, double clicking the grey box opens the plugin editor correctly, but a subsequent edit and Insert does not close the editor - had to click top right to do that - plus the plugin was not updated in place - instead it placed another version at the top of page (similar to bug mentioned above)-- {sign user="eromneg" datetime="2013-02-21T15:38:00+00:00"}
** FIXED - but the key issue of paragraph/lie feed handling is still to be resolved {sign user="eromneg" datetime="2013-02-21T15:38:00+00:00"}
** seems to happen globally in Tiki now for me - it does not close the dialog in wiki mode too {sign user="luci" datetime="2013-02-24T03:03:53+00:00"}
* cannot resize the width of the edit screen - height resizes OK {sign user="eromneg" datetime="2013-02-21T15:38:00+00:00"}
** I am not sure if this is a bug. Using a fixed-width layout, it seems correct that the editor only scales in height. {sign user="arild" datetime="2013-03-08T16:37:54+00:00"}
** it always used to do this - and on many occasions you need to increase the width of the edit screen to make editing easier {sign user="eromneg" datetime="2013-02-21T15:38:00+00:00"}
* --There is a "You need apply profile feature_optional" in the admin wysiwyg panel. The profile doesn't seem to work-- {img fileId="156"}. {sign user="arild" datetime="2013-03-10T09:54:07+00:00"}
** Profiles are no longer used. {sign user="arild" datetime="2013-06-03T19:55:57+00:00"}
! Old bugs
* --missing bullet indent icon in toolbars-- fixed {sign user="eromneg" datetime="2013-02-21T15:41:00+00:00"}
** This should be solved with the latest toolbar update {sign user="arild" datetime="2013-03-09T20:22:01+00:00"}
** Yes fixed and I backported jonny's fix to 10.x {sign user="eromneg" datetime="2013-03-14T09:55:00+00:00"}
* maketoc does not pickup header tags with attributes, as can be seen on [http://demo.tiki.org/wysiwyg-html/tiki-index.php?page=AB+sample+page+to+html]. {sign user="arild" datetime="2013-03-09T20:24:35+00:00"}
** Same in 9x. {sign user="luci" datetime="2013-03-14T13:56:08+00:00"}
** See [http://show.tiki.org/wysiwyg-html/tiki-index.php?page=Sample+Page] for an example {sign user="arild" datetime="2013-06-02T11:32:44+00:00"}
* iframe plugin gets corrupted and loses data. See: [http://demo.tiki.org/wysiwyg-html/tiki-index.php?page=ab+iframe+test]. Same problem in 10. {sign user="arild" datetime="2013-03-09T21:01:11+00:00"}
** Should be fixed in r46137 {sign user="arild" datetime="2013-06-02T18:07:26+00:00"}
* The anchor tag is stripped away in wysiwyg-html {sign user="arild" datetime="2013-03-09T21:48:19+00:00"}
** Seems to work now {sign user="arild" datetime="2013-06-02T18:07:26+00:00"}
! Not sure if regression or old bug
!!- Default home page has issue with PluginDIV
See [http://demo.tiki.org/11x/Nested+plugins+-+problem+description] for more.
Note: This is an old problem, and a different solution is planned by Jonny. So, this problem should wait, considering that plugins are a sensitive coding area.
{sign user="arild" datetime="2013-06-03T18:48:01+00:00"}
{flash type="url" movie="display141" width="751" height="703"}
!!- Extra lines appearing in WYSIWYG-HTML
feature_wiki_paragraph_formatting_add_br was enabled on the site. As mentioned: "requires feature_wiki_paragraph_formatting_add_br='n' (needs to be off)". I have now disabled feature_wiki_paragraph_formatting_add_br on the wysiwyg-html site. I did the same wysiwyg-html conversion as Marc in the video. Here is the result [http://demo.tiki.org/wysiwyg-html/tiki-index.php?page=AB+sample+page+to+html]{sign user="arild" datetime="2013-03-09T19:33:43+00:00"}
* editing seems to be inserting lots and lots and lots of ~np~<p> </p>~/np~ tags throughout the content (might be after plugins?) {sign user="eromneg" datetime="2013-02-21T15:38:00+00:00"}
** This is the same issue as "On every edit, it seems to add a line break Marc Laporte" below. With the new option setting this seems to work fine. {sign user="arild" datetime="2013-03-08T16:34:37+00:00"}
* On every edit, it seems to add a line break {sign user="marclaporte" datetime="2013-02-18T22:52:32+00:00"}
** still an issue. Seems to happen when editing starts {sign user="marclaporte" datetime="2013-02-19T16:52:35+00:00"}
*** requires feature_wiki_paragraph_formatting_add_br='n' (needs to be off) {sign user="luci" datetime="2013-02-24T03:03:53+00:00"}
** Seems to work now. {sign user="arild" datetime="2013-03-08T16:31:57+00:00"}
Setting feature_wiki_paragraph_formatting_add_br='n' is not an alternative, and both wysiwyg-wiki and -html use the same setting. -wiki is the default, and it requires the setting on.
That disables the 'solution' mentioned above. However, in the latest version of Tiki11 this seems to function pretty good. {sign user="arild" datetime="2013-06-03T19:44:08+00:00"}
{flash type="url" movie="display142" width="1366" height="718"}
!!- Use of selected text is different in Wiki and WYSIWYG
loss of text seems to work now.
However ...
# a paragraph is always added, which distrupts the document layout.
# notice the BR tags in the multi-lined popup message. This is fixed in the latest Tiki 11 version
See: [http://show.tiki.org/wysiwyg-html/tiki-index.php?page=Mouseover+test] for more.
{sign user="arild" datetime="2013-06-03T19:39:17+00:00"}
{flash type="url" movie="display143" width="1357" height="700"}
!!- Paste to WYSIWYG-Wiki becomes undefined
The problem is still there in the linked page.
However, ...
The CkEditor4 problem, described on demo's wysiwyg-html installation, "Paste to WYSIWYG-Wiki becomes undefined" seems solved in newer versions.
demo.tiki.org/wysiwyg-wiki version: Last update from SVN (11.0svn): Tuesday 21 of May, 2013 18:54:29 UTC - REV 46024 (MyISAM).
The installation needs an update
{sign user="arild" datetime="2013-06-03T19:10:41+00:00"}
http://demo.tiki.org/wysiwyg-wiki/tiki-editpage.php?page=Paste+to+Undefined {sign user="marclaporte" datetime="2013-03-09T02:06:07+00:00"}
{flash type="url" movie="display144" width="689" height="661"}
! Old feature disappointment
* Link to tiki-admin_toolbars.php lost is there for wiki toolbar but not WYSIWYG toolbar {sign user="marclaporte" datetime="2013-02-18T23:45:22+00:00"}
** During the recent webinar, it was suggested to move it to the admin toolbar module
! Setting the dependencies
In the Feb-13 webinar, it was suggested to use preferences instead of a profile, to set dependencies.
!! Settings needed by CkEditor4
preferences:
feature_wysiwyg: y
feature_wiki_paragraph_formatting: y
feature_wiki_paragraph_formatting_add_br: n Changed was y
* this needs to be 'y' if you are using the standard wiki editor as well, so some code changes are needed to ignore this pref in the wysiwyg editor - see recent emails: Geoff
wysiwyg_wiki_parsed: y
feature_wiki_allowhtml: y
feature_ajax: y
Needed for wysiwyg_htmltowiki and "visual" plugins
ajax_autosave: y
wysiwyg_toolbar_skin: moono CkEditor4 default skin
On by default but should be switched if not on
wysiwyg_ckeditor:y
wysiwyg_memo: y
!! Alternatives
The option setting for "Wysiwyg editor" is done 3 places
* admin\include_wysiwyg.tpl(16):
* admin\include_wiki.tpl(100):
* include_textarea.tpl(20):
!!! Current status. --Simplify profile--. No profile needed
--A new profile is listed "Ckeditor 4". However, it doesn't seem to work. It seems planned to be able to trigger this from the admin wysiwyg panel--.
No profile is used. The settings are updated and the editor is fixed. No profile needed. {sign user="arild" datetime="2013-06-03T19:51:08+00:00"}
!!! Use preferences
The webinar suggested not using a profile, but preferences. One advantage of this is that it doesn't require internet access to activate the settings
One way to to set the needed preferences is to have "sub panel" for the dependencies.
When "Wysiwyg editor" is selected this subpanel is displayed.
The user should the manually select all sub options. Maybe with a mark all button.
Could look like ... x = checkbox
x Wysiwyg editor
It is highly recommended to also activate the following features and option, when activating the Wysiwyg editor.
(Select All)
x feature_wysiwyg
x feature_wiki_paragraph_formatting
x wysiwyg_wiki_parsed
x feature_wiki_allowhtml
x feature_ajax
x ajax_autosave
(dropdown box) wysiwyg_toolbar_skin: moono (default) or kama
x wysiwyg_ckeditor
x wysiwyg_memo
If all these subfeatures are to be included, it's a little messy to have the "Wysiwyg editor" in 3 places.
So, maybe keep the option in admin\include_wysiwyg.tpl(16).
For the other 2, remove the option, but maybe provide a link to the WYSIWYG admin panel? {sign user="arild" datetime="2013-03-10T10:11:39+00:00"}
! Further work
* https://github.com/Studio-42/elFinder/wiki/Integration-with-CKEditor
* See [http://ckeditor.com/blog/CKEditor-4-Launched-Inline-Editing-New-Skin-and-More] for a description of the new CkEditor 4.
{REMARKSBOX(type="information" title="Experimental branch ckeditor4")}The main new feature in CkEditor 4 is the inline editing. A new ((ExperimentalBranches ckeditor4|experimantal branch ckeditor4)) is established to integrate the new features.{REMARKSBOX}
!!- Integrating inline editing
See [http://docs.ckeditor.com/#!/guide/dev_inline] for details.
Test at: http://demo.tiki.org/wysiwyg-experimental/ ((ExperimentalBranches ckeditor4)) for inline editing, etc.
Inline editing is controlled by the "contenteditable='true'" attribute, which is added to DIV's that should be editable.
Additionally a DIV id is specified, which should be edited. In Tiki id='page-data' contains the wiki page/article content.
There should an activation of inline editing. When activated, the check if the page is already being edited must be done.
The Tiki integration must be able to save the content changed by inline editing. This can be implemented by adding a "Save" button to the inline editor toolbar.
Wiki content can be in wiki format or HTML format. Inline edited content must/should be saved in the same format as is currently used by the page/content. So, pages in wiki format is saved in wiki format, and pages in HTML format is saved in HTML format.
HTML can represent more "things" than wiki format, e.g. a table border width. So, when content is saved in wiki format, there is a change of some formatting loss. Pages in HTML format should have no loss.
!!! Questions
#Is a new permission needed, e.g. "inline_edit", or should inline editing follow the general "edit" permission?
#Is inline editing relevant for any other object type but wiki pages?
** Perhaps custom modules? unless we just encourage people to use ((doc:Module MenuPage)) {sign user="marclaporte" datetime="2013-02-19T17:02:31+00:00"}
!!! Quick Screencast
{flash type="url" movie="display157" width="1050" height="736"}
!! WYSIWYG-Wiki
* [http://ckeditor.com/demo#bbcode|This is an example of a custom data processor for CKEditor, which produces BBCode instead of HTML. Note that the editor here accepts BBCode not only on output but also on input. Data Processing is a powerful feature of CKEditor. By creating plugins, it is possible to make CKEditor handle different data formats transparently, like BBCode, Wiki format, Markdown, etc.]
** Has this been tried with Tiki syntax?
!! Jison parser integration
The new Tiki parser needs to be integrated with CKEditor 4.
!!- Optimal default toolbar
The default toolbars are ok now, or? {sign user="arild" datetime="2013-06-03T19:48:03+00:00"}
!!! Objectives
* Should look good on fresh install
* Should not wrap under normal cirmcumstances, such right & left columns are active
** A single, left sidebar is the Tiki default. Wrapping also depends on the width. Not having wrapping using the default single, left sidebar and a common width (980px?) could be sufficient. {sign user="arild" datetime="2013-03-09T21:17:57+00:00"}
* Plugins: (ex.:PluginKaltura, PluginjCapture, etc.): I think it's nice that they appear on the toolbar if there is a preference check, otherwise, most people won't know how to activate {sign user="marclaporte" datetime="2013-03-09T14:43:42+00:00"}
* [http://thread.gmane.org/gmane.comp.cms.tiki.cvs/78053/focus=78060|Related thread]
** Adding to 3rd row is great because it will be more obvious when they appear... {sign user="marclaporte" datetime="2013-03-10T13:36:42+00:00"}
*** wysiwyg-html will likely have use 3 rows by default. A 4th row is probably not wanted.{sign user="arild" datetime="2013-03-10T14:39:13+00:00"}
!!! Default WYSIWYG toolbar today in 10.x
{img src="tiki-download_wiki_attachment.php?attId=187"}
How can it be simplified? -> http://sourceforge.net/p/tikiwiki/code/41080
!!! Default toolbars captured by Arild
{sign user="arild" datetime="2013-03-09T21:38:49+00:00"}
The menus have been updated, and they are now quite a bit cleaner. A new set of toolbar snapshots.
The first with a single sidebar (Tiki default). The second with both left and right sidebars activated.
Def wiki menu
{img fileId="150"}
{img fileId="153"}
Def wysiwyg-wiki menu
{img fileId="149"}
{img fileId="152"}
Def wysiwyg (HTML) menu
{img fileId="148"}
{img fileId="151"}
A suggested change for WYSIWYG-html...
I miss the old "Image" button, which opened the "other" image interface. This has better formatting capabilities, then the "Choose or upload images" plugin. However, the "Choose" plugin is much better with other things, e.g. thumb nails.
The "Image" button is better for "default", I believe.
Maybe collect all formatting dropdowns to the bottom row?
The "Show Blocks" button...is it very useful? I don't use it. If it is removed, the "narrow screen" second row will look better.
The anchor tag is stripped away (a bug, I believe). It's nice to have, if it works. Can be removed, I believe.
"Paste as plain text" and "Paste from Word" may be other candidates for removal.
"Page break" is it needed?
The "Templates" button does not seem needed.
* The source button has an additional image, which may not be needed. {sign user="arild" datetime="2013-03-10T09:34:33+00:00"}
---
{sign user="arild" datetime="2013-03-04T15:23:39+00:00"}
Def wiki menu
{img src="display112" height="75%" width="75%"}
Def wysiwyg-wiki menu
{img src="display113"}
Def wysiwyg (HTML) menu
{img src="display114"}
!!! Default toolbars captured by Marc on demo.tiki.org
{sign user="marclaporte" datetime="2013-03-09T03:06:28+00:00"}
Def wiki menu
{img fileId="145"}
Def wysiwyg-wiki menu
{img fileId="146"}
Def wysiwyg (HTML) menu
{img fileId="147"}