Page 1 of 12

[ABD] TinyMCE integration

Posted: Mon Sep 08, 2008 12:38 pm
by garak
Modification Name: TinyMCE integration
Author: Garak
Modification Description:: Integrate TinyMCE WYSIWYG editor in the posting textarea.
Modification Version:: 0.4.3
Requirements: TinyMCE 3.2.0.2 or above
Screenshots: example screenshot (sorry it's in italian)
New!: since 0.2 version, font size is working properly

Instructions

1 - download TinyMCE (Note: this MOD was tested with version 3.2.0.2, any later 3.2.X version should work). Optional: download language pack for a localized version (in this case, please notice comments inside config file at step 5)

2 - unzip tiny_mce directory (Note: it's NOT the main directory) under styles/prosilver/template/
So, you should have a directory named styles/prosilver/template/tiny_mce (Note: this mod could work with other themes also, but it's untested)

3 - open file styles/prosilver/template/tiny_mce/plugins/bbcode/editor_plugin.js and replace its content with the following

Code: Select all

/**
* $Id: editor_plugin_src.js 201 2007-02-12 15:56:56Z spocke $
*
* @author Moxiecode
* @author Garak [email protected]
* @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(/<blockquote><div><cite><\/cite>(.*?)<\/div><\/blockquote>/gi,"[quote]$1[/quote]");
      rep(/<blockquote><div><cite>(.*?) wrote:<\/cite>(.*?)<\/div><\/blockquote>/gi,"[quote=\"$1\"]$2[/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: (\d{2,3})%;\">(.*?)<\/span>/gi,"[size=$1]$2[/size]");
      rep(/<span style=\"font-size: (\d{2,3})%; color: ?(.*?);\">(.*?)<\/span>/gi,"[size=$1][color=$2]$3[/color][/size]");
      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,"[list]\n$1[/list]");
      rep(/<ol style="list-style-type: lower-alpha;">(.*?)<\/ol>/gi,"[list=a]\n$1[/list]");
      rep(/<ol[^>]*>(.*?)<\/ol>/gi,"[list=1]\n$1[/list]");
      rep(/<li>(.*?)<\/li>/gi,"[*]$1\n");
      rep(/<img.*?src=\"(.*?)\".*?\/>/gi,"[img]$1[/img]");
      rep(/<dl class=\"codebox\"><dt>Code: <a href=\"#\" onclick=\"selectCode(this); return false;\">Select all<\/a><\/dt><dd><code>(.*?)<br \/><\/code><\/dd><\/dl>/gi,"[code]$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,"[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,"<dl class=\"codebox\"><dt>Code: <a href=\"#\" onclick=\"return false;\">Select all<\/a><\/dt><dd><code>$1<br \/><\/code><\/dd><\/dl>&nbsp;");
rep(/\[quote=\"(.*?)\"\](.*?)\[\/quote\]/gi,"<blockquote><div><cite>$1 wrote:<\/cite>$2<\/div><\/blockquote><br />");
rep(/\[quote.*?\](.*?)\[\/quote\]/gi,"<blockquote><div><cite><\/cite>$1<\/div><\/blockquote><br />");
// font size
rep(/\(.*?)\[\/size\]/gi,"<span style=\"font-size: 50%;\">$1</span>");
rep(/\(.*?)\[\/size\]/gi,"<span style=\"font-size: 85%;\">$1</span>");
rep(/\(.*?)\[\/size\]/gi,"<span style=\"font-size: 150%;\">$1</span>");
rep(/\(.*?)\[\/size\]/gi,"<span style=\"font-size: 200%;\">$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]

      4 - create a file styles/prosilver/theme/bbcode.css and insert the following content

      Code: Select all

      blockquote {
        font-size: 0.95em;
        background: none no-repeat scroll 6px 8px #EBEBEB;
        background-color: #EBEADD;
        background-image: url("./images/quote.gif");
        border: 1px solid #DBDBDB;
        margin: 0.5em 1px 0 25px;
        overflow: hidden;
        padding: 5px;
      }
      
      blockquote cite {
        display: block;
        font-size: 0.9em;
        font-style: normal;
        font-weight: bold;
        margin-left: 20px;
      }
      
      dl.codebox  {
        background-color: #FFFFFF;
        border: 1px solid #D8D8D8;
        font-size: 1em;
        padding: 3px;
      }
      
      dl.codebox dt {
        border-bottom: 1px solid #CCCCCC;
        display: block;
        font-size: 0.8em;
        font-weight: bold;
        margin-bottom: 3px;
        text-transform: uppercase;
      }
      
      dl.codebox code {
        color:#2E8B57;
        display: block;
        font: 0.9em/1.3em Monaco,"Andale Mono","Courier New",Courier,mono;
        height: auto;
        margin: 2px 0;
        max-height: 200px;
        overflow: auto;
        padding-top: 5px;
        white-space: normal;
      }
      
      5 - create a file styles/prosilver/template/tiny_mce_config.js and insert the following content (adapting the language option)

      Code: Select all

      tinyMCE.init({
        theme : "advanced",
        mode: "textareas",
        editor_selector : "rich",
        plugins : "bbcode",
        /* for a localized version: install your language file, uncomment next line and adapt it */
        /* language : "it", */
        theme_advanced_buttons1 : "bold,italic,underline,bullist,numlist,image,link,unlink,fontsizeselect,forecolor,justifyleft,justifycenter,justifyright,justifyfull,undo,redo,removeformat",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "center",
        /* for a localized version: you should adapt next line by translating texts */
        theme_advanced_font_sizes : "tiny=50%,small=85%,normal=100%,big=150%,huge=200%",
        content_css : "styles/prosilver/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",
        force_p_newlines : false,
        forced_root_block : false,
        //convert_fonts_to_spans : false,
        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;
          if (ia.getAttribute('onclick') == 'javascript:return false;') {
            continue;
          }
          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();
      }
      
      6 - edit styles/prosilver/template/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>
      <script type="text/javascript" src="{T_TEMPLATE_PATH}/tiny_mce_config.js"></script>
      
      7 - edit styles/prosilver/template/posting_editor.html

      - Find

      Code: Select all

      <textarea <!-- IF S_UCP_ACTION and not S_PRIVMSGS and not S_EDIT_DRAFT -->name="signature" id="signature" style="height: 9em;"<!-- ELSE -->name="message" id="message"<!-- ENDIF --> rows="15" cols="76" tabindex="3" o    nselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" class="inputbox">{MESSAGE}{DRAF _MESSAGE}{SIGNATURE}</textarea>
      


      - Replace with

      Code: Select all

      <textarea class="rich" <!-- IF S_UCP_ACTION and not S_PRIVMSGS and not S_EDIT_DRAFT -->name="signature" id="signature" style="height: 9em;"<!-- ELSE -->name="message" id="message"<!-- ENDIF --> rows="15" cols="76" tabindex="3" o    nselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" class="inputbox">{MESSAGE}{DRAFT_MESSAGE}{SIGNATURE}</textarea>
      
      (simply add a class named "rich")

      8 - purge the cache.

      Notes
      • flash is currently not working
      • 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
      • The support for bbcode is limited to standard. If you use custom bbcodes, you must adapt js code in plugin

Re: [DEV] TinyMCE integration

Posted: Mon Sep 08, 2008 1:17 pm
by faldoroc
Thanks for the instruction =)
I can't get smilies or listsings to work, but it's not a critical problem.

Re: [DEV] TinyMCE integration

Posted: Mon Sep 08, 2008 1:39 pm
by usenet2you
Can you make a screen of the result? If I do the changes, I see no changes to my editor. Cleared cache etc etc.

Re: [DEV] TinyMCE integration

Posted: Mon Sep 08, 2008 1:52 pm
by garak
usenet2you wrote:Can you make a screen of the result? If I do the changes, I see no changes to my editor. Cleared cache etc etc.
I just added a link to a Screenshot
preview:
Image

Re: [DEV] TinyMCE integration

Posted: Mon Sep 08, 2008 2:04 pm
by faldoroc
I believe you fogot to mention that you need to remove the original bbcode buttons too :)

Re: [DEV] TinyMCE integration

Posted: Mon Sep 08, 2008 2:40 pm
by garak
faldoroc wrote:I believe you fogot to mention that you need to remove the original bbcode buttons too :)
Indeed, I don't: buttons should be removed/added/replaced by javascript.

Re: [DEV] TinyMCE integration

Posted: Mon Sep 08, 2008 3:02 pm
by faldoroc
For some reason i can't get the changes to editor_plugin_src.js to take effect.
I've purged the cashe and restartred the webserver without it showing the new bbcode info. I can even delete editor_plugin_src.js in the plugin-directory and the editor still uses the old editor_plugin_src.js file.

Re: [DEV] TinyMCE integration

Posted: Mon Sep 08, 2008 3:24 pm
by garak
faldoroc wrote:For some reason i can't get the changes to editor_plugin_src.js to take effect.
I've purged the cashe and restartred the webserver without it showing the new bbcode info. I can even delete editor_plugin_src.js in the plugin-directory and the editor still uses the old editor_plugin_src.js file.
My fault: I corrected instruction at point 3. File to be edited is editor_plugin.js, not editor_plugin_src.js

Re: [DEV] TinyMCE integration

Posted: Mon Sep 08, 2008 3:54 pm
by faldoroc
Great! that solved the problem! It's working great now =)
I havn't opened my forum for the public yet, but when i do i'm going to put up a link for people who wanna try this editor :)
Also, there are some nice other plugins in TinyMCE that can be very usefull... one just needs to tweek them a little :) For instance i've added "force_br_newlines : true", this corrects a problem for people useing InternetExplorer when they hit enter for a linebreak the editor jumps one line.

Re: [DEV] TinyMCE integration

Posted: Wed Sep 10, 2008 3:10 pm
by quocanh83
i test it with copy & paste image from other site. When i click edit that image can't view. View html i see the link it wrong
ex:

Code: Select all

Before edit
[img]http://www.tienphong.vn/Tianyon/ImageView.aspx?ThumbnailID=173218[/img]
After edit:
[img]http://[b]localhost/qlda/fo@[/b]www.tienphong.vn/Tianyon/ImageView.aspx?ThumbnailID=173218[/img]
how can i modify it?
Thanks

Re: [DEV] TinyMCE integration

Posted: Wed Sep 10, 2008 3:24 pm
by usenet2you
We can't see in your localhost, it's not an error of this MOD. ;)

Re: [DEV] TinyMCE integration

Posted: Wed Sep 10, 2008 3:28 pm
by quocanh83
hum sry my eng not well.
I think this mod auto change my link with
http://+path server + old link img . It auto insert path server with all link' image

Re: [DEV] TinyMCE integration

Posted: Wed Sep 10, 2008 7:53 pm
by faldoroc
I've corrected the list-functions in the editor_plugin.js-file, if you can't get the list-function to work, just paste this instead of the one above :)

Code: Select all

    /**
    * $Id: editor_plugin.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");
// lists
rep(/<ul[^>]*>(.*?)<\/ul>/gi,"
  • $1
");
rep(/<ol style="list-style-type: lower-alpha;">(.*?)<\/ol>/gi,"
  1. $1
");
rep(/<ol[^>]*>(.*?)<\/ol>/gi,"
  1. $1
");
rep(/<li>(.*?)<\/li>/gi,"[*]$1");
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\" />");
// lists
rep(/\[list\](.*?)\[\/list\]/gi, "<ul>$1</ul>");
rep(/\
  • (.*?)\[\/list\]/gi, "<ol>$1</ol>");
    rep(/\
    • (.*?)\[\/list\]/gi, "<ol style=\"list-style-type: lower-alpha;\">$1</ol>");
      rep(/\[\*\]/gi, "</li><li>");
      // fix empty li's
      rep(/<li><br \/><\/li>/gi, "");
      rep(/<li\/>/gi, "");


      return s;
      }
      });

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

Re: [DEV] TinyMCE integration

Posted: Thu Sep 11, 2008 12:12 am
by SFGolfer
I am using the ProSilver Special Edition theme.

TinyMCE appears and seems to work just fine; however, I have a few issues...

1) When the edit screen first appears, the old editor briefly appears before it is replace by TinyMCE. From there, TinyMCE seems to work just fine.

1) The hard returns are not treated as <p> but gets inserted into the html as <br />. When the post is re-edited in TinyMCE, the paragraphs are separated as single space and not double space.

2) The resulting post is not formatted the same as it appears in TinyMCE. The font weight, size and colors do not get formatted.

This is the resulting html...

Code: Select all

<div class="content">This is an example post in your [b]phpBB3[/b] installation. Everything seems to be working. You may delete this post if you like and continue to set up your board. During the installation process your first category and your first forum are assigned an appropriate set of permissions for the predefined usergroups administrators, bots, global moderators, guests, registered users and registered [u]COPPA[/u] users.<br />If you also choose to delete your first category and your first forum, do not forget to assign permissions for all these usergroups for all new categories and forums you create. <br />[i]It is recommended to rename your first category and your first forum and copy permissions from these while creating new categories and forums. [/i]<br /><span style="font-size: 18px; color: #ff6600;">Have fun!</span></div>

Re: [DEV] TinyMCE integration

Posted: Thu Sep 11, 2008 7:37 am
by garak
faldoroc wrote:I've corrected the list-functions in the editor_plugin.js-file, if you can't get the list-function to work, just paste this instead of the one above :)
Please, can you explain what you modified? I tried a diff and just noticed some newlines removed, but it's not working well for me.
Thank you