Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Wysiwyg BBCode Editor: Tutorial to integrating TinyMCE 3.2.1.1 with Mybb 1.4
#1
Yes, the latest Opensource Wysiwyg Text Editor "TinyMCE" does support BBC, without the need to enable HTML permission - a known security risk.

Docs >> http://wiki.moxiecode.com/index.php/Tiny...on_Example

Quote:You Don´t need to modify any mybb or tinyMCE core files.

Then you can use a Theme "A" with wysiwyg enabled and other "B" with default editor.

Just make the code edits in mybb templates and upload tinyMCE core files to the right path.

Tutorial by Claudio (AgliOEoliO) - www.agleoeoleo.org

Installation

1. Download TinyMCE 2.3.1.1 stable here
2. Unpack the complete "tiny_mce" folder in the "\jscript\" folder of your forum - to look like this: "www.yoursite.com/forum/jscript/tiny_mce/"
3. Follow the Template edits and test yourself in a test/non-production forum.

- The attached Files have the Template changes basic integration.
- Note that my original templates don´t have any plugins installed - this is why I suggest to make your own template backups or go testing in a default/test theme..

There is no demo at this time, see pictures bellow from my Xampplite (localhost) test

English (from this tutorial) interface
[Image: english-interface.jpg]

Portuguese interface:
[Image: wysiwyg-bbcode-mybb.jpg]
[Image: bbcode-preview.jpg]

Features:
- BBCode support - no html parsing needed to wysiwyg
- "Search and Replace" function wich is awesome to fix broken code
- Custom BBCode could be used in "Edit HTML Source" window
- Multiquote is OK as far as I´ve tested...
- IE7, Opera 9.5, Safari 3.1 and Firefox 3 compatible

Know bugs/limitations:
- styles (CSS) in wysiwyg form is using TinyMCE skin/plugin configuration - so Quote/Code won´t show accordly (check "Edit HTML Source" they will be there)
- Smilies couldn´t be used in Popup and won't be shown in wysiwyg form - in Preview post will be OK - My solution: Link with target=_blank the file "misc.php?action=smilies" in the "get more" link
- 140kb+ file loading (jscripts/tiny_mce/tiny_mce.js) in html HEAD section of edited pages (not true if you get gzip version) - but it´s cached by the browser, so it´s not that much pain.
- multiquote it´s OK, but user/link back is not working
- Font size it´s like:
[size= x-small]some text[/size]
so use "Search and Replace" function to fix that space in size= blablabla - then after the 1st post preview not Font size wysiwyg anymore

Tips:
- TinyMCE has Language and RTL support. Visit this page to get informed about it.
- Download lang. files here
- There is a gzip function to cache tinyMCE called "Compressor" - read my "custom code" to see the example - wich uses "lang" function too

Credits
Full credits to TinyMCE and Mybb Developers. This is my 10min contribution using 2 well documented software like them both are - there was no need to edit core files of any sort

Thanks to Evilito (HotEditor 1.2.x updates) and SaeedGh (Anelectron wysiwyg for 1.4.x) for their effort in share this same type of integration/tutorials that I used so many times...

any tips on how to integrate TinyMCE better (Quote Link backs, Quote and Code correct Preview, Smilies integration, etc.) will be much appreciated - my english is very poor so I hope the tutorials are clear enough to help someone Smile


Attached Files
.zip   templates_changes_mybb144_tinymce3211.zip (Size: 5.64 KB / Downloads: 1,033)
Reply
#2
can TinyMCE 3.2.1.1 work with mybb 1.2.14 ?
IN THE LAND OF THE BLIND THE ONE EYED MAY IS KING

www.modern2day.com

Knowledge is Power..
Reply
#3
You can try to install it with this tutorial if templates are similar

like I said, there are only template changes, "zero" editing in core files of mybb/tinymce.

Just be sure to make a backup of your Theme before trying yourself Wink
Reply
#4
Thank you aglioeolio your the best.

Now i add Wysiwyg BBCode Editor (TinyMCE 3.2.1.1) to mybb 1.2.14 and everything work fine. But if you can tell me plz how i add YOUTUBE [Image: youtube_icon_T.png] button to Wysiwyg Editor? and also how can i custom toolbar button?
IN THE LAND OF THE BLIND THE ONE EYED MAY IS KING

www.modern2day.com

Knowledge is Power..
Reply
#5
to add custom buttons you need to modify javascript (core file) from TinyMCE - That´s why I keep my mind in security/stability in not editing any of this in my TUtorial...

as I don´t have enough knowledge to keep things "secure and clean" when core files were edited, I´ll wait to someone else post here to help - most mybb plugin developers are ignoring this feature so far Sad
Reply
#6
copy/paste html error :|
Reply
#7
(02-03-2009, 07:35 AM)JohnD Wrote: copy/paste html error :|

use Ctrl+V in the "Paste as Plain Text" button Wink
Reply
#8
Thanks this will be great
Reply
#9
copy/paste html error
html no problem but the phrase does not work: (in a very simple editor, in the meantime thank youSmile
Do not excuse my little english ;D
Reply
#10
oh its very good editor
but the editor isnt complete
i mean the buttons are not all
in the example there is a alignment buttons
but in my editor there is not

how can i use the full editor

thanks for it dude
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)