====== Wysiwyg nicedit plugin ======

---- plugin ----
description: Wysiwyg-type editor adaptation for DokuWiki
author     : Paul
email      : 
type       : syntax
lastupdate : 2008-06-28
compatible : 
depends    : No Perl required!
conflicts  : 
similar    : dokuwikifck, fckw, grensladawritezor, wysiwyg
tags       : fck, wysiwyg, markup, style, editor
----

====== General description ======


This is a preliminary version of the NicEdit's ([[http://nicedit.com/]]) integration for DokuWiki. One feature of this module is that
it has no Perl dependency at all.
NicEdit is a nice, little editor, which is highly customizable, and has many features that are supported by DokuWiki. Check the demos 
page at [[http://nicedit.com/demos.php]].
Please note that the work on integration is still going on. __**You may join the discussion at:**__ http://forum.dokuwiki.org/thread/2230

====== How does it work with Dokuwiki? ======

The scheme is the following:
When a page is loaded for editing in Dokuwiki, NicEdit (see the code below in ''html.php''), which is written in javascript, is started. It overlays the Dokuwiki editing window (textarea), and captures the text that was passed from Dokuwiki. Inside NicEdit, an event is fired to convert text (which is in Dokuwiki markup) into html. This is where conversion from Dokuwiki to html takes place. After conversion, the user can edit the page. After pressing the Preview or Save button, an event is fired to convert from html to Dokuwiki markup, and the proper routine inside NicEdit is executed to write the converted text back into the textarea of the editing page. This text is passed back to the DokuWiki's server-side php script, etc.

NicEdit includes a button (''XHTML button'') that allows the user to edit the page in the original Dokuwiki markup, that is, to edit the source. This feature makes it possible to correct any issues one may have with improper styles and markup when editing in the wysiwyg mode.

====== What features are working now? ======

  * bold + button
  * italic + button
  * underline + button
  * monospaced (no button assigned at the moment)
  * strike-through + button
  * subscript + button
  * superscript + button
  * headings + button
  * ordered list + button
  * unordered list + button
  * general key shortcuts - copy, paste, cut, undo, redo

====== Known issues ======

  - problems with complex ordered and unordered lists in certain cases
  - problems with creating ordered and unordered lists in IE7 (still, they can be created via Dokuwiki markup by pressing XHTML button)
  - there are some buttons that are not actually working with Dokuwiki (like alignment etc), which I was lazy to delete from the code yet :-D
  - dokuwiki tags that are enclosed in <> are not parsed correctly yet


====== Integration ======

===== Short description of mods =====

  - NicEdit files to be uploaded:
    - __nicEdit.js__ goes into the __nicedit__ folder in the root Dokuwiki folder
    - __nicEditorIcons.gif__ goes into the root Dokuwiki folder
  - Dokuwiki files to be modified: /inc/form.php, /inc/html.php.


===== NicEdit files =====

  - Download them at Easyshare: [[http://w17.easy-share.com/1700757350.html]] or <del>[[http://wikisend.com/download/519564/nicedit.rar]]</del> -> Not Found
  - Unpack and upload two files to their appropriate places, as described above. 


===== Changes in /inc/form.php: =====

<code>
function form_makeWikiText($text, $attrs=array()) {
  $elem = array('_elem'=>'wikitext', '_text'=>$text,
                'class'=>'edit', 'style'=>'width: 920px; height: 450px;');
//                'class'=>'edit', 'cols'=>'80', 'rows'=>'10');

  return array_merge($elem, $attrs);
}
</code>
i.e., replace '' 'cols'=>'80', 'rows'=>'10'); '' with  '' 'style'=>'width: 920px; height: 450px;'); ''

===== Changes in /inc/html.php: =====

Right before '' <div style="width:99%;"> '' insert the following piece of code: 
<code>
<script src="<?php echo DOKU_BASE?>nicedit/nicEdit.js" type="text/javascript"></script>
<script type="text/javascript">
var myNicEditor;
bkLib.onDomLoaded(
	function() {
		myNicEditor =	new nicEditor({ bbCode:true, fullPanel : true}).panelInstance('wiki__text');
			});
</script>

<script type="text/javascript">
function update_this() {
myNicEditor.instanceById('wiki__text').saveContent();

}
</script>
</code>

\\
After that, replace 

<code>$form->addElement(form_makeButton('submit', 'preview', $lang['btn_preview'], array('id'=>'edbtn__preview', 'accesskey'=>'p', 'tabindex'=>'5')));</code>


with

<code>$form->addElement(form_makeButton('submit', 'preview', $lang['btn_preview'], array('id'=>'edbtn__preview', 'accesskey'=>'p', 'tabindex'=>'5', 'onclick'=>'update_this()')));</code>





======Discussion:======
I did not succeed with installation following the instructions above. As result the original Dokuwiki editor is displayed above the the nicEdit. From nicEdit I can not see any icon except the fields for selecting fonts attributes: "Font Size", "Font Family", "Font Format".

> Same with my test-installation (Sebastian)

Just move the icon-file into nicedit (I like it clean) and replace the iconpath in nicEdit.js with
<code>iconsPath : 'nicedit/nicEditorIcons.gif',</code>

Good luck
Dirk

----

Note from the author:

Hi all,

first of all, thanks for a bit of editing of this page :-)
As concerns the problem with icons, you should either place the file nicEditorIcons.gif in the root folder of Dokuwiki, or place it in the folder of NicEdit and do the editing suggested by Dirk.

Paul.
----