DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:ckgedit

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
plugin:ckgedit [2017-12-11 18:19] – [Image Drag and Drop] turnermmplugin:ckgedit [2023-07-27 16:01] (current) – [CKGEdit Plugin] turnermm
Line 3: Line 3:
 ---- plugin ---- ---- plugin ----
 description: WYSIWYG editor based on the CKEditor description: WYSIWYG editor based on the CKEditor
-author     :  Myron Turner+author     : Myron Turner
 email      : turnermm02@shaw.ca email      : turnermm02@shaw.ca
 type       : syntax, action type       : syntax, action
-lastupdate : 2017-12-08 +lastupdate : 2022-10-06 
-compatible : Angua,Adora Belle, Weatherwax,Binky,Ponder Stibbons, Hrun, Detritus,Elenor of Tsort,Frusterick Manners+compatible :  Detritus,Elenor of Tsort,Frusterick Manners,Greebo,Hogfather,Igor,Jack Jackrum
 depends    :  depends    : 
-conflicts  : creole, mathjax, quickedit, yalist, tagentry, codemirror,fckg, numberedheadings,xbr +conflicts  : creole, quickedit, yalist, tagentry, codemirror,fckg, numberedheadings, xbr, struct 
-similar    : ckgdoku+similar    : 
 tags       : wysiwyg,editor,editing tags       : wysiwyg,editor,editing
- +downloadurl: https://github.com/turnermm/ckgedit/archive/current.zip
-downloadurl: https://github.com/turnermm/ckgedit/archive/master.zip+
 bugtracker : https://github.com/turnermm/ckgedit/issues bugtracker : https://github.com/turnermm/ckgedit/issues
-sourcerepo : https://github.com/turnermm/ckgedit/+sourcerepo : https://github.com/turnermm/ckgedit
 donationurl: http://mturner.org/userfiles/donate.php donationurl: http://mturner.org/userfiles/donate.php
  
 screenshot_img : http://i.imgur.com/VtI6chK.png   screenshot_img : http://i.imgur.com/VtI6chK.png  
 ---- ----
 +
 +===== Version 2022-02-27 =====
 +==== This version adds two new features. ==== 
 +  - CTRL-Q will exit the editor and save any changes to the document
 +  - Compatibility with [[plugin:imgpaste]].  Pasting images into the editor using CTRL+C/CTR+V will use the [[plugin:imgpaste]] ''filename'' setting. This feature is set to true by default but can be turned off in the Configuration Settings. The native ckgedit naming of images creates a name from the current namespace and the md5 hash of the image data.
 + 
 +
 ===== Index to Ckgedit documentation on dokuwiki.org ===== ===== Index to Ckgedit documentation on dokuwiki.org =====
  
 ** [[plugin:ckgedit:index|Index to the complete ckgedit documentation on dokuwiki.org]] ** ** [[plugin:ckgedit:index|Index to the complete ckgedit documentation on dokuwiki.org]] **
 +
 ===== About ckgedit ===== ===== About ckgedit =====
 +
 Ckgedit is a graphical editor for Dokuwiki based on the open source CKEditor.  The ckgedit plugin supports the basic dokuwiki feature set; the only thing in ckgedit that is not part of that feature set is font styling, which is implemented by means of a dokuwiki plugin that is given special status in the ckgedit pre-processor.  Ckgedit is a graphical editor for Dokuwiki based on the open source CKEditor.  The ckgedit plugin supports the basic dokuwiki feature set; the only thing in ckgedit that is not part of that feature set is font styling, which is implemented by means of a dokuwiki plugin that is given special status in the ckgedit pre-processor. 
  
Line 29: Line 37:
  
  
-Ckgedit is an upgrade from [[fckg|]], which uses the older FCKEditor. Much of the documentation for [[http://www.mturner.org/fckgLite|fckgLite]] applies to ckgedit. +===== Changelog =====
-==== History ==== +
-The original of ckgedit was called DokuwikiFCK (about 2007) and was based on a Perl parser which converted HTML into wiki markup for a variety of wikis, including Dokuwiki.  There was another plugin ([[plugin:fckw|]]) which had already integrated FCKEditor into the browser and was using the Perl back-end.  For a while I  worked with that.  +
  
-In the meantime, I came across a javascript HTML parser written by John Resig (creator of jQuery) and realized I could convert html to markup in the browser.  That became [[plugin:fckg|fckgLite]], which is still around and in use, but no longer being maintained.  Eventually FCKEditor was upgraded to [[http://ckeditor.com/|CKEDitor]] and [[plugin:fckg|fckgLite]] was replaced by ckgedit. 
- 
-===== Changelog ===== 
 ==== Last 15 commits ==== ==== Last 15 commits ====
  
-{{rss>https://github.com/turnermm/ckgedit/commits/master.atom date count=15}}+{{rss>https://github.com/turnermm/ckgedit/commits/current.atom date count=15}} 
  
-A more comprehensive account is included in the Changes file of the distribution.  The most comprehensive is on github: https://github.com/turnermm/ckgedit/commits/master 
 ===== Installation ===== ===== Installation =====
-**Requires php 5.3.3 or later.**  See [[#available_versions_of_ckgedit|table of versions]] for a pre 5.3 alternative.((If you have been running fckgLite ([[plugin:fckg]]) and want to test ckgedit, you must disable fckgLite.)) 
  
-For the basic install use the Dokuwiki Extensions Manager. This should work without incident. If not, then +For the basic install use the Dokuwiki [[plugin:extension|Extension Manager]]. This should work without incident. If not, then for a manual install, follow the instructions at [[:plugin_installation_instructions]].
-for a manual install, follow this procedure:+
  
  
-  - Download the tarball, then upload it to your DokuWiki installation under the lib/plugins directory  +This version of ckgedit uses the latest release of the CKEDitor (4.11.4).  Should you experience any difficulties, you can downgrade to the previous version, which uses CKEditor [[#https://github.com/turnermm/ckgedit/archive/4.9.zip|4.9]].
-  - uncompress the file (e.g. tar -xzvf turn*) +
-  - rename the resulting directory to ckgedit +
-  - Go to your Extensions Manager interface as an admin user to confirm the plugin was installed correctly; correct any issues noted there.  +
- +
-This version of ckgedit uses the latest release of the CKEDitor (4.5.7).  Should you experience any difficulties, you can downgrade to the previous version, which uses CKEditor [[#available_versions_of_ckgedit|4.5.1]].+
  
 **Issues:** You can post issues to the [[https://forum.dokuwiki.org|forum]] or to [[https://github.com/turnermm/ckgedit/issues|github]]. **Issues:** You can post issues to the [[https://forum.dokuwiki.org|forum]] or to [[https://github.com/turnermm/ckgedit/issues|github]].
  
-==== Installing in an IFRAME ==== +
-See: https://github.com/turnermm/ckgedit/issues/250+
 ==== File Browser ==== ==== File Browser ====
-When the plugin is initally installed, you will get an information message saying that a set of symbolic links have been created.  These links point to the Dokuwiki ''data/media'' directory from ''ckgedit/fckeditor/userfiles''. It is by means of these links that the file browser accesses the media directory.  For a complete discussion of how to handle the security for this set-up, see the [[http://www.mturner.org/fckgLite/doku.php/media#security_and_the_media_directory|instructions]] on the fckgLite web site.   
  
-These links are not needed on a Windows server and in some cases may fail to be created because of windows permissions. However, the .htaccess file in the data directory prevents access to your media directory . Therefore, proper security needs to be set up before you can access media files in the Windows set-up. This is also described in the [[http://www.mturner.org/fckgLite/doku.php/media#security_and_the_media_directory|instructions]] on how to handle the media directory.+When the plugin is initally installed, you will get an information message saying that a set of symbolic links have been created.  These links point to the Dokuwiki ''data/media'' directory from ''ckgedit/fckeditor/userfiles''. It is by means of these links that the file browser accesses the media directory. Three links are required: ''media'', ''file'', and ''image''. If they fail to be installed,  you can create them yourself using the unix ''ln'' command. 
 +   ln -s path_to/data/media media 
 +   ln -s path_to/data/media file 
 +   ln -s path_to/data/media image    
 +These links can be useful if, on a Windows server, you want to use the [[plugin:ckgedit:configuration#nix_style|]], setting. On Windows servers, ckgedit attempts to create these links, but permissions will often prevent their creation.  You can create them manually using the ''mklink'' command in the Command window.  You must run the Command Window as administrator.  The syntax there is: 
 +   mklink /D media path_to\data\media 
 +   mklink /D file path_to\data\media 
 +   mklink /D image path_to\data\media    
 +In all of the examples, it is assumed you are in ''fckeditor/userfiles'', otherwise you will have to specify the path to ''userfiles''.  
 + 
 +For information about creating symbolic links in Windows using the Power Shell, see \\ https://github.com/turnermm/ckgedit/issues/550 
 + 
 +For a complete discussion of how to handle the security for this set-up, see the [[http://www.mturner.org/fckgLite/doku.php/media#security_and_the_media_directory|instructions]] on the fckgLite web site. These links are not needed on a Windows server and in some cases may fail to be created because of windows permissions. However, the .htaccess file in the data directory prevents access to your media directory . Therefore, proper security needs to be set up before you can access media files in the Windows set-up. This is also described in the [[http://www.mturner.org/fckgLite/doku.php/media#security_and_the_media_directory|instructions]] on how to handle the media directory.
  
 It is possible to use the linux set-up on a windows machine by setting the [[plugin:ckgedit:configuration#nix_style|]] configuration option and and the windows set-up on a linux system by setting the [[plugin:ckgedit:configuration#winstyle]] option. It is possible to use the linux set-up on a windows machine by setting the [[plugin:ckgedit:configuration#nix_style|]] configuration option and and the windows set-up on a linux system by setting the [[plugin:ckgedit:configuration#winstyle]] option.
Line 68: Line 74:
 There are extended instructions for  using the file browser on the fckgLite [[http://www.mturner.org/fckgLite/doku.php/media|web site]].  See also [[http://www.mturner.org/fckgLite/doku.php/file_browser_install#using_fckeditor_userfiles|using_fckeditor_userfiles]] There are extended instructions for  using the file browser on the fckgLite [[http://www.mturner.org/fckgLite/doku.php/media|web site]].  See also [[http://www.mturner.org/fckgLite/doku.php/file_browser_install#using_fckeditor_userfiles|using_fckeditor_userfiles]]
  
-Many  problems can be solved by using the [[plugin:ckgedit:configuration#winstyle|winstyle configuration option]] or by using the [[#ckgdoku]] distribution described below.+Many  problems can be solved by using the [[plugin:ckgedit:configuration#winstyle|winstyle configuration option]].
  
 ==== ckgdoku ==== ==== ckgdoku ====
-[[plugin:ckgdoku]] is a version of ckgedit  which enables users to access Dokuwiki's native mediamanager and link wizard as well as the ckgedit filebrowser.  It requires dokuwiki version ''Elenor Of Tsort'' (2016-06-26) or later. +[[plugin:ckgdoku]] <del>is a version of ckgedit  which enables users to access Dokuwiki's native mediamanager and link wizard as well as the ckgedit filebrowser.  It requires dokuwiki version ''Elenor Of Tsort'' (2016-06-26) or later. 
 +</del> 
 +  * **Note:**  Ckgdoku is deprecated in favor of ckgedit, which now includes the ckgdoku functionality.
  
  
Line 83: Line 90:
  
 ==== Reverse Proxy ==== ==== Reverse Proxy ====
-When dokuwiki is behind a reverse proxy, the save button does not work out of the box. Solution: inside the dokuwiki configuration set the baseurl setting to the outside url. This fixes all "false" and other problems using this plugin. --Thanks to FrankIJskes (github.com)+When dokuwiki is behind a reverse proxy, the save button does not work out of the box. Solution: inside the dokuwiki configuration set the baseurl setting to the outside url. This fixes all "false" and other problems using this plugin.   See: https://github.com/turnermm/ckgedit/issues/335  --Thanks to FrankIJskes (github.com)
  
 =====Configuration and Set-up ===== =====Configuration and Set-up =====
Line 92: Line 99:
  
  
-=== Alternate Save Directory === +==== Alternate Save Directory ==== 
-If you set the [[:config:savedir|]] option to directory other than the default, there are two things that must be done: +In Windows systems, you may be able to use an alternate save directory without the following steps. But you should create the alternate directory relative to the wiki and use relative syntaxe.g. .''./../alternate-directory'', rather than using an absolute path. Additionally,ckgedit doesn't understand Windows drive syntax, i.e. C:\, D:\, etc. So, your alternate ''savedir'' on Windows servers must be on the same drive as your dokuwiki
-  - You must use the ''nix'' settingsthat is you cannot use the [[http://www.mturner.org/fckgLite/doku.php?id=configuration#conf_24|winstyle]] option if you are on a linux machine, and you must use the [[http://www.mturner.org/fckgLite/doku.php?id=configuration#conf_15|nix_style]] option if you are on a windows machine. +
-  The ''nix'' setup requires a set of symbolic links in fckeditor/userfiles which point to the media directory of the ''savedir'' directory.  The links should automatically be created when ckgedit is installed. If they are not correct, they must be changed.  You **must** make sure that the symbolic links point to your media directoryOn linux machine you use the ''ln -s'' command to make symbolic links:  +
-<code>  +
- ln -s /path/to/savedir/media file +
- ln -s /path/to/savedir/media image  +
- ln -s /path/to/savedir/media media +
-</code>+
  
-On Windows machines you can create links using ''mklink /D'' in the command window:  <code>mklink /D "C:\apache\htdocs\dokuwiki\lib\plugins\ckgedit\fckeditor\userfiles\image"  "C:\dokuwiki\data\media"</code> 
  
 +For any new save directory,and for Windows servers using the ''nix'' setting, follow the guidelines above in the [[#installation]] section. That is you must have ''image'' and ''file'' links in ''fckeditor/userfiles'' which point to the media directory. 
  
-For more information consult the fckgLite documentationhttp://www.mturner.org/fckgLite/doku.php?id=docs:auto_install&#background.+On Windows machines you can create links using ''mklink /D'' in the command window <code>mklink /D "C:\apache\htdocs\dokuwiki\lib\plugins\ckgedit\fckeditor\userfiles\image"  "C:\dokuwiki\data\media"</code>
  
  
-=== CKEditor Upgrades === +For these to work properly for images, you have to install one of more lenient ''.htaccess'' files in the media directory, which you will find in the ''fckeditor/userfiles'' directory.  The one called ''.htaccess/security'' will allow most images through.   
-The current distribution of ckgedit has been upgraded from CKEditor 4.5.7 to 4.7. It had previously been upgraded from 4.01 to 4.2.2 and then to 4.4.3 and 4.5.1.  +==== CKEditor Upgrades ==== 
 +The current distribution of ckgedit has been upgraded from CKEditor 4.10 to 4.11.4. It had previously been upgraded from 4.01 to 4.2.2 and then to 4.4.34.5.1 and 4. 
  
  
Line 139: Line 140:
  
 === Wrap Plugin === === Wrap Plugin ===
-As for the [[#tag_plugin|tag plugin]], there is also auto-recognition of the [[plugin:wrap]] plugin: if an active version of ''wrap'' is found, ckgedit will automatically add the ''wrap'' icon to the CKEditor toolbar.  The ckgedit plugin is fully compatible with the native Dokuwiki version.  The language files for this plugin are found in ''/ckgedit/ckeditor/plugins/wrap/lang'' If there is not a file for your language, you can add it to the Dokuwiki language files and ckgedit will use it.  However, you might want to look at the content and structure of the CKEditor's language files and create one for ckgedit. If you add a new language file, inclde it in ''wrap/lang'' and add its two character ISO code to the language setting of ''wrap.plugin.js''. You can also add missing entries to the CKEditor's language files.  In particular, three entries, exclusive to ckgedit, are missing from all but  two language files and should be added:+As for the [[#tag_plugin|tag plugin]], there is also auto-recognition of the [[plugin:wrap]] plugin: if an active version of ''wrap'' is found, ckgedit will automatically add the ''wrap'' icon to the CKEditor toolbar.  The ckgedit plugin is fully compatible with the native Dokuwiki version.  The language files for this plugin are found in ''/ckgedit/ckeditor/plugins/wrap/lang'' If there is not a file for your language, you can add it to the Dokuwiki language files and ckgedit will use it.  However, you might want to look at the content and structure of the CKEditor's language files and create one for ckgedit. If you add a new language file, include it in ''wrap/lang'' and add its two character ISO code to the language setting of ''wrap.plugin.js''. You can also add missing entries to the CKEditor's language files.  In particular, three entries, exclusive to ckgedit, are missing from all but  two language files and should be added:
           content: 'Content (optional):',           content: 'Content (optional):',
           boxes_title: 'Box types:',           boxes_title: 'Box types:',
Line 151: Line 152:
    ;#;    ;#;
 when loaded into the ckgeditor it becomes: when loaded into the ckgeditor it becomes:
-   divalNLine;#;centerdivalNLine;#; +   divalNLine;#;This is aligned center.divalNLine;#; 
-To achieve the same effect when editing in the ckgeditor, you prepend the divaling2 markup elements with the ''divaNLine'' macros, as above.+To achieve the same effect when editing in the ckgeditor, you prepend the divaling2 markup elements with the ''divaNLine'' macros, as above: ''divalNLine;#;'', ''divalNLine###'' etc
 === numbered headings === === numbered headings ===
-While the [[plugin:numberedheadings]] plugin conflicts with ckgedit, you can use CSS to achieve much the same effect. See [[tips:numbered_headings|tips:numbered_headings]].+While the [[plugin:numberedheadings]] plugin conflicts with ckgedit, you may be able use CSS to achieve much the same effect. See [[tips:numbered_headings|tips:numbered_headings]].
  
 ==== Multi-Line Plugins ==== ==== Multi-Line Plugins ====
Line 164: Line 165:
  
  
-This preserves the line-breaks. +This preserves the line-breaks.  Additional space is added below the opening tag and above the closing tag when in the  editor but these are removed when saved to the file. 
-     +      
-    +=== Example === 
 + 
 +    ~~MULTI_PLUGIN_OPEN~~ 
 +    <cli> 
 +    user@host:~/somedir $ ls # List current directory 
 +    conf      lang         README        screen.gif  ui 
 +    info.txt  manager.dat  renderer.php  syntax.php 
 +    user@host:~/somedir $ 
 +    </cli> 
 +    ~~MULTI_PLUGIN_CLOSE~~
  
 ===== Geshi example ===== ===== Geshi example =====
 ==== Geshi plugin ==== ==== Geshi plugin ====
 +=== Basic instructions ===
 Ckgedit includes a Geshi plugin in the CKEditor toolbar.  You can still create your Geshi blocks in the editor, as described [[:plugin:ckgedit:deprecated|separately]], but the Geshi tool is preferred.  To use the Geshi tool, you can either enter your text in the editor or in the Geshi tool's textbox. In the former case, you select the text and open the tool, the highlighted (selected) text will appear in the Geshi textbox.  In the latter case, you can either paste your text into the textbox or enter it from the keyboard.  If you enter from the keyboard, your text will be single-spaced.  To get single spacing in the editor, for a copy and paste, hold down the Shift key and hit Enter. Ckgedit includes a Geshi plugin in the CKEditor toolbar.  You can still create your Geshi blocks in the editor, as described [[:plugin:ckgedit:deprecated|separately]], but the Geshi tool is preferred.  To use the Geshi tool, you can either enter your text in the editor or in the Geshi tool's textbox. In the former case, you select the text and open the tool, the highlighted (selected) text will appear in the Geshi textbox.  In the latter case, you can either paste your text into the textbox or enter it from the keyboard.  If you enter from the keyboard, your text will be single-spaced.  To get single spacing in the editor, for a copy and paste, hold down the Shift key and hit Enter.
  
-**Video:** [[http://www.youtube.com/watch?v=hSl4SkPzq8o|demonstration video]]+**Video:** [[http://www.youtube.com/watch?v=hSl4SkPzq8o|demonstration video]].  **Please note:** The video was made before the updated geshi tool, which has improved features, but the basics are the same.   
 +=== Geshi CSS === 
 +The Geshi highlighting does not appear until you reload your page.  When you load the page back into the editor a basic level of highlighting will be applied to the snippet.  If you want a more complete highlighting effect in the editor, it might help to change the editor's css by using the [[:plugin:ckgedit:style_sheets#ckeditor_editor_css_tool|CKEditor editor CSS tool]], which you will find on the Admin page.  It comes with instructions and substitutes your template's css for the base css that is installed by default.  
  
 +Remember to clear your browser cache when changing these settings.
 +=== Syntax Highlighting ===
 +Current versions of ckgedit support [[:syntax_highlighting|syntax highlighting]].  The CKEditor cannot itself display the additional hightlighting features, so a work-around has been provided which enables these extra features to be displayed in the browser.  The Geshi tool has been upgraded to handle these extra features and to insert a C-stye comment into the Geshi block which contains the code needed for the extra highlighting.  The comment will appear only in the CKEditor and will be removed on saving the page.  For example:
 +<code JavaScript>
 +/* [enable_line_numbers="true",highlight_lines_extra="3"] */
 +var de = function() {
 +    return (typeof(window.de) == 'object') ? window.de : {};
 +}();
 +</code> 
 +For details on the extra highlighting features see the [[:syntax_highlighting#examples|]].
 ===== Adding CKEditor plugins to the toolbar ===== ===== Adding CKEditor plugins to the toolbar =====
  
Line 187: Line 209:
 =====  Font Styling ===== =====  Font Styling =====
 A completely revised description of the new font styling features is now on a [[:plugin:ckgedit:font_styling|separate page]]. ((Details for font styling in versions prior to Nov 2014 are found here: [[plugin:ckgedit:old_font_styling]])) A completely revised description of the new font styling features is now on a [[:plugin:ckgedit:font_styling|separate page]]. ((Details for font styling in versions prior to Nov 2014 are found here: [[plugin:ckgedit:old_font_styling]]))
-If you are using font styling with tables, you must turn on the [[plugin:ckgedit:configuration#complex_tables|complex tables parser]].+If you are using font styling with tables, you must turn on the [[plugin:ckgedit:configuration#complex_tables|complex tables parser]] ((This now the default)).
 ===== Footnotes ===== ===== Footnotes =====
 There is a footnote tool. But footnotes can still be created using the native Dokuwiki syntax, text enclosed in double parentheses:%%((%%footnote text here%%))%% .  There is a footnote tool. But footnotes can still be created using the native Dokuwiki syntax, text enclosed in double parentheses:%%((%%footnote text here%%))%% . 
Line 199: Line 221:
 After a file has been saved, footnotes are edited in place, in the endnotes area at the bottom of the editing window. If you are section editing, edit the section in which the note appears. The notes will appear at the bottom of the editing window and you can edit them in place. The same is true if you edit the entire page. After a file has been saved, footnotes are edited in place, in the endnotes area at the bottom of the editing window. If you are section editing, edit the section in which the note appears. The notes will appear at the bottom of the editing window and you can edit them in place. The same is true if you edit the entire page.
  
-To delete a footnote, you must delete the footnote both in the body of the text and in trh endnotes section at the bottom of the editing window.+To delete a footnote, you must delete the footnote both in the body of the text and in the endnotes section at the bottom of the editing window.
 ===== Nowiki, Code, and File Singletons ===== ===== Nowiki, Code, and File Singletons =====
 When %%<code>%%, %%<nowiki>%%, and %%<file>%% markup occur as singletons, i.e. without their closing tags, they will load into the CKEditor with spaces on either side of the tag-name: When %%<code>%%, %%<nowiki>%%, and %%<file>%% markup occur as singletons, i.e. without their closing tags, they will load into the CKEditor with spaces on either side of the tag-name:
Line 212: Line 234:
    <nowiki>%%</nowiki>    <nowiki>%%</nowiki>
 ===== HTML BLOCKS ===== ===== HTML BLOCKS =====
-**Note:** This feature requires that either Dokuwiki's ''htmlok'' option or ckgedit's ''htmlblock'' option be set to true.((See [[:plugin:ckgedit:configuration#htmlblock_ok]])) It is ''false'' by default.  +**Note:** This feature requires that either Dokuwiki's ''htmlok'' option or ckgedit's ''htmlblock_ok'' option be set to true.((See [[:plugin:ckgedit:configuration#htmlblock_ok]])) It is ''false'' by default.  
 Feature added 22 Apr 2015. Feature added 22 Apr 2015.
  
Line 223: Line 245:
  
 It could be useful, for instance, to save a complex table that does not parse correctly, despite use of the complex tables setting.  For instance: It could be useful, for instance, to save a complex table that does not parse correctly, despite use of the complex tables setting.  For instance:
-{{  http://mturner.org/userfiles/doku/complec_table_zpszpp3mcxc.png?375  }}+{{  https://i.imgur.com/ggfdxKS.png?375  }}
 When the html block is loaded back into the editor, it can be edited normally and re-saved with the changes. When the html block is loaded back into the editor, it can be edited normally and re-saved with the changes.
  
Line 238: Line 260:
 ~~CLOSE_HTML_BLOCK~~ ~~CLOSE_HTML_BLOCK~~
 </code> </code>
-In this case, when you reload the ckgeditor, you will see only the Start and Close macros, but the html will still be there, as you can see if you use the ''Source'' button.+In this case, when you reload the ckgeditor, you will see only the Start and Close macros, but the html will still be there, as you can see if you use the ''Source'' button. 
  
 When an HTML Block is processed by the ckgeditor and saved to the Doukwiki file, it is saved as a code block containing the HTML. When loaded back into the editor, the HTML is extracted from the code block and inserted back into the editor.  The HTML_BLOCK macros remain in place in the editor, but they do not show when the page is displayed in the browser. When an HTML Block is processed by the ckgeditor and saved to the Doukwiki file, it is saved as a code block containing the HTML. When loaded back into the editor, the HTML is extracted from the code block and inserted back into the editor.  The HTML_BLOCK macros remain in place in the editor, but they do not show when the page is displayed in the browser.
Line 266: Line 288:
 The toolbar is defined in ckeditor/config.js, which is a compressed file.  The uncompressed file is config.js.unc. Make your changes there and then you can compress the file using yuicompressor, which can be downloaded from [[https://github.com/yui/yuicompressor/releases|github]].  See also: [[http://yui.github.io/yuicompressor|yui compressor documentation]]. When re-compressed, rename the file ''config.js''.   The toolbar is defined in ckeditor/config.js, which is a compressed file.  The uncompressed file is config.js.unc. Make your changes there and then you can compress the file using yuicompressor, which can be downloaded from [[https://github.com/yui/yuicompressor/releases|github]].  See also: [[http://yui.github.io/yuicompressor|yui compressor documentation]]. When re-compressed, rename the file ''config.js''.  
  
- There are three toolbars and each can be changed.  The main Dokuwiki toolbar is ''config.toolbar_Dokuwiki''  Simply remove the toolbar items from the list.  For further information see the [[http://ckeditor.com/apps/ckeditor/4.4.0/samples/plugins/toolbar/toolbar.html|CKEditor toolbar page]].+There are three toolbars and each can be changed.  The main Dokuwiki toolbar is ''config.toolbar_Dokuwiki''  Tollbar items can be removed from the Dokuwiki Configuration Manager or by simply remove the toolbar items from the list.  
  
 === Adding Plugins === === Adding Plugins ===
 Additional plugins (or ''extra plugins'') can be added to the tool bar.  First, of course, you need a CKEditor plugin.  You add the plugin to the ckeditor/plugin directory and add its name to the [[plugin:ckgedit:configuration#extra_plugins|]]  Configuration option, this is the executable name defined in the plugin.  For additional instructions, see [[plugin:ckgedit:configuration#extra_plugins|]] and for how to write a CKEditor plugin, you can begin here: http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 Additional plugins (or ''extra plugins'') can be added to the tool bar.  First, of course, you need a CKEditor plugin.  You add the plugin to the ckeditor/plugin directory and add its name to the [[plugin:ckgedit:configuration#extra_plugins|]]  Configuration option, this is the executable name defined in the plugin.  For additional instructions, see [[plugin:ckgedit:configuration#extra_plugins|]] and for how to write a CKEditor plugin, you can begin here: http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
  
 +=== The Blockquote toolbar Button ===
 +The Blockquote button has recently been added to the standard toolbar. In the editor, its CSS is controlled by the additional.css file. ((See the [[#ckeditor_editor_css_tool|Ckeditor CSS Tool]] above.))  However for this to work in the browser you must install the [[plugin:blockquote]] plugin. 
 ===== Image Drag and Drop ===== ===== Image Drag and Drop =====
-In some browsers, images can be dragged into the editor from the desktop. +<del>In some browsers, images can be dragged into the editor from the desktop.</del> 
-See [[plugin:ckgedit:drag_and_drop]] +This is no longer available (see [[plugin:ckgedit:drag_and_drop]] for details).  Instead, see [[#copy_and_paste]] below.
-See below.  This is no longer available.+
  
 ===== Copy and Paste ===== ===== Copy and Paste =====
Line 281: Line 304:
 or   or  
   Turn supplementary image paste support off   Turn supplementary image paste support off
-The supplementary paste support enables image pastes in browsers which don't enable it natively, Chrome is one of these. In others, like Firefox, when the additional paste support is turned on two copies of the image are pasted into the editor window, one by the browser itself and the other by the supplementary paste support. Therefore in Firefox it should be turned off and in Chrome turned on. +The supplementary paste support enables image pastes in browsers which don't enable it natively, Chrome is one of these. In others, like Firefox, when the additional paste support is turned on two copies of the image are pasted into the editor window, one by the browser itself and the other by the supplementary paste support. Therefore in Firefox it should be turned off and in Chrome turned on.  It defaults to off
-  +==== Limitations and Workarounds ==== 
 +=== Copying === 
 +You may have to load the image into software which allows for the copying of image data, for instance Windows 10 ''Photos'' or any other image viewer.  With Firefox, but not with Chrome or Opera, it also possible to right click on an image and click on the copy option, which will load the image into the clipboard for inserting into the editing window.  With Chrome and Opera, you must still use an external software package like ''Photos''
 +=== Size === 
 +There is a limit to how much raw image data can be pasted directly into the editor.  The size of a jpeg image, in particular, is not the same as the raw image data because the image is compressed. A .png will give you a more accurate size in your desktop listings.  If you try to paste an image greater than 1MB into the editor, in Firefox it will be rejected with an information message.  In Chrome, however, the CKEditor facility which recognizes the size of image data does not work.  
 + 
 +It is possible to handle images of 2 - 2.5 MB in Firefox using the MS Word plugin.  Simply paste the image into the msword ''text'' window and click ''OK'' Sometimes a vertically large image will stretch the msword window beyond the bottom margin of the browser.  To get it back to the default size click the ''instructions'' tab.  Then without going back to the text tab, click ''OK''
 + 
 + 
 + 
 ==== Microsoft Office ==== ==== Microsoft Office ====
 Documents can be pasted from Office using Ctrl-V, but in complex cases, such as tables, [[#html_blocks|HTML blocks]] will be required. Documents can be pasted from Office using Ctrl-V, but in complex cases, such as tables, [[#html_blocks|HTML blocks]] will be required.
  
 +=== New Plugin ===
 +There is now a new plugin for inserting Office documents.  It strips out all but the basic DokuWiki syntax features.  The  CKEditor paste tools have been removed. The editor accepts plain text without the need for a special paste tool.
 ===== Smileys ===== ===== Smileys =====
 The Ckeditor comes with its own collection of smileys.  With ''ckgedit'' you have access to these and to Dokuwiki's smileys when you click on the smiley toolbar icon.  Dokuwiki has a protocol for adding your own smileys, using ''conf/smileys.local.conf'' and a local smileys directory ''lib/images/smileys/local''. (([[https://www.dokuwiki.org/Smileys]]))  Ckgedit understands this protocal and will give you access to these as well.   The Ckeditor comes with its own collection of smileys.  With ''ckgedit'' you have access to these and to Dokuwiki's smileys when you click on the smiley toolbar icon.  Dokuwiki has a protocol for adding your own smileys, using ''conf/smileys.local.conf'' and a local smileys directory ''lib/images/smileys/local''. (([[https://www.dokuwiki.org/Smileys]]))  Ckgedit understands this protocal and will give you access to these as well.  
Line 300: Line 335:
  
 To use relative links for both internal links and media links , the ckgedit relative links configuration option must be set to true. See: [[plugin:ckgedit:configuration#rel_links]]. To use relative links for both internal links and media links , the ckgedit relative links configuration option must be set to true. See: [[plugin:ckgedit:configuration#rel_links]].
- +===== RSS Feeds ===== 
 +You can enter the Dokuwiki RSS feed markup directly into ckgedit's editor.  It will be saved ''as is'' to the txt file. 
 +However, on being reloaded into ckgedit's editor, the markup will be "escaped", to prevent your text from being corrupted by the live feed.  This: 
 +    {{rss>http://slashdot.org/index.rss 5 author date 1h}} 
 +will become this: 
 +    { { rss>Feed:slashdot.org/index.rss 5 author date 1h}} 
 +On being saved it will revert to the original Dokuwiki markup. Secure ''https'' connections will become ''sFeed''.
 ===== Examples ===== ===== Examples =====
 For some examples of using plugins with ckgedit and of some other features, such as line spacing, see:  For some examples of using plugins with ckgedit and of some other features, such as line spacing, see: 
Line 307: Line 347:
      * [[http://web.archive.org/web/20160818092742/http://www.mturner.org/devel/doku.php?id=playground:examples|Or  the Wayback machine]]      * [[http://web.archive.org/web/20160818092742/http://www.mturner.org/devel/doku.php?id=playground:examples|Or  the Wayback machine]]
  
-===== Language Support =====+ 
 +===== Language Support, Localization =====
 ==== Filebrowser ==== ==== Filebrowser ====
  
Line 317: Line 358:
  
 ==== Plugins ==== ==== Plugins ====
-There are also several plugins which have been written for ckgedit, such as the Font Assist plugin described above.  The language template for these is also ckgedit/ckeditor/lang/en.js.ckgedit and these are handled exactly as the filebrowser entries, for instance: +There are also several plugins which have been written for ckgedit.  Language support for these plugins fall into two formats the older style inherited from CKEDitor 3 and the current style.  
 + 
 +=== Older Style == 
 +The plugins using this style are: fontassist, footnote, and signature. The language template for these is also ckgedit/ckeditor/lang/en.js.ckgedit and these are handled exactly as the filebrowser entries, for instance: 
   *  ''CKEDITOR.lang['<your_language_code>']['fontassist'] = {}''   *  ''CKEDITOR.lang['<your_language_code>']['fontassist'] = {}''
 +
 +=== Current Style ===
 +This style is used by wrap, headerbuttons, tags, truetype, msword, and geshi and will continue to be used for any new plugins.
 +
 +In the plugin directory for these you will find a ''lang'' subdirectory with a language file for each of the supported languages.  To add support for your language, you create a file named for your ISO code and use the English file (''en.js'') as your model.  Then in the plugin's ''plugin.js'' file, you add your ISO code to the list of languages supported.  At the top of the file you will find an entry that looks like this:
 +<file>
 +CKEDITOR.plugins.add( 'headerbuttons', {
 +        lang: 'en,de',
 +</file>
 +Add your ISO code and a comma, e.g.: 'en,de', ''my'',
    
  
 ===== Compression ===== ===== Compression =====
-The ''.unc'' extension stands for "uncompressed" You can, however, compress these files using the [[https://github.com/yui/yuicompressor/releases|yuicompressor]].  The basic documentation is found at: https://github.com/yui/yuicompressor#global-options. For linux users, you can downlload a convenience script for compression: ** [[./ckgedit:compress.sh|any_cmpr]] **+The ''.unc'' extension stands for "uncompressed" You can, however, compress these files using the [[https://github.com/yui/yuicompressor/releases|yuicompressor]].  The basic documentation is found at: https://github.com/yui/yuicompressor#global-options. For linux users, you can download a convenience script for compression: ** [[./ckgedit:compress.sh|any_cmpr]] **
  
 ===== Editor Window Height ===== ===== Editor Window Height =====
 The height of the editor window can be set by entering a new value in the ''Editor Height'' text box.   The height of the editor window can be set by entering a new value in the ''Editor Height'' text box.  
-{{ http://mturner.org/userfiles/doku/editor_height_zpsjd266x7a.png  }}+{{ http://mturner.org/userfiles/doku/editor_height_zpsjd266x7a.png?475  }}
 The new  height will take effect when the editor is reloaded.  The value is set in pixels and the default value is 250 pixels.   The new  height will take effect when the editor is reloaded.  The value is set in pixels and the default value is 250 pixels.  
  
 +===== Style Sheets for the CKEditor editing window =====
 +Ckgedit comes with a default css scipt for the editing window.  This is based on the css for the dokuwiki template; it is a compressed file found in ''ckgedit/ckeditor'' and is named ''contents.css''  The uncompressed file is ''contents.css.unc'' (see [[#compression]] above). 
 +==== CKEditor editor CSS tool ====
 +
 +If you would like the styling of the editing window to match that of your template, you can create a template-specific css file that will be used instead of contents.css.  There is a tool for this that you can access from the ''Admin'' page: **CKEditor editor CSS tool**.  This tool will create the style sheet and copy it to the appropriate folders.  The instructions for using this tool are found in the tool itself as well as [[plugin:ckgedit:style_sheets|here]] at dokuwiki.org.  To activate the style sheet you must set the [[plugin:ckgedit:configuration#style_sheet|style_sheet]] option to true. 
 +=== additional.css ===
  
 +To make modifications to your css, you can add rules to a file named ''additional.css'' There are copies of this file in ckgedit/ckeditor ckgedit/ckeditor/css.  The first applies modifications to contents.css, the second to css/_style.css which is the file created by the CSS tool. If the rules in this file are meant to override contents.css and _style,css, you should mark them ''!important''.
 ===== Short-cut keys ===== ===== Short-cut keys =====
  
    
  
-| CTRL + I |italic| +| CTRL + I   | italic                          
-| CTRL + B |bold|  +| CTRL + B   | bold                            
-| CTRL  + U |underline| +| CTRL  + U  | underline                       
-| CTRL + Z |undo| +| CTRL + Z   | undo                            
-| CTRL + Y  |redo| +| CTRL + Y   | redo                            
-| CTRL + L |link| +| CTRL + L   | link                            
-| ALT + -   |numbered list| +| ALT + -    | numbered list                   
-| ALT + 8  |bulleted list| +| ALT + 8    | bulleted list                   
-| ALT + * |bulleted list| +| ALT + *    | bulleted list                   
-| ALT + m |code|+| ALT + m    | code                            | 
 +| CTRL+Q     | close editor and save document  |
  
 The short-cut keys for inserting headers were changed form ALT+n to CTRL+n on 8/30/2013 in order to avoid conflicts with keyboards that use AltGR. The short-cut keys for inserting headers were changed form ALT+n to CTRL+n on 8/30/2013 in order to avoid conflicts with keyboards that use AltGR.
Line 358: Line 420:
 With this method, the user clicks in the browser and the Dokuwiki Editor opens, loading the section of the page beneath the mouse pointer, just as it would if the section edit button were clicked.  This feature is governed by the [[plugin:ckgedit:configuration#dw_edit_display]] configuration option.  This method of accessing the Dokuwiki editor will work when either the CKEditor or the Dokuwiki editor is in effect. With this method, the user clicks in the browser and the Dokuwiki Editor opens, loading the section of the page beneath the mouse pointer, just as it would if the section edit button were clicked.  This feature is governed by the [[plugin:ckgedit:configuration#dw_edit_display]] configuration option.  This method of accessing the Dokuwiki editor will work when either the CKEditor or the Dokuwiki editor is in effect.
  
-You may initially have to clear both the browser cache and your Dokuwiki cache. See: [[devel:caching]]. +You may initially have to clear both the browser cache and your Dokuwiki cache. See: [[devel:caching]]. 
 If you do not want this feature, you can turn it off in the Configuration Manager. If you do not want this feature, you can turn it off in the Configuration Manager.
  
 ==== Page Tools Method ==== ==== Page Tools Method ====
-There is a small plugin that gives immediate direct access to the Dokuwiki editor from the Dokuwiki template's ''page tools'' menu.  It can be installed from the Extension Manager using the following url: [[https://github.com/turnermm/dwedit/tarball/master|]]. For users of the default Dokuwiki template this adds a ''DW Edit'' button to the page tools series at the right of the template.  If not using the Dokuwiki templateyou can add a ''DW Edit'' link to your template using the following code placed in a php block+The [[plugin:dwedit]] plugin is a small plugin that gives immediate direct access to the Dokuwiki editor from the Dokuwiki template's ''page tools'' menu.  For users of the default Dokuwiki template and templates based on it, the [[plugin:dwedit]] plugin adds a ''DW Edit'' button to the page tools series at the right of the template.  Like the deouble click methodthis method is also governed by the [[plugin:ckgedit:configuration#dw_edit_display]] configuration option. 
-     tpl_toolsevent('dweditlink', array()); + 
- + 
            
 ===== Dokuwiki Entities with left-hand angle brackets ===== ===== Dokuwiki Entities with left-hand angle brackets =====
Line 372: Line 434:
 See more examples [[http://www.mturner.org/devel/doku.php?id=playground:entities|here]]. See more examples [[http://www.mturner.org/devel/doku.php?id=playground:entities|here]].
 ===== Farms ===== ===== Farms =====
-There is [[https://github.com/turnermm/ckgedit/archive/farms_4.7b.zip|branch]] of ckgedit which accommodates farm installations.  For how-to set up farms, first read the documents on farms:  the basic document is at [[farms]]  +Up until November 28 2017, farms required separate distribution Since that date, however, the ckgedit standard distribution handles both farm and non-farm setups.  For how-to set up farms, first read the documents on farms:  the basic document is at [[farms]]more detail can be found at [[tips:redirect_farm]].  Ckgedit  handles both the virtual host and ''.htaccess'' farm techniques. There is also a version that enables the Dokuwiki media manager and link wizard.  See [[#available_versions_of_ckgedit|versions]] below and the comments on [[#ckgdoku]] above. 
-and more detail can be found at [[tips:redirect_farm]].  The ckgedit [[https://github.com/turnermm/ckgedit/archive/farms_4.7b.zip|farm branch]] handles both the virtual host and ''.htaccess'' farm techniques. There is also a version that enables the Dokuwiki media manager and link wizard.  See [[#available_versions_of_ckgedit|versions]] below and the comments on [[#ckgdoku]] above. +
  
  
Line 430: Line 491:
 ''example_org_directory'' is the document root of the virtual host server. ''example.org'' is the domain, and the animals are the subdomains and have the same document root as ''example.org'' See [[tips:redirect_farm#method_2_using_virtual_hosts|using virtual hosts]]. ''example_org_directory'' is the document root of the virtual host server. ''example.org'' is the domain, and the animals are the subdomains and have the same document root as ''example.org'' See [[tips:redirect_farm#method_2_using_virtual_hosts|using virtual hosts]].
 ==== Using the farmer plugin ==== ==== Using the farmer plugin ====
-The [[plugin:farmer|farmer plugin]] can be used with [[plugin:ckgdoku|ckgdoku]] by following the instructions in this forum post: https://forum.dokuwiki.org/post/56738+<del>The [[plugin:farmer|farmer plugin]] can be used with [[plugin:ckgdoku|ckgdoku]] by following the instructions in this forum post: https://forum.dokuwiki.org/post/56738 
 +</del>
  
 +ckgdoku is no longer supported; its functionality has been integrated into ckgedit.  
 ===== Video Clips ===== ===== Video Clips =====
 You can view various demonstrations on YouTube of how to use ckgedit:\\ You can view various demonstrations on YouTube of how to use ckgedit:\\
Line 441: Line 504:
  
  
-===== Available Versions of ckgedit ===== +
-^  Distribution                                                                                  ^  Features                                                                                                                          ^  Docs                                                                                                                                                  ^ +
-| [[https://github.com/turnermm/ckgedit/archive/master.zip|ckgedit]]                              | Current distribution (at CKEditor 4.7)                                                                                             | Accessible from Extension Manager and this page. For image drag and drop in FireFox see: [[/plugin:ckgedit:drag_and_drop]]                             | +
-| [[http://sourceforge.net/projects/fckglite/files/ckedit/pre_php_5.3.tgz/download|pre-php5.3]]  | alternate action/edit.php for versions of php earlier than PHP 5.3                                                                 | No longer being kept up to date. Test for usability                                                                                                    | +
-|     Farms            | Current distribution                                                                                                                              |                                                                                                                              | +
-| [[https://github.com/turnermm/ckgdoku/archive/master.zip|ckgdoku]]                             | Includes support for Dokuwiki's mediamanager and  linkwiz as well as for ckgedit's own filebrowser.  See also [[:plugin:ckgdoku]]  | This is a separate distribution, but it is kept fully up-to-date with ckgedit.  **Note:** requires dokuwiki ''Elenor Of Tsort'' (2016-06-26) or later. Supports farms.  |+
  
 ===== Discussion =====  ===== Discussion ===== 
Line 471: Line 529:
 [[plugin:ckgedit:discussion_3]] [[plugin:ckgedit:discussion_3]]
   - Unwanted code replacement    - Unwanted code replacement 
-  - blank page while click "Broswe Server" button in image properties popup+  - blank page while click "Browse Server" button in image properties popup
   - ckgedit for monobook and vector templates (skins)    - ckgedit for monobook and vector templates (skins) 
   - Importing Documents   - Importing Documents
plugin/ckgedit.1513012774.txt.gz · Last modified: 2017-12-11 18:19 by turnermm

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki