Textile Wysiwyg editor

Added by Peter Lawrence about 4 years ago

I'm playing with the idea of developing a textile wysiwyg editor plugin for redmine. The current wysiwyg editor has it use but you need to convert all your existing pages to html and you loose the macro features of a wiki.

Since textile is the wiki format which is quite close to html, I'm using a system which converts the wiki textile page to html for use in Tinymce. Then once editing is complete it is converted back to textile. For the conversion process I'm using a modified versions of html2textile and RedCloth to convert to html.

My current prototype system displays the normal redmine editor however the user can switch to Tinymce via a radio button when editing a wiki page. It seems to work reasonably well except for a few formatting problems and some embedded images are displayed as "link not found" while in the wysiwyg editor.

My question is:-
I'm using a new Conversion controller which does the conversion between the two formats for the wiki editor page. What I was wondering is do I need to set any authorization "before" functions on my methods and/or do some initial string escaping to avoid string inserting attacks. I'm not sure this is necessary since my routines don't run any SQL commands just string manipulation routines.

The routes file is defined as..

#custom routes for this plugin
ActionController::Routing::Routes.draw do |map|
  map.with_options :controller => 'convert' do |convert_routes|
    convert_routes.connect "convert/wysiwygtohtmltotextile", :conditions => { :method => [:post, :put] }, :action 

=> 'wysiwygtohtmltotextile'
    convert_routes.connect "convert/wysiwygtotextiletohtml", :conditions => { :method => [:post, :put] }, :action 

=> 'wysiwygtotextiletohtml'
  end
end

and for example the code to convert from textile to html is...

def wysiwygtotextiletohtml
    @text=params[:content][:text]
    @text=HTMLFormatter.new(@text).to_html
    File.open("after_tohtml.txt", 'w') {|g| 
        g.write(@text)
    }
    render :partial => 'convert'
  end

Replies (77)

RE: Textile Wysiwyg editor - Added by Bruno Samora about 4 years ago

Peter,

This would be a really cool plugin - please, let us know if you make any progress.
Unfortunately I can't help you with your question.

RE: Textile Wysiwyg editor - Added by Peter Lawrence about 4 years ago

Currently I'm testing it in-house since there is a few issues I need to sort out regarding the conversion to and from textile. If you stick to simple textile formatting it's not a problem, but when it comes to images and macros that's another issue.

A better option would be to write a javascript wysiwyg editor for redmine like the one used in Trac. As an experiment I've managed to graft the trac wysiwyg editor into redmine however this uses a wikicreole format.

RE: Textile Wysiwyg editor - Added by Peter Lawrence about 4 years ago

If anyone is interested in obtaining the code it can be found here..
http://github.com/PeterLawrence/redmine_wysiwyg_textile

Note this is just a test application that should not be used outside a developmental environment. Note currently when using the editor in wysiwyg mode the preview option does not work, it displays the raw html. To use the preview link simply switch back to the textile editor via the radio button, below the save button.

RE: Textile Wysiwyg editor - Added by Tao Lin about 4 years ago

Hi Peter,

I downloaded your plugin and play it a little bit. It's great! Is it possible make all Redmine TextArea support wyswyg as well such as Issue, Document etc?

RE: Textile Wysiwyg editor - Added by Peter Lawrence about 4 years ago

Yes it's possible to extend this to other areas of redmine. However, for this test version I've restricted it to the wiki for now. The only area where it may be problematic is in regard to issue modification since two instants of the tinymce need to exist on the same webpage.

RE: Textile Wysiwyg editor - Added by Peter Lawrence about 4 years ago

Just a quick update regarding a major bug in the current version.
Saving the wiki page in Wysiwyg mode saves the raw html.
Hence before saving the wiki page you need to switch back to the textile editor first.

To fix this bug and the preview bug some more javascript work is required.

RE: Textile Wysiwyg editor - Added by Peter Lawrence about 4 years ago

Preview and save in wysiwyg mode should now work.

RE: Textile Wysiwyg editor - Added by Terence Mill about 4 years ago

Hi Peter, if this will work as standard plugin, resulting in same textile result as doing manually edit in orginally editor and having no restrictions WOOW!

Keep on going ;) !

RE: Textile Wysiwyg editor - Added by Peter Lawrence about 4 years ago

Sorry there's still a lot more work to do on this plugin. It's mainly dependent how now well the development with the html to textile code goes. Also still some work to do on image links. Anyway, post here anything which does not work as expected and, if I have the time, I'll see if I can fix them. Also feel free to branch your own version if you want.

RE: Textile Wysiwyg editor - Added by Paul paul about 4 years ago

This is great, thanks Peter!
Two things that don't work right now as far as I can see:
1. Preview - the formatting seems all wrong.
2. Any macros - latex, toc, graphviz, etc - are not running.
3. The default option for editing a Wiki page is still Textile, not WYSIWYG, and you have to switch over every time you click the Edit button. Is there a way to set WYSIWYG to be the default editor?
Thank you.. this is going to save many of us a lot of time.

RE: Textile Wysiwyg editor - Added by Paul paul about 4 years ago

Another small issue: inserting a horizontal line is not stored, and any previously existing lines are removed upon saving the page.

RE: Textile Wysiwyg editor - Added by Paul paul about 4 years ago

Two more:
1. Could you add a button to choose the color of a given word?
2. When you insert a table and define color / positioning properties of text inside a cell, none of these are kept.
Thanks!

RE: Textile Wysiwyg editor - Added by Peter Lawrence about 4 years ago

Paul thanks for the feedback, however before I can address your first three issues I need a little more detail.
1. Preview - the formatting seems all wrong
What's wrong? The preview should function the same in both wysiwyg and textile mode.
If not then this could be a failure of the html to textile routine.
2. Any macros - latex, toc, graphviz, etc - are not running.
This is so macros can be added/modified in wysiwyg mode.
To view the macros you need to select preview.

3. The default option for editing a Wiki page is still Textile
This is because this plugin is in an early stage of development. Once the functionality of the editor is good enough this will be an user configurable option.

As for the other points, if these are possible in textile format then they can be added to the html to textile code. Is there a textile format for colors?

RE: Textile Wysiwyg editor - Added by Andreas Huebner about 4 years ago

Unfortunately I don't get it work.
The plugin is installed in vendor\plugins\redmine_wysiwyg_textile an I changed the text formatting to wysiwyg textile. But when I edit a wiki page within the wysiwyg editor it creates HTML Code, that is subsequently visible as HTML-Sourcecode in the wiki. It seems, that no conversion to textile takes place. Even the other way round, when I edit an textile page and choose the wysiwyg-RadioButton, I see the textile-sourcecode in the HTML window. No Formatting.

Have I done something wrong?

regards and thanks in advance,
Andreas

RE: Textile Wysiwyg editor - Added by Peter Lawrence about 4 years ago

For some reason the functions which convert to and from HTML and Textile are not being called. Are you using HTTPS protocal since I've only tested this module using the standard HTTP system.

RE: Textile Wysiwyg editor - Added by Andreas Huebner about 4 years ago

No, just http.
tested on Firefox 3.6.12 and IE8

RE: Textile Wysiwyg editor - Added by Peter Lawrence about 4 years ago

I assume you are using version 0.14? Could you also check your browser to see if you're getting any javascript errors.

RE: Textile Wysiwyg editor - Added by Andreas Huebner about 4 years ago

Must be 0.14, just downloaded it half an hour ago ;)

Currently I'm debugging tha JS. For example the following line:

new Ajax.Request('/convert/wysiwygtotextiletohtml', {asynchronous:false, evalScripts:false, method:'post', onSuccess:function(request){UpdateFile(request)}, parameters:$('content_text').serialize()});

I set a breakpoint on function UpdateFile(...) but it's obviously never called, since FireBug never halts on it.
MayBe some trouble with AJAX? In addition it may be relevant that Redmine runs on Mongrel Services with Ruby 1.8 and Apache 2.2.14 on a Windows 2003 Server. Since the mongrel does AFAIK the URI-mapping, perhaps there may be an AJAX-issues?

Or some Ideas what I can test, inspect, debug else?

Thanks!

RE: Textile Wysiwyg editor - Added by Peter Lawrence about 4 years ago

My current set up is Mongrel, Ruby 1.87 on a Windows 2003 server, however I'm not using Apache. Is the function toggleEditor being called?

RE: Textile Wysiwyg editor - Added by Andreas Huebner about 4 years ago

The apache log says something interesting:

[Thu Nov 04 13:46:40 2010] [error] [client 10.xx.xx.xx] File does not exist: C:/wamp/www/convert, referer: http://server:85/redmine/projects/projekt1/wiki/Wiki/edit

Obviously, the ajax-command isn't resolved the right way.

RE: Textile Wysiwyg editor - Added by Andreas Huebner about 4 years ago

Yes, toggleEditor is called, there I found that AJAX-call and subsequently set the HALT-point at updateFile().

Maybe we discuss elsewhere, to not blow up that forum page with single steps, furthermore an conclusion afterwards?

RE: Textile Wysiwyg editor - Added by Peter Lawrence about 4 years ago

Are you using any rewrite rules on your server?
Since the routes.rb file in redmine_wysiwyg_textile\config normally deals with this.

RE: Textile Wysiwyg editor - Added by Andreas Huebner about 4 years ago

No, not that I am aware. Mongrel acts as proxy in Apache, that's it, no rewrite.

And yes, normally that routes.rb do work.

RE: Textile Wysiwyg editor - Added by Andreas Huebner about 4 years ago

But normally, every link in redmine is given at least with that '/redmine' prefix. So I a currently research how that ajax.request() method is handling the url-parameter, since no other plugin I installed uses this method and perhaps therefor it didn't appear till now.

RE: Textile Wysiwyg editor - Added by Peter Lawrence about 4 years ago

It looks like you are doing the right thing, so not much else I can add.
Just note this is still an early prototype and a lot of work is still required on the html to textile code, which is the main problem area. Also I've notice that the internal textile module in redmine does not handle some of the standard textile features such as color,font-size and text-decoration i.e all the following don't work

%{color: green;}Green text!%
%{font-size: 1cm; font-weight: bold;}Big text!%
%{text-decoration: overline; letter-spacing: 0.2cm;} Overline and spacing!%

Hence the html to textile code needs to be standardised for redmine and the wysiwyg plugin needs to have these features removed.

1 2 3 4 (1-25/77)