miniBB ® miniBB®
miniBB Support Forums
 | Forums | Register | Reply | Search | Statistics | Manual |
Custom Tutorials and Modifications miniBB Support Forums / Custom Tutorials and Modifications /   

[DEV] MiniBB WYSIWYG editor

Page  Page 1 of 2:  1  2  Next »  
Author ivan79
Registered
#1 | Posted: 13 Jun 2010 09:57 | Edited by: ivan79 
MiniBB WYSIWYG Editor
I know that some may not like this option, as this is still miniBB forum. But again not hurt to expand features. Zipped forum with WYSIWYG editor and lots of plugins takes up about 400kb (core+WYSIWYG about 220kb).

Anyway, here's an image:
MiniBB WYSIWYG Editor
Toggle HTML (normal MiniBB post editor):
BBCODE

WYSIWYG editor convert HTML to BBCode output.

But as you can see currently do not work all options.
Working:
Bold, Italic, Underline, Links, Insert Images, Quote (only in editor), Youtube (with plugin), Smiles (plugin).
Easy add html replacement for custom BBCodes.

Not working:
Text color, user quote paste (paste_strinL)

Author tom322
Registered
#2 | Posted: 13 Jun 2010 10:29 
Is it loading at every page reload, how about working with the preview addon? :

Author ivan79
Registered
#3 | Posted: 13 Jun 2010 11:56 | Edited by: ivan79 
tom322:
Is it loading at every page reload, how about working with the preview addon? :

Its loading when post form loads. I think its working fine with preview addon (not sure).

Added images for smiles (working without plugin).

The point is not just the WYSIWYG editor, but also able to add custom bbcode (and HTML replacements without touching the source code).

For example (add custom smiles):
create smiles.js and add following code:
//SMILIES
function doSmiley() {
if (editorVisible) {
ifm.contentWindow.focus();
myimg = url +'img/smilies/grin.gif';
if ((myimg != null) && (myimg != "")) {
myeditor.execCommand('InsertImage', false, myimg);
}
}
else {
AddTag(':)', '');
}
}

And calling doSmiley() function (in template) you got smiley image in text editor:
<a href="JavaScript:doSmiley()"><img src="{$main_url}/img/smilies/grin.gif" alt=":)" /></a>

There are lots of other functions and can easy implement (for example: copy/paste content from other source with text formating, images, style...).

Author Paul
Lead Developer
#4 | Posted: 14 Jun 2010 02:55 | Edited by: Paul 
WYSIWYG about 220kb?? As far as I remember, about 200 Kb is the basic miniBB package size with Manual :-)

I was always against WYSIWYG forms because first of all, they doesn't work in every browser. Second, the technology changes so fast, that it makes huge time to support such updates. Sooner or later, such WYSIWYG simply stop work because the new version of the browser is released which doesn't support older platforms. Third, it's uncomfortable to control "what you type" actually, because of internal WYSIWYG bugs. It may work for simpler texts, but for more complicated messages it may become a mess.

In your version, does the "YouTube" button really work?

miniBB has a lot of extra add-ons which may use BB code or form's button. For example, here on our forums we have File Bank button. Polls add-on has such button as well. BTW did you tested Polls BB-code with it? I am pretty sure it won't work in WYSIWYG, because it can't work. I also guess Preview add-on won't work with this... Also, you didn't check it with File Upload add-on, which uses 'multipart' type (will multipart work with WYSIWYG at all?) Private Messaging which uses the same form as miniBB.

Also, URL code in miniBB has a tweak. Admins may put [urlc] instead of [url] and that way remove "nofollow" attribute on link. I'm pretty sure WYSIWYG doesn't even care about the 'rel' attribute of links, or at least it may be not simple to set up.

There is actually much more freedom with standard JavaScript routine (which btw do not work always in specific browsers as well - but at least it is just couple Kb of code and works in major browsers) and BB-codes which could have different options.

Another thing - did you test it on editing the message? In theory it should convert all codes back to WYSIWYG. So far I see it doesn't work.

I guess most of users do not care about bolding, italizing or underlining their texts, 80% of all forum messages do not contain URLs or Images, so this thing is really a waste of time...

Author ivan79
Registered
#5 | Posted: 14 Jun 2010 06:56 | Edited by: ivan79 
Paul:
WYSIWYG about 220kb?? As far as I remember, about 200 Kb is the basic miniBB package size with Manual :-)

Yes, Basic miniBB is about 190Kb. WYSYWG have only one .js (19Kb) and few images (each 1kb) and you can also easy replace images with text - replacement for Bold image can be B etc..
Paul:
It may work for simpler texts, but for more complicated messages it may become a mess.

This is not standard "heavy" editor. This editor is adapted to decode the HTML BBCode itself and graphically displays the contents. As you say 80% messages do not contain URLs or Images, only simple text.

Paul:
In your version, does the "YouTube" button really work?

Working fine.

Paul:
miniBB has a lot of extra add-ons which may use BB code or form's button. For example, here on our forums we have File Bank button. Polls add-on has such button as well. BTW did you tested Polls BB-code with it? I am pretty sure it won't work in WYSIWYG, because it can't work. I also guess Preview add-on won't work with this... Also, you didn't check it with File Upload add-on, which uses 'multipart' type (will multipart work with WYSIWYG at all?) Private Messaging which uses the same form as miniBB.

Not sure about that, but if it calls "javascript:" then can be easy implement.
I tried Polls in your Demo forum. It will works with this editor for sure (without touching anything). I cant test it like other addons cause I dont have source. Will test preview plugin...it might be working (i have tried it on base miniBB editor and its not working- I only got blank popup on preview). All bbcodes and other functions works (editor doesnt change source minibb functions). For example smiles working fine without touching source code of forum or wysiwyg. All bbcodes will work without problems.
This editor use same form ID as minibb (its just "attached" on it, and call extra functions).
For example if you are not logged/registred and forum doesnt allow post w/o login, you got error message, right? I typed post (as not logged) and click "Post". Page reload with message to login to post with my text (content) in standard miniBB editor. Similiar solution can be for "Edit" message.

EDIT2: I have installed "Preview" plugin. It's working fine without changeing anything.

Paul:
Also, URL code in miniBB has a tweak. Admins may put [urlc] instead of [url] and that way remove "nofollow" attribute on link. I'm pretty sure WYSIWYG doesn't even care about the 'rel' attribute of links, or at least it may be not simple to set up.

Not so hard to implement. EDIT: it's working without touching anything. If [urls] works in basic miniBB, [urlc] will work with this editor.
EDIT: Tested and working.
Paul:
There is actually much more freedom with standard JavaScript routine (which btw do not work always in specific browsers as well - but at least it is just couple Kb of code and works in major browsers) and BB-codes which could have different options.

I agree. :) ...and have tested this editor in ffox, IE, chrome, opera and its working without problems.
Paul:
Another thing - did you test it on editing the message? In theory it should convert all codes back to WYSIWYG. So far I see it doesn't work.

Yes, I was thinking about. Its not working. Easy solution is to call standard editor on edit message. Harder solution is hard-coding :) EDIT: its working now.
Paul:
I guess most of users do not care about bolding, italizing or underlining their texts, 80% of all forum messages do not contain URLs or Images, so this thing is really a waste of time...

Depends on the forum to forum and content. My opinion is that the forum should have a style and format text, and not just plain text. But not necessarily all agree. In any case, this is miniBB forum (and this is lightwaved WYSIWYG). Acually it's not like other WYSIWYG editors. This editor convert BBCode to WYSIWYG, similiar as "Preview in real time".
Instalation is very simple (not touching source code) only 1 template file.
In any case, I will this plugin if none of the other, then at least for me. Who should not have to have it. :)

Regards,
ivan

Author tom322
Registered
#6 | Posted: 14 Jun 2010 10:34 
I would gladly test it but for now I see too many bugs and solutions that will require core code changes. I noticed you could copy-paste images but then when you post a message they are obviously gone, so it could be confusing. Also, when user enters incorrect password he goes to the 'post_hold' form and then the editor doesn't show up either. Not to mention other addons.

But you may go on and I can point out bugs, maybe after some time it will become an official addon or default solution. The most important is not to destroy core files or make full notes what exactly was changed, however at this stage I don't think it's possible..

Author ivan79
Registered
#7 | Posted: 14 Jun 2010 12:14 | Edited by: ivan79 
Thanks for reply.

If you tested right now (before this post), I was uploading some files, so thats why bugs show. :)
When you copy/paste text, it wasnt gone. Thats happen cause I was reuploading some files while you test.

What addons doesnt work? I have tested: badwords, preview, smilies and few others. All works fine. As I said this addon doesnt touch core files. It's call function doCheck() before any action and it acts like basic miniBB. Probably that will solve solution with "edit" posts and post_hold form.

EDIT:
For posthold I found solution, but it need to edit bb_func_posthold.php (I just copied some code from main_post_form and its working fine). Thats first core modification. Anyway, posthold doesnt have any editor in basic miniBB, so this is just a tweak.

Edit post function now working fine (only need to decode youtube output).

Author tom322
Registered
#8 | Posted: 14 Jun 2010 19:45 | Edited by: tom322 
ivan79:
What addons doesnt work?

I don't know, maybe they work. But you should check it with Private Mail and File addon for sure.

I noticed some javascript warnings in IE.

Preview - it shows tags instead of formatted message, like:

[u]just test[/u]

instead:

just test

(probably because you use [u] instead [i]).

---

If it works with all addons, will you write some instructions to install it? Still, I feel more than just one core file will need to be changed to make it work.. [?]

Author ivan79
Registered
#9 | Posted: 15 Jun 2010 13:10 | Edited by: ivan79 
tom322:
Preview - it shows tags instead of formatted message, like:
[u]just test[/u]

You are right. I wrote wrong encode<->decode for unordered list. Thanks for note.

Here is download - MiniBB WYSIWYG addon

I made instructions on fly and hope there is no errors. If you want smilies images in editor without plugin just copy smilies.js in root and follow instructions. As you can see the most change is in main_post_form.html.

There is also instruction how to make editor without images.
Editor toolbar with images:
With images

Editor toolbar without images:
Without images

Color picker doesnt work. I tried to code<->decode following bbcode to make it work:
[font=rgb(0,0,255)]Text[/font]
or
[font=blue]Text[/font]
but I dont have success.

Author tom322
Registered
#10 | Posted: 15 Jun 2010 21:23 
That looks promising, at least you follow a professional way of making code + README and this addon could be useful for many. I assume core modification is only in bb_func_posthold.php file?

Still, I wonder if it would work correctly especially with the file_upload addon, maybe I'll test it in the next few days. If you find any bug in the meantime please re-upload the fixed files.

Thanks.

Author Paul
Lead Developer
#11 | Posted: 16 Jun 2010 02:58 
I doubt that you need WYSIWYG for "Posthold" form. "Posthold" is only for keeping the original text of the message if something went wrong (wrong l/p or flood protection or some other reason). Mostly users just have to wait and submit the same text, not to change it. So you don't have to modify "posthold" form for that.

Another problem with your WYSIWYG, is that it doesn't support Dynamic quotes of miniBB. This is when you highlight the text in a message, click "Quote" or "Reply", and it pastes selection with [quote] tag, or certain tagged username into the message form.

Currently when I click "Quote", it pastes just a simple text. You need to highlight it with a "Quote" button - too much work...

Also I'm almost sure it doesn't support "moving between messages", it means, when you clicked on "Quote" and replied in the message area, you could click "up arrow" icon near "Your Reply" subject and it will pull up the page to the last message which you quoted, i.e. where you stayed, so you could continue reading and replying.

Just to say once again... there are too many functions in miniBB which are planned exactly for a regular HTML form. This makes a lot of things much easier, and adds more functionality else if you would be tied up to WYSIWYG.

Author ivan79
Registered
#12 | Posted: 16 Jun 2010 06:29 | Edited by: ivan79 
tom322:
I assume core modification is only in bb_func_posthold.php file?

Thats only modifiction, but not necessary as Paul said. There is also few modification in bb_codes.php for [ui][il] but that code and button can be easily removed from editor.

Paul:
Currently when I click "Quote", it pastes just a simple text. You need to highlight it with a "Quote" button - too much work...

Yes I know about that problem. Currently I am trying to implement getElementById from specific row and send it to textarea with [ quote =[{$posterName}] {posterText} bbcode (and maybe with anchor). Unfortunately that will disable standard miniBB reply and quote function, but it can give the same/similiar result. In any case I plan to add an option where users can choose between 2 editors - default miniBB or WYSIWYG editor (it requires an extra 'WYSIWYG' Field in minibbtable_users or can be used user_custom field). Default will load ParseTpl(makeUp('main_post_form.html')) and with this editor ParseTpl(makeUp('main_post_form_wysiwyg.html')), but that requires small core modification.
I think it's great to have a mini (about 240kb) forum with WYSIWYG editor.

Also, if this doesnt work with some official Plugins I plan to stop the project if I cant find solution. But, currenly I'm not think about that. Anyway, while I was working on this at least I learned something and used it as an exercise for the (perhaps) some future projects.

While I was working on this addon, I watched not to change core modification.
Who wants this mod, can be installed (when it is finished) this addon and choose between 2 editors or not at all to install. :)

Thanks for reply.

Author ivan79
Registered
#13 | Posted: 17 Jun 2010 18:13 | Edited by: ivan79 
Editor updated.
Now "reply" and "quote" working and using basic miniBB function.
Colorpicker currently working only in HTML mod - editor switch (will fix this soon).
All function from form.js is now supported in WYSIWYG editor.
If you find any bugs please let me know.

P.S. how to reupload updated file in File Bank? I have only options to "Lookup" and "Move" file.
...
I cant upload this version. Maybe cause it contains .js files in zip.

Author tom322
Registered
#14 | Posted: 17 Jun 2010 19:47 
It looks more and more interesting. I see even gettopost() is working.

Suggestion regarding quotes - since it's WYSWIG maybe it would make sense to do it so that when text is between [quote]text[./quote] then the formatting is different rather than showing the [quote] tags.

Author Paul
Lead Developer
#15 | Posted: 18 Jun 2010 02:35 | Edited by: Paul 
ivan79:
how to reupload updated file in File Bank? I have only options to "Lookup" and "Move" file.

Click on the file icon in the files list.

Page  Page 1 of 2:  1  2  Next » 
Custom Tutorials and Modifications miniBB Support Forums / Custom Tutorials and Modifications / [DEV] MiniBB WYSIWYG editor Top

Your Reply Click this icon to move up to the quoted message

 Short link for this topic:

 ?
Only registered users are allowed to post here. Please, enter your username/password details upon posting a message, or register first.


Before posting, make sure your message is compliant with our forum posting rules. If not, it may be locked or deleted with no explanation.
 
 
miniBB Support Forums Powered by Forum Software miniBB ® Features  Requirements  Demo  Download  Showcase  Gallery of Arts
Compiler  Premium Extensions  Premium Support  License  Contacts
Try the Captcha add-on: protect your miniBB-forums from the automated spam and flood.
Captcha Addon for miniBB