Integrate Tinymce

Looking for a MOD? Have a MOD request? Post here for help. (Note: This forum is community supported; phpBB does not have official MOD authors)
Ideas Centre
ahmedmhb
Registered User
Posts: 7
Joined: Fri Aug 22, 2008 2:48 pm

Re: Integrate Tinymce

Post by ahmedmhb » Fri Sep 05, 2008 3:48 pm

no ....it stil the same , may be i did 'nt know how to add this codes
can you please post your overall_header code here ?

boyhohung
Registered User
Posts: 9
Joined: Sat Aug 16, 2008 3:34 am
Contact:

Re: Integrate Tinymce

Post by boyhohung » Sat Sep 06, 2008 7:24 pm

My fully report, this is exactly what i've done:

1/ Create bbcode.css, editor_plugin_src.js and tiny_mce.js from your code.
bbcode.css

Code: Select all

    span.quoteStyle
    {
      display: block;
      background: #ebeadd url("./images/quote.gif") no-repeat 5px 5px;
      border: 1px solid #dbdbce;
      margin: 0.5em 1px 0pt 25px;
      padding: 20px 5px 5px;
      overflow: hidden;
    }

    span.codeStyle
    {
      display: block;
      background-color: #ffffff;
      border: 1px solid #c9d2d8;
      padding: 3px;
      font-family: Monaco,"Andale Mono","Courier New",Courier,mono;
      color: #2e8b57;
    }
editor_plugin_src.js

Code: Select all

    /**
    * $Id: editor_plugin_src.js 201 2007-02-12 15:56:56Z spocke $
    *
    * @author Moxiecode
    * @copyright Copyright © 2004-2008, Moxiecode Systems AB, All rights reserved.
    */

    (function() {
       tinymce.create('tinymce.plugins.BBCodePlugin', {
          init : function(ed, url) {
             var t = this, dialect = ed.getParam('bbcode_dialect', 'punbb').toLowerCase();

             ed.onBeforeSetContent.add(function(ed, o) {
                o.content = t['_' + dialect + '_bbcode2html'](o.content);
             });

             ed.onPostProcess.add(function(ed, o) {
                if (o.set)
                   o.content = t['_' + dialect + '_bbcode2html'](o.content);

                if (o.get)
                   o.content = t['_' + dialect + '_html2bbcode'](o.content);
             });
          },

          getInfo : function() {
             return {
                longname : 'BBCode Plugin',
                author : 'Moxiecode Systems AB',
                authorurl : 'http://tinymce.moxiecode.com',
                infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/bbcode',
                version : tinymce.majorVersion + "." + tinymce.minorVersion
             };
          },

          // Private methods

          // HTML -> BBCode in PunBB dialect
          _punbb_html2bbcode : function(s) {
             s = tinymce.trim(s);

             function rep(re, str) {
                s = s.replace(re, str);
             };

             // example: <strong> to [b]
             rep(/<a.*?href=\"(.*?)\".*?>(.*?)<\/a>/gi,"[url=$1]$2[/url]");
             rep(/<font.*?color=\"(.*?)\".*?class=\"codeStyle\".*?>(.*?)<\/font>/gi,"[code][color=$1]$2[/color]
");
rep(/<font.*?color=\"(.*?)\".*?class=\"quoteStyle\".*?>(.*?)<\/font>/gi,"[quote][color=$1]$2[/color][/quote]");
rep(/<font.*?class=\"codeStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"

Code: Select all

[color=$1]$2[/color]
");
rep(/<font.*?class=\"quoteStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[quote][color=$1]$2[/color][/quote]");
rep(/<span style=\"color: ?(.*?);\">(.*?)<\/span>/gi,"[color=$1]$2[/color]");
rep(/<font.*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[color=$1]$2[/color]");
// font size
rep(/<span.*?style=\"font-size: 8px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 8px;\">(.*?)<\/font>/gi,"$1");
rep(/<span.*?style=\"font-size: 10px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 10px;\">(.*?)<\/font>/gi,"$1");
rep(/<span.*?style=\"font-size: 12px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 12px;\">(.*?)<\/font>/gi,"$1");
rep(/<span.*?style=\"font-size: 14px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 14px;\">(.*?)<\/font>/gi,"$1");
rep(/<span.*?style=\"font-size: 18px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 18px;\">(.*?)<\/font>/gi,"$1");
rep(/<span.*?style=\"font-size: 24px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 24px;\">(.*?)<\/font>/gi,"$1");
rep(/<span.*?style=\"font-size: 36px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 36px;\">(.*?)<\/font>/gi,"$1");
rep(/<font>(.*?)<\/font>/gi,"$1");
// emoticons
rep(/<img.*?src=\"images\/smilies\/icon_e_biggrin\.gif\".*?\/>/gi,":-D");
rep(/<img.*?src=\"images\/smilies\/icon_e_smile\.gif\".*?\/>/gi,":-)");
rep(/<img.*?src=\"images\/smilies\/icon_e_wink\.gif\".*?\/>/gi,";-)");
rep(/<img.*?src=\"images\/smilies\/icon_e_sad\.gif\".*?\/>/gi,":-(");
rep(/<img.*?src=\"images\/smilies\/icon_e_surprised\.gif\".*?\/>/gi,":-o");
rep(/<img.*?src=\"images\/smilies\/icon_e_eek\.gif\".*?\/>/gi,":shock:");
rep(/<img.*?src=\"images\/smilies\/icon_e_confused\.gif\".*?\/>/gi,":-?");
rep(/<img.*?src=\"images\/smilies\/icon_cool\.gif\".*?\/>/gi,"8-)");
rep(/<img.*?src=\"images\/smilies\/icon_lol\.gif\".*?\/>/gi,":lol:");
rep(/<img.*?src=\"images\/smilies\/icon_mad\.gif\".*?\/>/gi,":-x");
rep(/<img.*?src=\"images\/smilies\/icon_razz\.gif\".*?\/>/gi,":-p");
rep(/<img.*?src=\"images\/smilies\/icon_redface\.gif\".*?\/>/gi,":oops:");
rep(/<img.*?src=\"images\/smilies\/icon_cry\.gif\".*?\/>/gi,":cry:");
rep(/<img.*?src=\"images\/smilies\/icon_evil\.gif\".*?\/>/gi,":evil:");
rep(/<img.*?src=\"images\/smilies\/icon_twisted\.gif\".*?\/>/gi,":twisted:");
rep(/<img.*?src=\"images\/smilies\/icon_rolleyes\.gif\".*?\/>/gi,":roll:");
rep(/<img.*?src=\"images\/smilies\/icon_exclaim\.gif\".*?\/>/gi,":!:");
rep(/<img.*?src=\"images\/smilies\/icon_question\.gif\".*?\/>/gi,":?:");
rep(/<img.*?src=\"images\/smilies\/icon_arrow\.gif\".*?\/>/gi,":arrow:");
rep(/<img.*?src=\"images\/smilies\/icon_neutral\.gif\".*?\/>/gi,":-|");
rep(/<img.*?src=\"images\/smilies\/icon_mrgreen\.gif\".*?\/>/gi,":mrgreen:");
rep(/<img.*?src=\"images\/smilies\/icon_e_geek\.gif\".*?\/>/gi,":geek:");
rep(/<img.*?src=\"images\/smilies\/icon_e_ugeek\.gif\".*?\/>/gi,":ugeek:");
// lists
rep(/<ul[^>]*>(.*?)<\/ul>/gi,"
  • \n$1
");
rep(/<ol style="list-style-type: lower-alpha;">(.*?)<\/ol>/gi,"
  1. \n$1
");
rep(/<ol[^>]*>(.*?)<\/ol>/gi,"
  1. \n$1
");
rep(/<li>(.*?)<\/li>/gi,"[*]$1\n");
rep(/<img.*?src=\"(.*?)\".*?\/>/gi,"[img]$1[/img]");
rep(/<span class=\"codeStyle\">(.*?)<\/span>/gi,"

Code: Select all

$1
");
rep(/<span class=\"quoteStyle user_(.*?)\">(.*?)<\/span>/gi,"[quote=\"$1\"]$2[/quote]");
rep(/<span class=\"quoteStyle\">(.*?)<\/span>/gi,"[quote]$1[/quote]");
rep(/<strong class=\"codeStyle\">(.*?)<\/strong>/gi,"

Code: Select all

[b]$1[/b]
");
rep(/<strong class=\"quoteStyle\">(.*?)<\/strong>/gi,"[quote]$1[/quote]");
rep(/<em class=\"codeStyle\">(.*?)<\/em>/gi,"

Code: Select all

[i]$1[/i]
");
rep(/<em class=\"quoteStyle\">(.*?)<\/em>/gi,"[quote]$1[/quote]");
rep(/<u class=\"codeStyle\">(.*?)<\/u>/gi,"

Code: Select all

[u]$1[/u]
");
rep(/<u class=\"quoteStyle\">(.*?)<\/u>/gi,"[quote]$1[/quote]");
rep(/<\/(strong|b)>/gi,"[/b]");
rep(/<(strong|b)>/gi,"");
rep(/<\/(em|i)>/gi,"[/i]");
rep(/<(em|i)>/gi,"");
rep(/<\/u>/gi,"[/u]");
rep(/<span style=\"text-decoration: ?underline;\">(.*?)<\/span>/gi,"$1");
rep(/<u>/gi,"");
rep(/<blockquote[^>]*>/gi,"[quote]");
rep(/<\/blockquote>/gi,"[/quote]");
rep(/<br \/>/gi,"\n");
rep(/<br\/>/gi,"\n");
rep(/<br>/gi,"\n");
rep(/<p>/gi,"");
rep(/<\/p>/gi,"\n");
rep(/&nbsp;/gi," ");
rep(/"/gi,"\"");
rep(/</gi,"<");
rep(/>/gi,">");
rep(/&/gi,"&");

return s;
},

// BBCode -> HTML from PunBB dialect
_punbb_bbcode2html : function(s) {
s = tinymce.trim(s);

function rep(re, str) {
s = s.replace(re, str);
};

// example: to <strong>
rep(/\n/gi,"<br />");
rep(/\[b\]/gi,"<strong>");
rep(/\[\/b\]/gi,"</strong>");
rep(/\[i\]/gi,"<em>");
rep(/\[\/i\]/gi,"</em>");
rep(/\[u\]/gi,"<u>");
rep(/\[\/u\]/gi,"</u>");
rep(/\[url=([^\]]+)\](.*?)\[\/url\]/gi,"<a href=\"$1\">$2</a>");
rep(/\[url\](.*?)\[\/url\]/gi,"<a href=\"$1\">$1</a>");
rep(/\[img\](.*?)\[\/img\]/gi,"<img src=\"$1\" />");
rep(/\[color=(.*?)\](.*?)\[\/color\]/gi,"<font color=\"$1\">$2</font>");
rep(/\[code\](.*?)\[\/code\]/gi,"<span class=\"codeStyle\">$1</span>&nbsp;");
rep(/\[quote=\"(.*?)\"\](.*?)\[\/quote\]/gi,"<span class=\"quoteStyle user_$1\">$2</span>&nbsp;");
rep(/\[quote.*?\](.*?)\[\/quote\]/gi,"<span class=\"quoteStyle\">$1</span>&nbsp;");
// font size
rep(/\(.*?)\[\/size\]/gi,"<span style=\"font-size: 8px;\">$1</span>");
rep(/\(.*?)\[\/size\]/gi,"<span style=\"font-size: 10px;\">$1</span>");
rep(/\(.*?)\[\/size\]/gi,"<span style=\"font-size: 14px;\">$1</span>");
rep(/\(.*?)\[\/size\]/gi,"<span style=\"font-size: 18px;\">$1</span>");
// emoticons
rep(/:D/gi, "<img src=\"./images/smilies/icon_e_biggrin.gif\" />");
rep(/:-D/gi, "<img src=\"./images/smilies/icon_e_biggrin.gif\" />");
rep(/:grin:/gi, "<img src=\"./images/smilies/icon_e_biggrin.gif\" />");
rep(/:\)/gi, "<img src=\"./images/smilies/icon_e_smile.gif\" />");
rep(/:-\)/gi, "<img src=\"./images/smilies/icon_e_smile.gif\" />");
rep(/:smile:/gi, "<img src=\"./images/smilies/icon_e_smile.gif\" />");
rep(/;\)/gi, "<img src=\"./images/smilies/icon_e_wink.gif\" />");
rep(/;-\)/gi, "<img src=\"./images/smilies/icon_e_wink.gif\" />");
rep(/:wink:/gi, "<img src=\"./images/smilies/icon_e_wink.gif\" />");
rep(/:\(/gi, "<img src=\"./images/smilies/icon_e_sad.gif\" />");
rep(/:-\(/gi, "<img src=\"./images/smilies/icon_e_sad.gif\" />");
rep(/:sad:/gi, "<img src=\"./images/smilies/icon_e_sad.gif\" />");
rep(/:o/gi, "<img src=\"./images/smilies/icon_e_surprised.gif\" />");
rep(/:-o/gi, "<img src=\"./images/smilies/icon_e_surprised.gif\" />");
rep(/:eek:/gi, "<img src=\"./images/smilies/icon_e_surprised.gif\" />");
rep(/:shock:/gi, "<img src=\"./images/smilies/icon_e_eek.gif\" />");
rep(/:\?/gi, "<img src=\"./images/smilies/icon_e_confused.gif\" />");
rep(/:-\?/gi, "<img src=\"./images/smilies/icon_e_confused.gif\" />");
rep(/:\?\?\?:/gi, "<img src=\"./images/smilies/icon_e_confused.gif\" />");
rep(/8-\)/gi, "<img src=\"./images/smilies/icon_cool.gif\" />");
rep(/:cool:/gi, "<img src=\"./images/smilies/icon_cool.gif\" />");
rep(/:lol:/gi, "<img src=\"./images/smilies/icon_lol.gif\" />");
rep(/:x/gi, "<img src=\"./images/smilies/icon_mad.gif\" />");
rep(/:-x/gi, "<img src=\"./images/smilies/icon_mad.gif\" />");
rep(/:mad:/gi, "<img src=\"./images/smilies/icon_mad.gif\" />");
rep(/:p/gi, "<img src=\"./images/smilies/icon_razz.gif\" />");
rep(/:-p/gi, "<img src=\"./images/smilies/icon_razz.gif\" />");
rep(/:razz:/gi, "<img src=\"./images/smilies/icon_razz.gif\" />");
rep(/:oops:/gi, "<img src=\"./images/smilies/icon_redface.gif\" />");
rep(/:cry:/gi, "<img src=\"./images/smilies/icon_cry.gif\" />");
rep(/:evil:/gi, "<img src=\"./images/smilies/icon_evil.gif\" />");
rep(/:twisted:/gi, "<img src=\"./images/smilies/icon_twisted.gif\" />");
rep(/:roll:/gi, "<img src=\"./images/smilies/icon_rolleyes.gif\" />");
rep(/:\!:/gi, "<img src=\"./images/smilies/icon_exclaim.gif\" />");
rep(/:\?:/gi, "<img src=\"./images/smilies/icon_question.gif\" />");
rep(/:idea:/gi, "<img src=\"./images/smilies/icon_idea.gif\" />");
rep(/:arrow:/gi, "<img src=\"./images/smilies/icon_arrow.gif\" />");
rep(/:\|/gi, "<img src=\"./images/smilies/icon_neutral.gif\" />");
rep(/:-\|/gi, "<img src=\"./images/smilies/icon_neutral.gif\" />");
rep(/:mrgreen:/gi, "<img src=\"./images/smilies/icon_mrgreen.gif\" />");
rep(/:geek:/gi, "<img src=\"./images/smilies/icon_e_geek.gif\" />");
rep(/:ugeek:/gi, "<img src=\"./images/smilies/icon_e_ugeek.gif\" />");
// lists
rep(/\[list\](.*?)\[\/list\]/gi, "<ul><li>$1</li></ul>");
rep(/\
  • (.*?)\[\/list\]/gi, "<ol><li>$1</li></ol>");
    rep(/\
    • (.*?)\[\/list\]/gi, "<ol style=\"list-style-type: lower-alpha;\"><li>$1</li></ol>");
      rep(/\[\*\]/g, "</li><li>");
      // fix empty li's
      rep(/<li><br \/><\/li>/g, "");
      rep(/<li\/>/g, "");

      return s;
      }
      });

      // Register plugin
      tinymce.PluginManager.add('bbcode', tinymce.plugins.BBCodePlugin);
      })();
      [/code]

      tiny_mce.js

      Code: Select all

          tinyMCE.init({
             theme : "advanced",
             mode: "textareas",
             editor_selector : "rich",
             plugins : "bbcode,media",
             language : "it",
             theme_advanced_buttons1 : "bold,italic,underline,bullist,numlist,image,media,link,unlink,fontsizeselect,forecolor,undo,redo,removeformat",
             theme_advanced_buttons2 : "",
             theme_advanced_buttons3 : "",
             theme_advanced_toolbar_location : "top",
             theme_advanced_toolbar_align : "center",
             content_css : "styles/poste/theme/bbcode.css",
             convert_fonts_to_spans: true,
             font_size_style_values : "8,10,12,14,18,24,36",
             entity_encoding : "raw",
             add_unload_trigger : false,
             remove_linebreaks : false,
             setupcontent_callback : "inizia",
             media_types : "flash=swf"
          });
          function toggla(bb)
          {
             var bottone = document.getElementById('bottonecambia');
             if (tinyMCE.getInstanceById('message') != null)
             {
                tinyMCE.execCommand('mceRemoveControl', false, 'message');
                bb.style.display = '';
                bottone.removeChild(bottone.firstChild);
                bottone.appendChild(document.createTextNode('visual editor'));
             }
             else
             {
                tinyMCE.execCommand('mceAddControl', false, 'message');
                bb.style.display = 'none';
                bottone.removeChild(bottone.firstChild);
                bottone.appendChild(document.createTextNode('bb source'));
             }
          }
          function inizia(editor_id, body, doc)
          {
             rte = tinyMCE.getInstanceById(editor_id);
             var bb = document.getElementById('format-buttons');
             if (bb && bb.style.display != 'none')
             {
                bb.style.display = 'none';
                var sottobb = document.createElement('div');
                bb.parentNode.insertBefore(sottobb, bb.nextSibling);
                var a1 = document.createElement('a');
                a1.setAttribute('id', 'bottonecambia');
                a1.appendChild(document.createTextNode('bb source'));
                tinymce.dom.Event.add(a1, 'click', function(e) {toggla(bb);});
                sottobb.appendChild(a1);
             }
             var boxfaccine = document.getElementById('smiley-box');
             if (!boxfaccine)
             {
                return;
             }
             var imgs = boxfaccine.getElementsByTagName('img');
             var ia;
             for (var i = 0; i < imgs.length; i ++)
             {
                ia = imgs[i].parentNode;
                ia.onclick = null;
                ia.setAttribute('onclick', 'javascript:return false;');
                tinymce.dom.Event.add(ia, 'click', function(e) {
                   var bb = document.getElementById('format-buttons');
                   if (bb && bb.style.display != 'none') {
                      insert_text(e.target.alt, true);
                   } else {
                      rte.execCommand('mceInsertContent', false, rte.dom.createHTML('img', {src: e.target.src}));
                   }
                   tinymce.dom.Event.stop(e);
                });
             }
             rte.focus();
          }
      


      2/ Put 3 above files to right places:
      - Create directory: phpBB3\styles\subsilver2\template\tiny_mce\plugins\bbcode
      - Put editor_plugin_src.js in ( phpBB3\styles\subsilver2\template\tiny_mce\plugins\bbcode )
      - Put tiny_mce.js in ( phpBB3\styles\subsilver2\template\tiny_mce )
      - Put bbcode.css in ( phpBB3\styles\subsilver2\theme )


      3/ Edit file overall_header.html


      -Find:

      Code: Select all

      <script type="text/javascript">
      -Add before:

      Code: Select all

      <script type="text/javascript" src="{T_TEMPLATE_PATH}/tiny_mce/tiny_mce.js"></script>
      4/ Purge the cache

      ------------------------------------------------------------------------------------------
      Then, I try to use it.
      1/ I open a webpage (using FireFox), right click on an image and select "Copy Image" . Then, I open phpBB posting page, type something and press Ctrl + V => Nothing happened !
      2/ I open phpBB posting page, type a sentence , select that sentence and click Bold Text . Nothing happened but (b] and [/b] around the sentence.

      -----------------------------------------------------------------------------------------------
      After that, I go to menu Fire Fox : Tools -> Erro Console . I received this:

      tinyMCE is not defined:

      Code: Select all

      tinyMCE.init({
      Erro Parsing value for property 'background'. Declaration dropped

      --------------------------------------------------------------------------------------
      That's all. I hope this will help !
Please visit my website:
http://www.muadibanlai.net - Proud to be Open Source !

User avatar
garak
Registered User
Posts: 57
Joined: Wed Jul 23, 2008 12:48 pm
Location: Rome, Italy
Name: Massimiliano Arione
Contact:

Re: Integrate Tinymce

Post by garak » Sun Sep 07, 2008 7:04 am

boyhohung, you just missed the main thing: download TinyMCE ;)
My tiny_mce.js file is just a configuration file: you can "include" it in overall_header, but only after "inclued" TinyMCE itself.
And you don't need to create plugin/bcode directory, it comes with TinyMCE package.

faldoroc
Registered User
Posts: 11
Joined: Mon Sep 08, 2008 8:09 am

Re: Integrate Tinymce

Post by faldoroc » Mon Sep 08, 2008 9:21 am

This topic looks promising, considering all other atempts of integrating WYSIWYG into phpbb has failed. FCK came close to pulling it of but got messed up with the 3.0.2-release of PHPBB.

So, i would really suggest creating a small instruction, all you've done so far is posting modified files...modifying those files won't integrate the editor into phpbb by itself.

Do we just extract TinyMCE in the root?
Could you give us a hint on how to install TinyMCE?
Would you mind explaining what to do befrore and after modifing those files?
Are we suposed to replace the entire content of the original files with your code?
Where should we put those files?
How do we convert the original editor to TinyMCE?

well, i think you're getting my point... some of us can't read your mind and most of us arn't wizards.
Thanks for your time.
Last edited by faldoroc on Mon Sep 08, 2008 9:44 am, edited 2 times in total.

User avatar
garak
Registered User
Posts: 57
Joined: Wed Jul 23, 2008 12:48 pm
Location: Rome, Italy
Name: Massimiliano Arione
Contact:

Re: Integrate Tinymce

Post by garak » Mon Sep 08, 2008 9:31 am


mrm_loader
Registered User
Posts: 1
Joined: Fri Dec 04, 2009 6:03 am

Re: Integrate Tinymce

Post by mrm_loader » Fri Dec 04, 2009 7:32 am

garak wrote:[UPDATED!]
I managed to integrate phpbb3 and tinyMCE.
Here is my modified editor_plugin_src.js for bbcode plugin

Code: Select all

/**
 * $Id: editor_plugin_src.js 201 2007-02-12 15:56:56Z spocke $
 *
 * @author Moxiecode
 * @copyright Copyright © 2004-2008, Moxiecode Systems AB, All rights reserved.
 */

(function() {
	tinymce.create('tinymce.plugins.BBCodePlugin', {
		init : function(ed, url) {
			var t = this, dialect = ed.getParam('bbcode_dialect', 'punbb').toLowerCase();

			ed.onBeforeSetContent.add(function(ed, o) {
				o.content = t['_' + dialect + '_bbcode2html'](o.content);
			});

			ed.onPostProcess.add(function(ed, o) {
				if (o.set)
					o.content = t['_' + dialect + '_bbcode2html'](o.content);

				if (o.get)
					o.content = t['_' + dialect + '_html2bbcode'](o.content);
			});
		},

		getInfo : function() {
			return {
				longname : 'BBCode Plugin',
				author : 'Moxiecode Systems AB',
				authorurl : 'http://tinymce.moxiecode.com',
				infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/bbcode',
				version : tinymce.majorVersion + "." + tinymce.minorVersion
			};
		},

		// Private methods

		// HTML -> BBCode in PunBB dialect
		_punbb_html2bbcode : function(s) {
			s = tinymce.trim(s);

			function rep(re, str) {
				s = s.replace(re, str);
			};

			// example: <strong> to [b]
			rep(/<a.*?href=\"(.*?)\".*?>(.*?)<\/a>/gi,"[url=$1]$2[/url]");
			rep(/<font.*?color=\"(.*?)\".*?class=\"codeStyle\".*?>(.*?)<\/font>/gi,"[code][color=$1]$2[/color]
");
rep(/<font.*?color=\"(.*?)\".*?class=\"quoteStyle\".*?>(.*?)<\/font>/gi,"
[color=$1]$2[/color]
");
rep(/<font.*?class=\"codeStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"

Code: Select all

[color=$1]$2[/color]
");
rep(/<font.*?class=\"quoteStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"
[color=$1]$2[/color]
");
rep(/<span style=\"color: ?(.*?);\">(.*?)<\/span>/gi,"[color=$1]$2[/color]");
rep(/<font.*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[color=$1]$2[/color]");
// font size
rep(/<span.*?style=\"font-size: 8px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 8px;\">(.*?)<\/font>/gi,"$1");
rep(/<span.*?style=\"font-size: 10px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 10px;\">(.*?)<\/font>/gi,"$1");
rep(/<span.*?style=\"font-size: 12px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 12px;\">(.*?)<\/font>/gi,"$1");
rep(/<span.*?style=\"font-size: 14px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 14px;\">(.*?)<\/font>/gi,"$1");
rep(/<span.*?style=\"font-size: 18px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 18px;\">(.*?)<\/font>/gi,"$1");
rep(/<span.*?style=\"font-size: 24px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 24px;\">(.*?)<\/font>/gi,"$1");
rep(/<span.*?style=\"font-size: 36px;\">(.*?)<\/span>/gi,"$1");
rep(/<font.*?style=\"font-size: 36px;\">(.*?)<\/font>/gi,"$1");
rep(/<font>(.*?)<\/font>/gi,"$1");
// emoticons
rep(/<img.*?src=\"images\/smilies\/icon_e_biggrin\.gif\".*?\/>/gi,":-D");
rep(/<img.*?src=\"images\/smilies\/icon_e_smile\.gif\".*?\/>/gi,":-)");
rep(/<img.*?src=\"images\/smilies\/icon_e_wink\.gif\".*?\/>/gi,";-)");
rep(/<img.*?src=\"images\/smilies\/icon_e_sad\.gif\".*?\/>/gi,":-(");
rep(/<img.*?src=\"images\/smilies\/icon_e_surprised\.gif\".*?\/>/gi,":-o");
rep(/<img.*?src=\"images\/smilies\/icon_e_eek\.gif\".*?\/>/gi,":shock:");
rep(/<img.*?src=\"images\/smilies\/icon_e_confused\.gif\".*?\/>/gi,":-?");
rep(/<img.*?src=\"images\/smilies\/icon_cool\.gif\".*?\/>/gi,"8-)");
rep(/<img.*?src=\"images\/smilies\/icon_lol\.gif\".*?\/>/gi,":lol:");
rep(/<img.*?src=\"images\/smilies\/icon_mad\.gif\".*?\/>/gi,":-x");
rep(/<img.*?src=\"images\/smilies\/icon_razz\.gif\".*?\/>/gi,":-p");
rep(/<img.*?src=\"images\/smilies\/icon_redface\.gif\".*?\/>/gi,":oops:");
rep(/<img.*?src=\"images\/smilies\/icon_cry\.gif\".*?\/>/gi,":cry:");
rep(/<img.*?src=\"images\/smilies\/icon_evil\.gif\".*?\/>/gi,":evil:");
rep(/<img.*?src=\"images\/smilies\/icon_twisted\.gif\".*?\/>/gi,":twisted:");
rep(/<img.*?src=\"images\/smilies\/icon_rolleyes\.gif\".*?\/>/gi,":roll:");
rep(/<img.*?src=\"images\/smilies\/icon_exclaim\.gif\".*?\/>/gi,":!:");
rep(/<img.*?src=\"images\/smilies\/icon_question\.gif\".*?\/>/gi,":?:");
rep(/<img.*?src=\"images\/smilies\/icon_arrow\.gif\".*?\/>/gi,":arrow:");
rep(/<img.*?src=\"images\/smilies\/icon_neutral\.gif\".*?\/>/gi,":-|");
rep(/<img.*?src=\"images\/smilies\/icon_mrgreen\.gif\".*?\/>/gi,":mrgreen:");
rep(/<img.*?src=\"images\/smilies\/icon_e_geek\.gif\".*?\/>/gi,":geek:");
rep(/<img.*?src=\"images\/smilies\/icon_e_ugeek\.gif\".*?\/>/gi,":ugeek:");
// lists
rep(/<ul[^>]*>(.*?)<\/ul>/gi,"
  • \n$1
");
rep(/<ol style="list-style-type: lower-alpha;">(.*?)<\/ol>/gi,"
  1. \n$1
");
rep(/<ol[^>]*>(.*?)<\/ol>/gi,"
  1. \n$1
");
rep(/<li>(.*?)<\/li>/gi,"[*]$1\n");
rep(/<img.*?src=\"(.*?)\".*?\/>/gi,"[img]$1[/img]");
rep(/<span class=\"codeStyle\">(.*?)<\/span>/gi,"

Code: Select all

$1
");
rep(/<span class=\"quoteStyle user_(.*?)\">(.*?)<\/span>/gi,"
\"$1\" wrote:$2
");
rep(/<span class=\"quoteStyle\">(.*?)<\/span>/gi,"
$1
");
rep(/<strong class=\"codeStyle\">(.*?)<\/strong>/gi,"

Code: Select all

[b]$1[/b]
");
rep(/<strong class=\"quoteStyle\">(.*?)<\/strong>/gi,"
$1
");
rep(/<em class=\"codeStyle\">(.*?)<\/em>/gi,"

Code: Select all

[i]$1[/i]
");
rep(/<em class=\"quoteStyle\">(.*?)<\/em>/gi,"
$1
");
rep(/<u class=\"codeStyle\">(.*?)<\/u>/gi,"

Code: Select all

[u]$1[/u]
");
rep(/<u class=\"quoteStyle\">(.*?)<\/u>/gi,"
$1
");
rep(/<\/(strong|b)>/gi,"[/b]");
rep(/<(strong|b)>/gi,"");
rep(/<\/(em|i)>/gi,"[/i]");
rep(/<(em|i)>/gi,"");
rep(/<\/u>/gi,"[/u]");
rep(/<span style=\"text-decoration: ?underline;\">(.*?)<\/span>/gi,"$1");
rep(/<u>/gi,"");
rep(/<blockquote[^>]*>/gi,"
");
rep(/<\/blockquote>/gi,"
");
rep(/<br \/>/gi,"\n");
rep(/<br\/>/gi,"\n");
rep(/<br>/gi,"\n");
rep(/<p>/gi,"");
rep(/<\/p>/gi,"\n");
rep(/&nbsp;/gi," ");
rep(/"/gi,"\"");
rep(/</gi,"<");
rep(/>/gi,">");
rep(/&/gi,"&");

return s;
},

// BBCode -> HTML from PunBB dialect
_punbb_bbcode2html : function(s) {
s = tinymce.trim(s);

function rep(re, str) {
s = s.replace(re, str);
};

// example: to <strong>
rep(/\n/gi,"<br />");
rep(/\[b\]/gi,"<strong>");
rep(/\[\/b\]/gi,"</strong>");
rep(/\[i\]/gi,"<em>");
rep(/\[\/i\]/gi,"</em>");
rep(/\[u\]/gi,"<u>");
rep(/\[\/u\]/gi,"</u>");
rep(/\[url=([^\]]+)\](.*?)\[\/url\]/gi,"<a href=\"$1\">$2</a>");
rep(/\[url\](.*?)\[\/url\]/gi,"<a href=\"$1\">$1</a>");
rep(/\[img\](.*?)\[\/img\]/gi,"<img src=\"$1\" />");
rep(/\[color=(.*?)\](.*?)\[\/color\]/gi,"<font color=\"$1\">$2</font>");
rep(/\[code\](.*?)\[\/code\]/gi,"<span class=\"codeStyle\">$1</span>&nbsp;");
rep(/\
\"(.*?)\"\ wrote:(.*?)\[\/quote\]/gi,"<span class=\"quoteStyle user_$1\">$2</span>&nbsp;");
rep(/\[quote.*?\](.*?)\[\/quote\]/gi,"<span class=\"quoteStyle\">$1</span>&nbsp;");
// font size
rep(/\(.*?)\[\/size\]/gi,"<span style=\"font-size: 8px;\">$1</span>");
rep(/\(.*?)\[\/size\]/gi,"<span style=\"font-size: 10px;\">$1</span>");
rep(/\(.*?)\[\/size\]/gi,"<span style=\"font-size: 14px;\">$1</span>");
rep(/\(.*?)\[\/size\]/gi,"<span style=\"font-size: 18px;\">$1</span>");
// emoticons
rep(/:D/gi, "<img src=\"./images/smilies/icon_e_biggrin.gif\" />");
rep(/:-D/gi, "<img src=\"./images/smilies/icon_e_biggrin.gif\" />");
rep(/:grin:/gi, "<img src=\"./images/smilies/icon_e_biggrin.gif\" />");
rep(/:\)/gi, "<img src=\"./images/smilies/icon_e_smile.gif\" />");
rep(/:-\)/gi, "<img src=\"./images/smilies/icon_e_smile.gif\" />");
rep(/:smile:/gi, "<img src=\"./images/smilies/icon_e_smile.gif\" />");
rep(/;\)/gi, "<img src=\"./images/smilies/icon_e_wink.gif\" />");
rep(/;-\)/gi, "<img src=\"./images/smilies/icon_e_wink.gif\" />");
rep(/:wink:/gi, "<img src=\"./images/smilies/icon_e_wink.gif\" />");
rep(/:\(/gi, "<img src=\"./images/smilies/icon_e_sad.gif\" />");
rep(/:-\(/gi, "<img src=\"./images/smilies/icon_e_sad.gif\" />");
rep(/:sad:/gi, "<img src=\"./images/smilies/icon_e_sad.gif\" />");
rep(/:o/gi, "<img src=\"./images/smilies/icon_e_surprised.gif\" />");
rep(/:-o/gi, "<img src=\"./images/smilies/icon_e_surprised.gif\" />");
rep(/:eek:/gi, "<img src=\"./images/smilies/icon_e_surprised.gif\" />");
rep(/:shock:/gi, "<img src=\"./images/smilies/icon_e_eek.gif\" />");
rep(/:\?/gi, "<img src=\"./images/smilies/icon_e_confused.gif\" />");
rep(/:-\?/gi, "<img src=\"./images/smilies/icon_e_confused.gif\" />");
rep(/:\?\?\?:/gi, "<img src=\"./images/smilies/icon_e_confused.gif\" />");
rep(/8-\)/gi, "<img src=\"./images/smilies/icon_cool.gif\" />");
rep(/:cool:/gi, "<img src=\"./images/smilies/icon_cool.gif\" />");
rep(/:lol:/gi, "<img src=\"./images/smilies/icon_lol.gif\" />");
rep(/:x/gi, "<img src=\"./images/smilies/icon_mad.gif\" />");
rep(/:-x/gi, "<img src=\"./images/smilies/icon_mad.gif\" />");
rep(/:mad:/gi, "<img src=\"./images/smilies/icon_mad.gif\" />");
rep(/:p/gi, "<img src=\"./images/smilies/icon_razz.gif\" />");
rep(/:-p/gi, "<img src=\"./images/smilies/icon_razz.gif\" />");
rep(/:razz:/gi, "<img src=\"./images/smilies/icon_razz.gif\" />");
rep(/:oops:/gi, "<img src=\"./images/smilies/icon_redface.gif\" />");
rep(/:cry:/gi, "<img src=\"./images/smilies/icon_cry.gif\" />");
rep(/:evil:/gi, "<img src=\"./images/smilies/icon_evil.gif\" />");
rep(/:twisted:/gi, "<img src=\"./images/smilies/icon_twisted.gif\" />");
rep(/:roll:/gi, "<img src=\"./images/smilies/icon_rolleyes.gif\" />");
rep(/:\!:/gi, "<img src=\"./images/smilies/icon_exclaim.gif\" />");
rep(/:\?:/gi, "<img src=\"./images/smilies/icon_question.gif\" />");
rep(/:idea:/gi, "<img src=\"./images/smilies/icon_idea.gif\" />");
rep(/:arrow:/gi, "<img src=\"./images/smilies/icon_arrow.gif\" />");
rep(/:\|/gi, "<img src=\"./images/smilies/icon_neutral.gif\" />");
rep(/:-\|/gi, "<img src=\"./images/smilies/icon_neutral.gif\" />");
rep(/:mrgreen:/gi, "<img src=\"./images/smilies/icon_mrgreen.gif\" />");
rep(/:geek:/gi, "<img src=\"./images/smilies/icon_e_geek.gif\" />");
rep(/:ugeek:/gi, "<img src=\"./images/smilies/icon_e_ugeek.gif\" />");
// lists
rep(/\[list\](.*?)\[\/list\]/gi, "<ul><li>$1</li></ul>");
rep(/\
  • (.*?)\[\/list\]/gi, "<ol><li>$1</li></ol>");
    rep(/\
    • (.*?)\[\/list\]/gi, "<ol style=\"list-style-type: lower-alpha;\"><li>$1</li></ol>");
      rep(/\[\*\]/g, "</li><li>");
      // fix empty li's
      rep(/<li><br \/><\/li>/g, "");
      rep(/<li\/>/g, "");

      return s;
      }
      });

      // Register plugin
      tinymce.PluginManager.add('bbcode', tinymce.plugins.BBCodePlugin);
      })();
      [/code]

      this is bbcode.css (needed for quote and code):

      Code: Select all

      span.quoteStyle
      {
        display: block;
        background: #ebeadd url("./images/quote.gif") no-repeat 5px 5px;
        border: 1px solid #dbdbce;
        margin: 0.5em 1px 0pt 25px;
        padding: 20px 5px 5px;
        overflow: hidden;
      }
      
      span.codeStyle
      {
        display: block;
        background-color: #ffffff;
        border: 1px solid #c9d2d8;
        padding: 3px;
        font-family: Monaco,"Andale Mono","Courier New",Courier,mono;
        color: #2e8b57;
      }
      finally, this is js code to init tinyMCE:

      Code: Select all

      tinyMCE.init({
      	theme : "advanced",
      	mode: "textareas",
      	editor_selector : "rich",
      	plugins : "bbcode,media",
      	language : "it",
      	theme_advanced_buttons1 : "bold,italic,underline,bullist,numlist,image,media,link,unlink,fontsizeselect,forecolor,undo,redo,removeformat",
      	theme_advanced_buttons2 : "",
      	theme_advanced_buttons3 : "",
      	theme_advanced_toolbar_location : "top",
      	theme_advanced_toolbar_align : "center",
      	content_css : "styles/poste/theme/bbcode.css",
      	convert_fonts_to_spans: true,
      	font_size_style_values : "8,10,12,14,18,24,36",
      	entity_encoding : "raw",
      	add_unload_trigger : false,
      	remove_linebreaks : false,
      	setupcontent_callback : "inizia",
      	media_types : "flash=swf"
      });
      function toggla(bb)
      {
      	var bottone = document.getElementById('bottonecambia');
      	if (tinyMCE.getInstanceById('message') != null)
      	{
      		tinyMCE.execCommand('mceRemoveControl', false, 'message');
      		bb.style.display = '';
      		bottone.removeChild(bottone.firstChild);
      		bottone.appendChild(document.createTextNode('visual editor'));
      	}
      	else
      	{
      		tinyMCE.execCommand('mceAddControl', false, 'message');
      		bb.style.display = 'none';
      		bottone.removeChild(bottone.firstChild);
      		bottone.appendChild(document.createTextNode('bb source'));
      	}
      }
      function inizia(editor_id, body, doc)
      {
      	rte = tinyMCE.getInstanceById(editor_id);
      	var bb = document.getElementById('format-buttons');
      	if (bb && bb.style.display != 'none')
      	{
      		bb.style.display = 'none';
      		var sottobb = document.createElement('div');
      		bb.parentNode.insertBefore(sottobb, bb.nextSibling);
      		var a1 = document.createElement('a');
      		a1.setAttribute('id', 'bottonecambia');
      		a1.appendChild(document.createTextNode('bb source'));
      		tinymce.dom.Event.add(a1, 'click', function(e) {toggla(bb);});
      		sottobb.appendChild(a1);
      	}
      	var boxfaccine = document.getElementById('smiley-box');
      	if (!boxfaccine)
      	{
      		return;
      	}
      	var imgs = boxfaccine.getElementsByTagName('img');
      	var ia;
      	for (var i = 0; i < imgs.length; i ++)
      	{
      		ia = imgs[i].parentNode;
      		ia.onclick = null;
      		ia.setAttribute('onclick', 'javascript:return false;');
      		tinymce.dom.Event.add(ia, 'click', function(e) {
      			var bb = document.getElementById('format-buttons');
      			if (bb && bb.style.display != 'none') {
      				insert_text(e.target.alt, true);
      			} else {
      				rte.execCommand('mceInsertContent', false, rte.dom.createHTML('img', {src: e.target.src}));
      			}
      			tinymce.dom.Event.stop(e);
      		});
      	}
      	rte.focus();
      }
      
      There's still something to fix:

      The source for editor plugin is a bit ugly: it would be much better to create new methods for phpbb dialect, but I'm a lazy guy :-)
      There's a mismatch between font sizes: phpbb has only 5 sizes, while tinyMCE has 7 (in my solution, last two are converted in the same size as fifth)
      The list of emoticons is standard for prosilver theme: if you change icons theme, or modify that one, you must adapt js code in plugin.


plz tall me where this js code added.........................

User avatar
quahappy
Former Team Member
Posts: 1416
Joined: Tue Dec 12, 2006 8:19 pm
Location: South Yorkshire
Name: Andy Green

Re: Integrate Tinymce

Post by quahappy » Fri Dec 04, 2009 2:18 pm

mrm_loader wrote:plz tall me where this js code added.........................
You would be better off asking here as it supersedes this topic.
If you don't ask.....

Locked

Return to “[3.0.x] MOD Requests”

Who is online

Users browsing this forum: No registered users and 17 guests