====== WYSIWYG nicedit plugin ======

---- plugin ----
description: WYSIWYG-type editor adaptation for DokuWiki
author     : Pauld
email      : 
type       : syntax
lastupdate : 2008-06-28
compatible : 
depends    : No Perl required!
conflicts  : 
similar    : fckg, fckw, grensladawritezor, wysiwyg
tags       : !obsolete, editing, wysiwyg
----

:!: See below for a [[#self-contained_plugin]]

====== 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: <del>[[http://w17.easy-share.com/1700757350.html]]</del> -> Not working anymore. or <del>[[http://wikisend.com/download/519564/nicedit.rar]]</del> -> Not Found
  - Unpack and upload two files to their appropriate places, as described above. 

**These download Links do not work. Anyone might know another location to download the code ?** regards, Lukas
@Lukas: At [[http://nicedit.com/|their Website]] you can download the Packet (check the bbCode PLUGIN9).
===== 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;'); ''


This might look awkward with some templates and resolutions creating a side scrolling bar, instead Boots (usemasper) suggests :
i.e., replace '' 'cols'=>'80', 'rows'=>'10'); '' with  '' 'style'=>'width: 100%; height: 450px;'); ''

also Boots suggests finding the line in nicedit/nicEdit.js starting with:
var nicEditorIFrameInstance=nicEditorInstance.extend
and changing the width in ...({overflow:"hidden",width:"100%",border...
to a fixed amount (770px was perfect for me)

===== 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 couldn't make it come alive... and I think cache is getting in the way too because I've played cutting and pasting icon.gif everywhere and then pasting it in dokuwiki/ and /nicedit/ at the same time (just in case, I was so numb at that moment...) but I JUST CAN'T MAKE IT WORK :( :(

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)
> Same for my (Sammy)

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.
----
Mmmm,
I tried both ways but still having the same phenomenon and the nicEdit toolbar won't appear except for "Font Size" box etc... What else could I possibly do.....? I'm currently using monobook template but it didn't work in default template anyway. It'll be really nice if it works.....(Yz)

----
It OK design in Edit but not work when I preview it , Example it show 
       <span style=“font-size:x-large;”>jg<span style=“background-color:rgb(153,51,153);”>jgj</span></span>

----
I tried it to install and followed the tips from here but I also get BOTH icon bars now. The original DokuWiki AND the NicEdit Bar.
----
Hi all,

==I want to show their own versions, can be whomever be useful==

[[http://ianka.ru/nicEdit.rar|nicEdit.js]]

  * nicEdit Version 0.9 r23 released January 4th, 2009
  * translate wiki<->xhtml through bbCode mode
  * works with a plugin [[plugin:color|color]]
  (Bug in NicEdit "not translation bbCode->html at start" is fixed.)



[[http://ianka.ru/html.7z|html.php]]

  * The button for switching of tool bars is added):
  (from dokuwiki-2009-02-14.tgz)



For example (html.php):
<code>

... line 1173
?><div style="width:99%;">
<script src="<?php echo DOKU_BASE?>nicedit/nicEdit.js" type="text/javascript"></script>
<script type="text/javascript">

var myNicEditor;
bkLib.onDomLoaded(function() { toggleArea(); });

function update_this() {
if(myNicEditor) { myNicEditor.instanceById('wiki__text').saveContent();	}
			}
function toggleArea() {
	if(!myNicEditor) {
		myNicEditor = new nicEditor({ bbCode:true, fullPanel : true}).panelInstance('wiki__text',{hasPanel : true});
		document.getElementById("tool__bar").style.display = 'none';
		document.getElementById("draft__status").style.display = 'none';
	} else {
		myNicEditor.removeInstance('wiki__text');
		myNicEditor = null;
		document.getElementById("tool__bar").style.display = 'block';
		document.getElementById("draft__status").style.display = 'block';
	}
}
</script>

   <div class="toolbar">
	<button onClick="toggleArea();">On/Off nicEdit Panel</button>

      <div id="draft__status"><?php if(!empty($INFO['draft'])) echo $lang['draftdate'].' '.strftime($conf['dformat']);?></div>
      <div id="tool__bar"><?php if($wr){?><a href="<?php echo DOKU_BASE?>lib/exe/mediamanager.php?ns=<?php echo $INFO['namespace']?>"
      target="_blank"><?php echo $lang['mediaselect'] ?></a><?php }?></div>
...
</code>

excuse me for my English=),
Ianka

----
Hi all,

I tried the nicEdit.js from Ianka, but there are problems with //<color text/background>xxx</color>// tag. In the first step, the WYSIWYG show the color styles, but after saving or shown preview the style disappeared. Is there someone having a solution?

Folker

----
Hi all,

I also tried to use the Ianka files, (I used the default form.php from dokuwiki) but it cannot make a newline just pressing enter. I have always to imput the two backslashes. Is this normal?
Thans to all,

Tubia87

----

Tried all options, but this plugin won't work form me, perhaps if there is a stable version. But as for now, it's far from usefull, with all the errors concerning the conversion (no enters, strange adding of markup, etc). Though the idea, and the looks of it are great, i would really have loved it, if the conversion worked..

Theo

===== Self-contained Plugin =====
Hello everybody,

I just tried to put everything explained on this page together in a [[http://shtrom.ssji.net/plugin-nicedit.tgz|self-contained plugin]] that the plugin manager can directly install. It doesn't introduce any feature (it replaces the XHTML icon with a DokuWiki icon for coherence, though) , and may break some. I've tested it on my installation, and I didn't display any obvious behavioral difference with the manual installation. Please, feel free to adapt it (:

 --- //[[shtrom-doku@ssji.net|Olivier Mehani]] 2009/08/19 17:44//

==== Discussion ====
Hi Oliver,

I installed your self-contained plugin. Everything works fine until I save a page. Somehow, translating nicedit code back to wiki markup seems not to work as it should. I get something like this as actual content

''======<span style=“font-size:xx-large;”><span face=“arial”>Page title</span></span>======''

Any idea why this is happening?

Adrian