Feedback on NatEditContrib

-- MichaelDaum - 03 Apr 2007

Thanks Micha for externalizing this this editor from the NatSkin and for contributing it to the TWikiCommunity! And thanks Trivadis AG for sponsoring the consulting work.

-- PeterThoeny - 03 Apr 2007

It might be helpful for evaluators to see a screenshot in the contrib topic.

-- PeterThoeny - 03 Apr 2007

I tagged the topic. Please help make this contrib discoverable by tagging the contrib topic.

I also added the package form to the contrib topic. Micha, please fix form content as needed.

-- PeterThoeny - 03 Apr 2007

Thanks, Peter for the cleanup and adding the bits of infrastructure.

Problem with tagging is that once I logged in the tag interface is gone (no more Tags: selectbox +, create new tag).

-- MichaelDaum - 04 Apr 2007

I had that happen too - turned out my user topic set the skin to pattern, over-riding the mixin skins

-- SvenDowideit - 04 Apr 2007

How is the speed on IE? How does this editor compare to SmartEditAddOn?

-- PeterThoeny - 04 Apr 2007

SmartEditAddOn did not work for me in konqueror and safari. I needed something even more simple, yet functional.

-- MichaelDaum - 05 Apr 2007

I installed this immediately, it is beautiful :). I especially like the automatic edit box sizing. Great work!

-- MikkoLaakso - 05 Apr 2007

Feature	NatEditContrib	SmartEditAddOn
Automatic edit-area resizing	X	-
Buttons for basic text operations	X (except bullets)	X
Customizable string insert (variables, date, etc)	-	X
IE compatible	X	-
Other browsers compatible	Firefox, Konqueror, Safari, ...	Firefox only
Search-and-select	-	X
Editing of existing templates required	No	Yes

Please fill in any missing features and details.

Maybe the only thing I miss in NatEditContrib is the search feature. It was so easy to search and replace with SmartEditAddOn, necessary e.g. if you wrote a word incorrectly 20 times and you need to fix it quickly.

Does this contrib provide syntax highlighting (as in the screenshot)? In my current installation (4.0.5) no highlighting is ever performed.

-- MikkoLaakso - 05 Apr 2007

The screenshot was taken using konqueror which has spell checking and search+replace build in.

-- MichaelDaum - 06 Apr 2007

Great work Micha. I first used that new editor a few weeks back when I updated to the newest NatSkin. IMHO this is a must have on every TWiki installation. We should really consider making it part of the main distribution as it's the kind of extension that makes you "wooaw" when first editing a topic. It would greatly improve users' first impression.

-- StephaneLenclud - 07 Apr 2007

Sounds very promising; I have not yet tried it out. Yes, if there are no big issues we should make this part of the TWiki distribution. PreInstallSmartEditAddOn was a non-starter due to the performance issues on IE.

-- PeterThoeny - 08 Apr 2007

I just tried it.

If I edit a topic with Internet Explorer the browser hangs forever and has to be killed through the task manager.

It works in Firefox with some glitches. The abandon button has no visible function as far as I can see the the graphics attaching is a bit over complicated compared to just put the image URL straight into the topic.

The most complex of the normal editing functions - making tables - is not addressed by this contrib. That does not make it a bad contrib but it is something I would like to see if this is to be a standard TWiki component. Tables are still to much of a pain in TWiki. I also miss bullets as stated above in the table.

-- KennethLavrsen - 08 Apr 2007

I haven't tried NatEditContrib itself just using it through NatSkin. In my configuration it works fine with IE, FF and Opera.

-- StephaneLenclud - 08 Apr 2007

I tried it out, overall a good editing experience. Some feedback:

• When I have the cursor on a line of text and press the H1 button I expect that the current line changes to H1. It is a bit surprising to have a new line opened with an H1 and highlighted default text.
• I think <center> is not valid XHTML. Better to use a style.
• I miss the button for monospaced text.
• <verbatim> text is mainly used for multiple lines, so possibly show the opening tag, the highlighted text and the closing tag on one line each. And with leading whitespace preserved so that this works properly in bullets.
• For signature, possibly use default sig, e.g. no monospaced dash-dash.
• The undo button (aka "abandon changes") does not revert the text. Can be done with a new timestamp.
• For "undo", it would be nice if there is a JavaScript confirmation dialog box before taking the action. Same for "cancel".
• Alt-S does not save the topic (possibly a checkpoint save operation?)
• I find the save buttons a bit confusing:
  • The checkpoint save is a floppy disk, e.g. looks like a regular save.
  • The regular save is a "Done" label. Possibly use a special colored (and/or bigger) icon with a floppy disk (to draw attention for the default action).
  • It looks unbalanced to have some picture buttons and some text buttons. Possibly use icons instead of text for all.
• On FF, the help butten opens up a new tab. Possibly better a popup as done in classic skin and pattern skin.
• For consistency, it would be nice to use Arthur's standard icons & create new ones where needed.
• As mentioned above, it would be nice to have support for numbered and regular bullets, with indent change. Left indent of top level bullet could change text into normal paragraph.
• As mentioned above, it would be nice to have the save buttons at the bottom, below the form.

-- PeterThoeny - 09 Apr 2007

This editor works fine for me on IE 6.0.2900.2180 on Win XP, also with content of http://merlin.lavrsen.dk/twiki/bin/view/Myweb/WebHome copied to my local install.

-- PeterThoeny - 09 Apr 2007

• Never seen a table making button in such an editor before. Seems to be a fairly complex task to address. NatEditContrib already have 2 or 3 times as much buttons as the WikiMedia editor.
• You already have the ignore wiki formatting for monospace. Maybe we should call it code as seen on some forums and wikis ?
• alt+S does checkpoint save, alt+D does save and close (Done), maybe we should make configurable too.

IMHO we should make it configurable to make everyone happy, thinking of the following features:

• Button image
• Button position: above or below text and an index for the ordering
• Button visibility
• Access keys
• Even make it possible for administrator to add new buttons to support their favourite plugin or TML syntax. Thus you could add a monospace button that does =selection= without changing the contrib code.

So we could have something like:

   * Set BUTTON1 = <name>, <position>, <index>, <alt>, <access key>, <image>, <action>
   * Set SEPARATOR = <position>, <index>

Where action is either some predefined value like: save, done. Or some string defining the output of the command i.e. =selection=.

For example:

   * Set BUTTON1 = save, below, 0, %MAKETEXT{"Monospace"}%, S, monospace.png, =selection=
   * Set SEPARATOR = below, 1
   * Set BUTTON2 = save, below, 2, %MAKETEXT{"Save"}%, S, save.png, done

Ok Micha just in case you were getting bored we've got plans for you Just tell us if you want us to get our hands dirty.

-- StephaneLenclud - 10 Apr 2007

Guys, real great feedback. And I like most of the proposed improvements. One thing that has not been mentioned but will probably get away with the feature request to add a second save button at the bottom of the edit area is to get away with scrolling all together. That is, I want all to fit in one window and put those things that are currently below the textarea (help, form, ...) in separate tabs. This means that you get three tabs on a normal edit: Text, Form, Help and only two for editing using ?action=text or ?action=form. The toolbar will be inside the tab, so that you get the full scale of buttonts on the text tab and a limited one in the form tab and the help tab. They will always be visible and thus there's no need to have them twice.

One really awkward thing is that the "Add form" button must be at the same place in the GUI where the formfields will be put. That has been separated in NatSkin with the help of some more javascript and perl code. But frankly this can be done easier if TWiki supported that right away ... which it does not atm.

-- MichaelDaum - 10 Apr 2007

I really like this editor. It makes learning TML so much easier.

In the beginning I coudn't remember the TML for lists and the meaning of some buttons were unclear to me. So I made some changes concerning the buttons and added a bit javascript to have a working bullet list button.

I'm not a coder so the code might not be perfect...

add this to edit.js

function natEditTypewriterButtonAction() {
  natInsertTags('=', '=', 'monospace');
}
function natEditBulletButtonAction() {
  natInsertTags('\n   * ','\n','bullet list');
}
function natEditNumberButtonAction() {
  natInsertTags('\n   1 ','\n','numbered list');
}

and this to edittoolbar.natedit.tmpl right under

%TMPL:DEF{"paragraphtools"}%<span class="natEditParagraphTools"><!--


--><a class="natEditNumberButton" accesskey="o" href="javascript:natEditNumberButtonAction()"><!--
--><img src="%PUBURLPATH%/%TWIKIWEB%/NatSkin/button_numberedlist.png" alt='numbered list' title='numbered list'/></a><!--
--><a class="natEditBulletButton" accesskey="l" href="javascript:natEditBulletButtonAction();"><!--
--><img src="%PUBURLPATH%/%TWIKIWEB%/NatSkin/button_bulletlist.png" alt='bullet list' title='bullet list'/></a><!--

afterwards upload the new buttons to .../twiki/pub/TWiki/NatSkin/

...anyway here's a screenshot of my customisations. I also uploaded some of the buttons I've changed.

• edit_buttons.png:
  

-- CarloSchulz - 10 Apr 2007

Hi Carlo,

• "kut" is the Dutch word for cunt. So the order of the buttons is quite unlucky.
• The save and cancel buttons are too close - there should be a clear spacing.
• Using BehaviourContrib the js could be cleaner: no need to put javascript inside the link tags.

-- ArthurClemens - 10 Apr 2007

• hehe, it took me a while to understand the "kut" thing.
  • the sequence FKU is used by the german ms word as well, that might explain the order of the buttons.
  • so it should be b, i, and u for the english speaking
• the code snippets above are copied 1:1 from the original NatSkin package (including the javascript). I've just copied the code and replaced some some characters and the names of the buttons. That's why I said I'm not a coder.

-- CarloSchulz - 11 Apr 2007

I still have IE hanging when I view the URL I gave.

How can I help Michael to find out where IE loops? I have same version as Peter's IE so there must be some other small difference.

-- KennethLavrsen - 11 Apr 2007

You're not alone Kenneth! I have the same IE6 version as you and Peter (in French), and it hangs when when NatEditContrib is activated.

-- JohnFitzpatrick - 11 Apr 2007

To debug, try to disable some of the plugins.

-- PeterThoeny - 11 Apr 2007

SmartEditAddOn has search and replace!! Good to know! Can we have that in NatEditContrib too?

-- StephaneLenclud - 12 Apr 2007

I disabled ALL plugins, but IE6 still hangs when I try to edit a topic in which I have set SKIN=natedit,pattern. IE6 does not crash when SKIN=natedit,plain, but neither does the textedit box appear. Any ideas how to debug the interference between natedit and pattern?

-- JohnFitzpatrick - 15 Apr 2007

I can reproduce the IE6 hangs also. For me, the editor does not hang when I click on edit but as soon as I resize the window. So IE does not like to auto-adjust the height of the textarea.

-- MichaelDaum - 15 Apr 2007

It is probably wise to make it optional to resize a window, or better yet, default to not resizing. God knows what IE version breaks next when you finished fixing this "bug". In any case, sometimes I want to be able to define the height of the textarea myself. Like when I need to use a small monitor.

-- MikkoLaakso - 23 Apr 2007

The textarea is adjusting to the window's height. The window.onresize is bound to the function that adjusts the textarea accordingly. It seems so as if IE is DoSing itself by generating to many onresize events and stumbles over its own feet. Maybe a sleep timer inside the event handler could help IE. If that doesn't work out, I will simply disable auto-resize on IE.

-- MichaelDaum - 23 Apr 2007

Uploaded new version that tries to work around event flooding in IE. Please have a try.

-- MichaelDaum - 23 Apr 2007

This is great - IE6 no longer hangs! I will go ahead and deploy.
The buttons in preview mode do not work. I get a javascript "Objet attendu (object expected?)" error. Is this IE6 specific?

-- JohnFitzpatrick - 24 Apr 2007

Can anybody confirm if NatEditContrib causes resize problems (too small edit field) with SectionalEditPlugin? If I use the option

<editsections/>

which is for the whole topic sectioning, I get way too small edit area (sometimes less than 1 line). With option skin=pattern problem disappears (no natedit in use).

Fix: Override natedit.tmpl templatescript - definition in editsection.skin.tmpl , use the definition in edit.skin.tmpl

-- MikkoLaakso - 25 Apr 2007

Cool, it looks like the IE issue is solved?

I would really like to PreInstallNatEditContrib in TWiki 4.2. It would be nice if some of the issues are solved in time, especially the inconsistent save button behaviour and the icons I mentioned above.

-- PeterThoeny - 25 Apr 2007

If we PreInstallNatEditContrib in TWiki 4.2. it would be cool to have the same button design in NatEditContrib and and KupuContrib to ease adaption of both editors for new users.

-- CarloSchulz - 26 Apr 2007

Heh, one of the reasons I came up with this package was that I did not like any of the others look&feel, e.g. KupuContrib's button design.

There is currently and overwhelming amount of feedback here and I will try to address them one after the other besides enhancing the editor further. It would help if we start tracking the individual issues using Bugs:NatEditContrib .

-- MichaelDaum - 26 Apr 2007

I have tried to capture most of the inputs as bug items.

I did not put Stephane's "make everything configurable" proposal. I find this a bit much to ask and difficult to maintain and test afterwards. I prefer a fixed but good interface.

I raised some of the bugs as urgent. Those are the ones I think blocks a 4.2 release IF we include the NatEditContrib as default extension. They are mainly things that simply don't work or screw up other features. And the rest are normal and I think they are all vital enough so that we should attempt to get it into 4.2.

-- KennethLavrsen - 27 Apr 2007

Micheal, not sure whether you missunderstood my statement. I prefer the NatEditContrib buttons as well...

-- CarloSchulz - 27 Apr 2007

Carlo, can you attach your button images that you have created one by one instead of the complete screenshot, please?

-- MichaelDaum - 27 Apr 2007

Please all, followup on the individual discussions on the separate filed tasks at Bugs:NatEditContrib

-- MichaelDaum - 27 Apr 2007

I itemized feedback I gave above into Bugs:NatEditContrib.

-- PeterThoeny - 27 Apr 2007

I think buttons with a designer touch help "sell" TWiki. Study of buttons in aqua look:

25x25 buttons

25x22 buttons

The default "save" button is colored (to draw attention).

I can create those buttons if you wish.

Tracked in Bugs:Item3979.

-- PeterThoeny - 28 Apr 2007

The zip file is missing these 3 pictures:

button_eye.png
button_floppy.png
button_mono.png

-- AndrewRJones - 30 Apr 2007

Andrew, I don't know what you mean by "missing 3 pictures". Are you referring to the screenshot? Or something else?

The only buttons I've uploaded are the ones that differ from the original NatEditContrib.

-- CarloSchulz - 01 May 2007

Sorry Carlo, I meant the release zip on the main plugin page, which has now been updated.

-- AndrewRJones - 01 May 2007

Uploaded new zip that contains the missing pngs.

-- MichaelDaum - 01 May 2007

buttons are not correctly align, the verbatim button and the next one are like half a button height down from the other, it's pretty weird, show on firefox unix and IE windows. When I use NatSkin, all the button are at the same level. I would love to have NatEdit only instead of the big NatSkin.

-- CyrilleMastchenko - 02 May 2007

Which version do you use? Can you attach a screenshot, please.

-- MichaelDaum - 02 May 2007

$VERSION = '$Rev: 13608 (02 May 2007) $';

$RELEASE = 'v1.40'; screenshot in natedit.jpg (how do you attach it here ?) I have natedit on the same wiki (not use), can it be the problem ? Thanks.

-- CyrilleMastchenko - 03 May 2007

I can confirm I have the same problem as Cyrille. Using latest release plugin version, IE7 on WinXP. I'm using TWiki 4.1.x (strangely, i coudn't quickly find thins in configure?)

-- JosMaccabiani - 14 May 2007

I love this contrib, I had MarkupEditorContrib installed, but I'd like to switch to this one. So I tried it, but found some problems. I can't seem to be able to log into Bugs (using my normal t.o user/pass). So here goes

• on IE7 on XP, when I click the help button, the help tekst pops up, but the editor in the background turns to a white page 'false' in te upper left corner
• i expected the default text to be selected when you pressed an editor button, to be able to immediately start typing, but this does not seem to be the case?
• the default key shortcuts (Alt-S for save, Alt-K for break, Alt-Q for quiet save) do not seem to work anymore. Perhaps the save buttons could be the default patternskin ones at the bottom of the screen and the editor bar is just for editing functions?
• Also the new access keys for natedit, like Alt-B, don't work. I see the javascript call in the browser's status bar, but nothing happens.
• the auto resize of the edit screen is great, but a little too large vertically i think. When a form is present, you can't see that until you scroll down (especially with RevCommentsAddOn installed)
• image align problem reported above

-- JosMaccabiani - 14 May 2007

Fixed alignment of toolbar buttons in v1.41

-- MichaelDaum - 21 May 2007

After using it for a while, I notice that I really miss a 'Quiet Save' button. It keeps me from applying small typo-fixes etcetera. Could this feature be added to the Contrib? Thanks!

-- JosMaccabiani - 23 May 2007

Jos, what do you think does 'Quiet Save'?

-- MichaelDaum - 23 May 2007

I guess it Quiet Saves

Is that a feature in SVN? It's not in my 21 May release installation, and I even did a reinstall to confirm this.

-- JosMaccabiani - 23 May 2007

Quiet Saves are only quite if you are tracking changes using the changes cgi script of twiki. They show up like normal changes in WebChanges and RSS. Most people really don't grasp those two modes of saving. I personaly doublt that it is good to save something quietly in a wiki. If you fixed a small typo, then it is good that this is noticed by the others. In the end it increases your personal record contributing to the wiki. These are the reasons that there's no "Quiet Save" in the NatEditContrib. Besides, yet another (save) button just clutters the user interface.

-- MichaelDaum - 23 May 2007

I was wondering if the changes required to LocalSite.cfg could be detailed in the install instructions (for doing the install by hand)? Are there any needed for this plugin (besides the one to indicate its enabled)?

Thanks.

-- EricHanson - 05 Jun 2007

This extension is not a plugin that needs to be enabled in LocalSite.cfg. The only installation step is to append natedit to your SKIN preference variable.

-- MichaelDaum - 05 Jun 2007

Thanks, I was wondering if anyone had any luck with SectionalEditPlugin? I tried the above steps and still no luck.

I don't know if its me, but I couldn't even find a 'templatescript' varaible to replace in editsection.natskin.tmpl.

-- EricHanson - 08 Jun 2007

Michael, I missed your May 23 response... I think the RSS feed on t.o is not consistant.. Anyway, I really think a quiet save option is important in many environments where users are busy people overwhelmed by the daily amount of e-mail they get. If they start noticing that the e-mail with TWiki changes often only has changes that are undetectable without close inpection (most people in my environment don't understand diff views) then those mails are quickly added to their spam filter.

I understand this might be different in other environments, so a configurable variable setting (and an %IF in the template) might do the trick.

On screen real estate: if all the save buttons are moved to the bottom of the edit area, there would be enough real estate for the four buttons (save, checkpoint, quiet save, cancel). Also this would free up screen real estate on top for future functions (like attach?)

Finally, if this Contrib is ever going to be shipped as the default editor skin, I'd assume it has at least the same functions as the current default skin. Current default pattern edit skin has a quiet save button.

-- JosMaccabiani - 08 Jun 2007

Michael, could you describe what template fields this contrib inherits/overloads from natskin/patternskin? It seems difficult to get NatEditContrib to work on other skins.

//Edit: added templatejavascript and the scripts seem to work ok. The images still don't show...
//Edit: Got it! We need also styles . Ok, I got everything working this way.

I dont seem to have any problem with SectionalEditPlugin anymore, as far as my tests tell. Eric, do you still have problems with latest version?

-- MikkoLaakso - 10 Jul 2007

Not sure if this has been suggested yet but I tried Carlos' solution for adding bulleted and numbered lists to the toolbar. It worked somewhat but didn't seem to fit with the current codebase so I did some digging and made my own modifications. Below is a summary. Any questions or suggestions, please let me know.

Change Description: Add custom buttons: Bulleted List, Numbered List to wikiwyg toolbar
Change Date: 7/27/2007
Files added/removed/modified:
Modified - /templates/edittoolbar.natedit.tmpl
Modified - /templates/editjavascript.natedit.tmpl
Modified - /pub/TWiki/NatEditContrib/default/styles.css
Added - /pub/TWiki/NatEditContrib/default/button_bulletlist.png
Added - /pub/TWiki/NatEditContrib/default/button_numberedlist.png

Modification to - /templates/edittoolbar.natedit.tmpl

Begin - Line 42:

%TMPL:DEF{"paragraphtools"}%<ul class="natEditParagraphTools">
%TMPL:P{"leftbutton"}%
%TMPL:P{"centerbutton"}%
%TMPL:P{"rightbutton"}%
%TMPL:P{"justifybutton"}%
ADDED >>> %TMPL:P{"numberbutton"}%
ADDED >>> %TMPL:P{"bulletbutton"}%
</ul>%TMPL:END%

%TMPL:DEF{"leftbutton"}%<li class="natEditLeftButton"><a accesskey="&lt;" href="javascript:natEditLeftButtonAction()" title="%MAKETEXT{"Align left"}%"><span>%MAKETEXT{"Left"}%</span></a></li>%TMPL:END%
%TMPL:DEF{"centerbutton"}%<li class="natEditCenterButton"><a accesskey="." href="javascript:natEditCenterButtonAction()" title="%MAKETEXT{"Center align"}%"><span>%MAKETEXT{"Center"}%</span></a></li>%TMPL:END%
%TMPL:DEF{"rightbutton"}%<li class="natEditRightButton"><a accesskey="&gt;" href="javascript:natEditRightButtonAction()" title="%MAKETEXT{"Align right"}%"><span>%MAKETEXT{"Right"}%</span></a></li>%TMPL:END%
%TMPL:DEF{"justifybutton"}%<li class="natEditJustifyButton"><a accesskey="j" href="javascript:natEditJustifyButtonAction()" title="%MAKETEXT{"Justify text"}%"><span>%MAKETEXT{"Justify"}%</span></a></li>%TMPL:END%
ADDED >>> %TMPL:DEF{"numberbutton"}%<li class="natEditNumberButton"><a accesskey="o" href="javascript:natEditNumberButtonAction()" title="%MAKETEXT{"Numbered List"}%"><span>%MAKETEXT{"NumList"}%</span></a></li>%TMPL:END%
ADDED >>> %TMPL:DEF{"bulletbutton"}%<li class="natEditBulletButton"><a accesskey="l" href="javascript:natEditBulletButtonAction()" title="%MAKETEXT{"Bulleted List"}%"><span>%MAKETEXT{"BulletList"}%</span></a></li>%TMPL:END%

Modification to - /templates/editjavascript.natedit.tmpl
Begin - Line 52

function natEditNumberButtonAction() {
  natInsertTags(%IF{"defined NATEDIT_NUMLIST" then="%NATEDIT_NUMLIST%" else="'   1. ', 'Numbered List', '\n   1. Numbered List'"}%);
}
function natEditBulletButtonAction() {
  natInsertTags(%IF{"defined NATEDIT_BULLETLIST" then="%NATEDIT_BULLETLIST%" else="'   * ', 'Bullet List', '\n   * Bullet List'"}%);
}

Modification to - /pub/TWiki/NatEditContrib/default/styles.css
Begin - Line 8

.natEditBulletButton a { background-image:url(button_bulletlist.png); }
.natEditBulletButton a:hover { background-image:url(button_bulletlist.png); }

Begin - Line 44

.natEditNumberButton a { background-image:url(button_numberedlist.png); }
.natEditNumberButton a:hover { background-image:url(button_numberedlist.png); }

Please note that in the modification to styles.css, I did not make a second hover image yet. Hence, the same filename for both a and a:hover

-- JeremyHartmann - 27 Jul 2007

-- JeremyHartmann - 27 Jul 2007

Hi,

I'm looking to create a few more buttons on my nat edit contrib, however I'm a little confused as how to start.

A few potential buttons I would like to add would be a button that could paste the function %CONTENTS%, %STARTMAIL%, %ENDMAIL% and %INDEX%.

Thank you for your time!

-- BrianMahoney - 02 Aug 2007

You need to design the buttons and upload them to .../twiki/pub/TWiki/NatSkin/.

Next step is to code the javascript functions (needed when pressing the button). You need to edit edit.js for this one. Add some code to the file similar to this one:

function natEditMyButtonAction() {
  natInsertTags('%STARTMAIL%', '%ENDMAIL%', 'This is some mail text');
}

Last step is opening edittoolbar.natedit.tmpl and insert something like this at the appropriate place.

<a class="natEditMyButton" accesskey="x" href="javascript:natEditMyButtonAction()"><!--
--><img src="%PUBURLPATH%/%TWIKIWEB%/NatSkin/button_name.png" alt='...' title='...'/></a>

Note: this is untested. There's no need to follow a specific order you can start the otherway round as well.

-- CarloSchulz - 02 Aug 2007

Thank you Carlo! I am using patternskin w/ nateditcontrib - Should I be uploading the images to the /twiki/pub/TWiki/NatEditContrib folder instead?

-- BrianMahoney - 02 Aug 2007

yep, sure. The edit.js file should be in the same directory. Maybe the name edittoolbar.natedit.tmpl isn't correct in case you do not use NatSkin but i think the name is the same or at least similar for NatEditContrib

-- CarloSchulz - 02 Aug 2007

I added my button functions to /templates/editjavascript.natedit.tmpl instead of edit.js. edit.js contains the core function calls while editjavascript.natedit.tmpl contains the actual button functions along with the parameters that get passed to the natInsertTags function in edit.js.

It's been working fine for me so far so I'm curious as to why you would need to add the functions into edit.js.

-Jeremy

-- JeremyHartmann - 02 Aug 2007

The latest version still contains a bug described by JosMaccabiani on 14 May 2007: clicking the help button opens a pop-up window as expected but the editor windows gets replaced by a white page with the word "false" in the upper left corner. Here is a patch to fix this (presumably) unwanted behaviour (see also Bug 4213).

-- MartinKaufmann - 03 Aug 2007

I think it's just because I'm using NatSkin and not NatEditContrib as a seperate package. NatSkin has no editjavascript.natedit.tmpl file and it's editjavascript.nat.tmpl file differs from your description of editjavascript.natedit.tmpl

-- CarloSchulz - 03 Aug 2007

I've just uploaded a new version of NatEditContrib that does a more advanced form of bullet & numbered lists, including indenting. The work was tested on Opera, IE, Safari, and Firefox.

It contains an additional 'word' button theme (more aqua like buttons), and has a different order of buttons from the default theme (which Micha wll need to update to add the new functionality)

It also gives you an example of how you can use TWiki's templating system to create modifications without needing to change the files in the contrib.

Lastly, if you install and enable JQueryPlugin, you get a 'create table' button with a popup dialog that allows you to select a number of rows and columns.

in short, I created a new theme ( word) with buttons images and a style.css, and then added a new templates/edittoolbar.word.natedit.tmpl to define the differences from normal natedit.

(The icons, were created by PeterThoeny )

-- SvenDowideit - 03 Aug 2007

Thanks for your additions Sven, unfortunately I am unable to view the new one - I have tried using the TWiki installer & the .tgz archive and cannot see the changes you made - it still runs as the old one.

-- BrianMahoney - 03 Aug 2007

you have to use the settings described under Word Theme. I've left the default theme as is, partially because I don't have the same artistic style as Micha, and partially because I'm only a few hours away from being on a bicycle tour.

-- SvenDowideit - 03 Aug 2007

Looks awesome! Thank you & good luck!

-- BrianMahoney - 03 Aug 2007

Sven, Do you by any chance have a blank button image I could use to add a new feature to the editor (e-mail formatting).

Thanks!

-- BrianMahoney - 06 Aug 2007

I tried to make my own buttons using the method Carlo reccomended, however I am not successful - nothing changes when I view the editor after I inputted that code. If someone who has been successful using NatEditContrib, I would greatly appreciate your assistance.

-- BrianMahoney - 08 Aug 2007

Yay I think I'm on the right track now - just need to figure out how to get the image in

-- BrianMahoney - 08 Aug 2007

Ok I am officially lost - I got it to display

 %START 

and then

 %END% 

But if you notice above the second "%" was not showing up in start. So I went back to edit.js to see if there was a typo and there was not. I then removed the button code carlo suggested inserting into edit.js and the function is still displaying regardless of the fact that I removed the code from edit.js. Can this addition get saved somewhere else as well?

-- BrianMahoney - 08 Aug 2007

I just checked my example and it works fine om my TWiki. Hitting the button leads to %STARTMAIL%This is some mail text%ENDMAIL%

-- CarloSchulz - 09 Aug 2007

Thanks - the new version Sven just came out must be causing the issue. I will try to do it on the old skin and see if I am successful.

-- BrianMahoney - 09 Aug 2007

What was the reason to make the table support dependent on the JQueryPlugin, which is yet another JavaScript/AYAX library? Would it be possible to use the YahooUserInterfaceContrib instead, which is TWiki's AJAX standard?

-- PeterThoeny - 12 Aug 2007

Michael asked me to use the more lightweight (and in his opinion superior) JQueryPlugin. As NatEditContrib is his I decided to do so for the initial version, though I was concidering that we really should be abstracting this choice between the defult skin and the next one.

eg

SKIN=jquery,natedit,pattern

OR

SKIN=yahooui,natedit,pattern

I'll discuss this more later - when iäm not in an internet cafe Ö=

-- SvenDowideit - 14 Aug 2007

Sven, I was wondering if you could help me insert some new buttons into the "word theme" version of the contrib. I have the design of the buttons ready I just need to know exactly where to put them. I tried following Carlo's reccomendations above, but it seems like the code might be slightly different for this word theme, in regards to adding new buttons. I am running Patternskin & your word theme nateditcontrib at the moment. Thank you in advance! (The buttons I would like to input would involve similar formatting comparable to the "pre" button you have in the editor).

-- BrianMahoney - 16 Aug 2007

Since when is YahooUserInterfaceContrib TWiki's ajax standard? YUI is much more than just ajax. There's no ajax requirement in NatEditContrib (for now).

-- MichaelDaum - 18 Aug 2007

*Brian's bug reports moved to Bug:Item4430 *

Brian can you please have a look at the javascript error console? It might be that something is going wrong (also, what TWiki version? and are you using the updated JQueryPlugin that i made when I released this NatEdit?)

-- SvenDowideit - 22 Aug 2007

In regards to the javascript error console, I tried looking for one and I am unsure of where it might be. I looked in my browser and I saw the java console, but I did not see any error section.

I am using the current TWiki 4.1.2 & I installed the JQueryPlugin using your install script through twiki/bin/configure with the patched extend.pm that you recently released. Thanks for the help

I am making some more buttons for my editor, such as a button to display

%TOC% 

& a Button for displaying E-mail messages using the functions %START% & %END%, do you know who might be able to help me design a nice looking button? The ones I made in GIMP look ok, but they sort of stand out a bit from the rest of the editor.

-- BrianMahoney - 22 Aug 2007

oh, you're right, IE's not useful like Firefox nm, I'll look today, and ask you more q's later.

mm, buttons - not really, Though i'll commit the blank 2 word ones today, and talk to Micha about the default ones - I didn't make them

-- SvenDowideit - 23 Aug 2007

I uploaded a blank version of micheals theme . Would be cool if everyone who created new buttons (and functionality) contributes them back here :-). Or maybe we should create a NatEditContribExtensions topic as the plugins topic is relesed from SVN isn't it?

-- CarloSchulz - 23 Aug 2007

I got the buttons working, however I cannot get the JQueryPlugin to display the Table Creator box, only the 3*3 box appears by default when I click on it.

I am using the current TWiki 4.1.2 & I installed the JQueryPlugin using your install script through twiki/bin/configure with the patched extend.pm that you recently released. Thanks for the help

I am making some more buttons for my editor, such as a button to display

%TOC% 

& a Button for displaying E-mail messages using the functions %START% & %END%, do you know who might be able to help me design a nice looking button? The ones I made in GIMP look ok, but they sort of stand out a bit from the rest of the editor.

-- BrianMahoney - 22 Aug 2007

I've commited the blank version of the word buttons to svn - and

and Micha's commited both the default buttons (in one file) as http://develop.twiki.org/svn/twiki/trunk/NatEditContrib/pub/TWiki/NatEditContrib/default/buttons.xcf

yes, the Plugin topic is built from svn

-- SvenDowideit - 23 Aug 2007

Thanks so much guys! Carlo, your idea for a new page for buttons sounds great

-- BrianMahoney - 23 Aug 2007

Sven, is there any research I could do to help assist you with the word theme & compatibility for IE7?

-- BrianMahoney - 24 Aug 2007

IE7 was a simple fix

Micha added some missing functionality for un-selected sections, and other cornercases, and I've re-vamped the code to abstract out some of the nastier IE code. And it now works with the 4.2.0 pattern skin.

Please, tell us what you think

-- SvenDowideit - 25 Aug 2007

Sven & Micha thank you so much for all your hard work! IE 7 looks great now.

I only noticed a few very minor problems:

• When resizing in IE 7, you lose the buttons again similar to the original IE 7 problem. Firefox appears to handle this a lot better.
• The help button still displays false, however that patch attached below does work (This believe it or not works better in Internet Explorer, than in Firefox)
• I am still having trouble getting that JQueryPlugin to display the table interface you show in the NatEditContrib "Word Theme" section. When clicked, I only see the default 3x3 grid inserted in my editor. It is enabled in configure & I have also updated it & enabled it in TWikiPreferences.
• Carlo's idea for a new page would be great, where people could share their own custom button functions for everyone to use. I would create this page myself, but I felt I should consult you guys first.

Thank you again for all your continued help!

-- BrianMahoney - 27 Aug 2007

I see that Bugs:4213 (template error) is still in the distribution.

Also, anybody else seeing issues with JQuery causing IE6 to slow down on long topics? I have disabled JQuery (as best as I can) due to user feedback. Unfortunately, I do not know how to identify which script is implicated.

-- JohnFitzpatrick - 27 Aug 2007

John, have you been successful with the JQueryPlugin & WordTheme regarding Table Creation?

-- BrianMahoney - 27 Aug 2007

Brian, I really can't understand why you're not getting the JQuery based table popup - can you paste your configuration (SKIN setting etc) here? Also, do the tests / examples on the JQueryPlugin page work for you?

oooo, I'll fix the Help button for next iteration - neat bug!

Yes, I also see slowdowns on IE6 with JQuery - I'll look into it some time soonish.

I like Carlo's idea too - but its Micha's contrib, I'm waiting for him to weigh in

-- SvenDowideit - 28 Aug 2007

The tests/examples work fine, this is what I have in my TWikiPreferences:

  * Set SKIN = jquery,word.natedit,natedit,pattern
  * Set NATEDIT_THEME = word
  * Set NATEDIT_HELPTEXT = TWiki.NatEditWordHelpText

I tried running both your auto install script & via extraction.

Thanks for all you help

-- BrianMahoney - 28 Aug 2007

Any ideas on how to make NatEditContrib and TinyMCEPlugin cohabitate i.e. when TinyMCEPlugin takes control of the textarea edit box, the number of NatEdit buttons should be restricted to save, quit and a few other?

-- JohnFitzpatrick - 07 Sep 2007

no, unfortunately not. I'm looking for solution as well.

-- CarloSchulz - 12 Sep 2007

Micha has updated this contrib. When I installed it, I no longer get the natedit buttons with tinymce ... but I don't get any other buttons either! I am using the word theme. Have reverted back to previous version.

-- JohnFitzpatrick - 08 Oct 2007

Do you get the right buttons using the default theme?

-- MichaelDaum - 20 Nov 2007

Yes, I did: by making sure jquery is in the skin definition, the buttons reappear, both in default & word theme.

However, I can't get NatEdit to work smoothly with TinyMCE. I tried again yesterday, even went in and reviewed edit.js, but couldn't understand how it is supposed to work

-- JohnFitzpatrick - 20 Nov 2007

Firefox, IE7 and Opera each seem to have their own way of dealing with the way NatEditContrib manages its toolbars when a wysiwyg editor is shown:

• Firefox: hides everything except save/preview buttons based on element names ( hide_in_wysiwyg)
• IE7: hides everything, no buttons are shown.
• Opera: shows everything, no buttons are hidden

Editing the template edittoolbar.word.natedit.tmpl and remove class natEditHiddenToolBar from natEditToolBar. This way you at least have a toolbar in IE7 again.

My skin settings are jquery,word.natedit,nat

-- MarkVanHeeswijk - 21 Dec 2007

I hacked a way to use NatEditContrib and TinyMCEPlugin together which allows you to switch by clicking a button. This is achieved by setting url variable nowysiwyg, and for safety a snapshot of the current text is made. Note that this variable is not fully supported in release 4.1.2, so it works best in 4.2.

You can also get it to work in 4.1.2, but then you have to add a hidden input field nowysiwyg to your edit templates, and change the checkpoint code in save.pm so that it adds the variable to the url.

The files can be found as an attachment to the related report in TWikibug:NatEditContrib, TWikibug:Item5159.

-- MarkVanHeeswijk - 21 Dec 2007

Thanks Mark! I fixed above bug link.

-- PeterThoeny - 01 Jan 2008

Thanks for fixing it Peter

Now i have been using TWiki for some time, and I noticed a small inconsistency in the NatEdit editor. Namely, when inserting numbered lists and bulleted lists the behavior is different than expected. You would expect similar behavior as with the insertion of headers:

• if text X is selected and button is pushed, then a bullet is added and you end up with text X selected
• if nothing is selected you end up with a bullet and 'bullet item' selected

Instead, currently you end up with the whole line being selected and you can't immediately continue typing.

It's just one of those small details, but since the code is already there it's probably an easy fix

-- MarkVanHeeswijk - 05 Jan 2008

Suggestion: Add a button that displays Smilies and TWikiDocGraphics images (from SmiliesPlugin table and TWikiDocGraphics table) and when an image is selected put code onto wiki page.

-- ScottHinchley - 15 Jan 2008

Good suggestion. I like it. Same vein HTML entities. Scott, could you file your feature request at Bugs:NatEditContrib? Thanks in advance.

-- MichaelDaum - 16 Jan 2008

Doesn't support JavaScript, you make that call, fair enough. But when someone using lynx (for example) innocently hits Edit they end up in the editor with no way to Cancel, so all they can do is go back in their browser, leaving their lease open. The text part works fine, so they might have done a lot of editing before realising they cannot Save, but the most basic concern is the lack of Cancel. Any chance of adding a get-out-of-jail for them?

-- SueBlake - 28 Jan 2008

No. I don't support browsers without javascript. Dealing with different browsers is already difficult enough.

-- MichaelDaum - 28 Jan 2008

I'm wondering if BrianMahoney's problem with the table button was ever solved. I've got a similar one: users click the button and get the textarea greyed out and the "Please wait..." dialog, and it just hangs. JQueryPlugin works in all of its self test, and my relevant settings are

  * Set SKIN = jquery,word.natedit,nat
  * Set NATEDIT_THEME = word

-- PhilStevens - 19 Mar 2008

I find it very limiting if it is not possible to cancel an edit if JavaScript is not available. Preferred way is to have a graceful fallback if JavaScript is disabled or not available.

-- PeterThoeny - 21 Mar 2008

The most natural way to cancel an edit is to click "Back" in your browser.

-- MichaelDaum - 21 Mar 2008

I am having some trouble getting this plugin to work, I have installed the plugin, both through the configure script and manually from the installer script in the download archive.

I have set the following values in my WebPreferences

* Set SKIN = jquery,word.natedit,natedit,pattern 
* Set NATEDIT_THEME = default 
* Set NATEDIT_HELPTEXT = NatEditWordHelpText

I have followed all the instructions from the plugin page, any idea of what I am missing? Any help is greatly appreciated.

-- CameronWood - 05 May 2008

Any possibility of a reply?

-- CameronWood - 29 May 2008

Did you already disabled TinyMCEPlugin in bin/configure ?

-- OliverKrueger - 30 May 2008

Congratulations for the new NatEditContrib. It was my favorite.
The theme XXXX is no longer available?

-- CarlinhosCecconi - 26 Jul 2008

Right, theming has been disabled while I made natedit a jquery plugin. The only other theme besides the default one was provided by TWikiDotNet. However, this was not maintained anymore for quite some time now, and I have not been able to keep their contributions to this extension in sync.

-- MichaelDaum - 03 Aug 2008

In IE the buttons SETTINGS, HELP, FORM, ADD FORM and CHANGE FORM are not displayed.

-- CarlinhosCecconi - 20 Aug 2008

Sounds like that title box is not working like one would expect. Whatever I put in there after the save my topic title remain the same. If I edit again it shows %TOPICTITLE% in the title box.

-- StephaneLenclud - 29 Aug 2008

• Stephane, the TOPICTITLE issue can be fixed by installing DBCachePlugin - there is a note in the NatSkinDev page about this issue. -- AndrewRobinson - 24 Oct 2008

I was trying to get the text area to have a fixed height but it proved tricky. In editjavascript.natedit.tmpl you can set your natedit preferences. It shipped with autoMaxExpand:true. I tried playing with autoMaxExpand setting and autoExpand but I could not get satisfactory behavior on FF3 other that the default one. I also had to fiddle around a bit with jquery.natedit.js as the text area when using autoExpand was only a few pixels wide.

I understand autoMaxExpand sets the size of the text area according to your window size in order to avoid page vertical scrolling. This is a great option and it does work well.

I understand autoExpand should set the size of the text area according to its content in order to prevent text area horizontal scrolling. That sounds like a great option but I could not get it to work properly. First I had to fix a few things in jquery.natedit.js regarding the width of the text area and then it turns out the height of the text area was constantly much bigger than the text it contains.

When disabling both options I think I was getting fixed sized text area but the natEditTopicInfo was smaller than the text area and thus was showing vertical scroll bar. That's not what you want cause as soon as your text area content height gets bigger than the text area height you also get a vertical scroll bar in the text area thus double vertical scroll bar.

I would love the get those options straightened up.

-- StephaneLenclud - 30 Aug 2008

I think the one scrolling I want to get ride off is jqTabContents and not natEditTopicInfo.

-- StephaneLenclud - 30 Aug 2008

Indeed I managed to make the tab height big enough for my fixed size text area by editing NatEditContrib/edit.js and adding an arbitrary 200 pixel to the following line:

var height = windowHeight-paneTop-bottomBarHeight-70+200;

To sum up: In order to get fixed size text area set autoMaxExpand:false and autoExpand:false in editjavascript.natedit.tmpl and patch your NatEditContrib/edit.js as described above.

-- StephaneLenclud - 30 Aug 2008

That thing wont work on Nokia S60 Safari though. My text area is still resized to fit the window height it seems. I'm lost

-- StephaneLenclud - 30 Aug 2008

Has anyone managed to get NatEditContrib and TinyMCEPlugin working together under 4.2.3? I had the two working nicely side-by-side under 4.1.2 and tried to upgrade - so far rather unsuccessfully. Right now NatEdit works for the raw edit mode but WYSIWYG editing (and creating new topics) fails because NatEdit is trying to take over leading to an incompletely loaded editing window. Any hints or tricks are appreciated.

-- MartinKaufmann - 24 Sep 2008

Any progress with this?

-- MarkoRintamaki - 14 Oct 2008

This Contrib is a really nice thing, but I have trouble getting it work. I installed and activated it but the editor is not shown correctly, some of the buttons are not working, others are missing and some code is shown. I installed JSUnitContrib to run the test on the NatEditContrb page and it ended with the error: "txtarea is undefined". But I have no knowledge about js, so this is not helpful. I got the same errors and wrongly shown editor with TWiki 4.1, 4.3 and 5.0 which are all installed on my Debian (Lenny 5.05) System.

Thanks for any suggestions!

-- CarlaReitzenstein - 2010-08-16

I changed the ModificationPolicy of this extension from ContactAuthorFirst to PleaseFeelFreeToModify due to inactivity. Anyone please feel free to work on this extension.

-- PeterThoeny - 2012-12-03