This is an old revision of the document!
Table of Contents
dawritezor, wysiwyg tags : editing, wysiwyg
See below for a self-contained_plugin
sible to correct any issues one may have with improper styles and markup when editing in the WYSIWYG mode.
What features are working now?
ent)
- 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
- 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→ Not working anymore. orhttp://wikisend.com/download/519564/nicedit.rar→ 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 their Website you can download the Packet (check the bbCode PLUGIN9
Changes in /inc/form.php:
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); }
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:
<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>
After that, replace
$form->addElement(form_makeButton('submit', 'preview', $lang['btn_preview'], array('id'=>'edbtn__preview', 'accesskey'=>'p', 'tabindex'=>'5')));
with
$form->addElement(form_makeButton('submit', 'preview', $lang['btn_preview'], array('id'=>'edbtn__preview', 'accesskey'=>'p', 'tabindex'=>'5', 'onclick'=>'update_this()')));
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
iconsPath : 'nicedit/nicEditorIcons.gif',
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
- nicEdit Version 0.9 r23 released January 4th, 2009
- translate wiki↔xhtml through bbCode mode
- works with a plugin color
(Bug in NicEdit “not translation bbCode→html at start” is fixed.)
- The button for switching of tool bars is added):
(from dokuwiki-2009-02-14.tgz)
For example (html.php):
... 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> ...
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 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 (:
— 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