[ABD] TinyMCE integration

Any abandoned MODs will be moved to this forum.

WARNING: MODs in this forum are not currently being supported or maintained by the original MOD author. Proceed at your own risk.
Forum rules
IMPORTANT: MOD Development Forum rules

WARNING: MODs in this forum are not currently being supported nor updated by the original MOD author. Proceed at your own risk.
Locked
garak
Registered User
Posts: 57
Joined: Wed Jul 23, 2008 12:48 pm
Location: Rome, Italy
Name: Massimiliano Arione

[ABD] TinyMCE integration

Post 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
Last edited by garak on Mon May 17, 2010 8:39 am, edited 14 times in total.
faldoroc
Registered User
Posts: 11
Joined: Mon Sep 08, 2008 8:09 am

Re: [DEV] TinyMCE integration

Post by faldoroc »

Thanks for the instruction =)
I can't get smilies or listsings to work, but it's not a critical problem.
usenet2you
Registered User
Posts: 407
Joined: Sat Mar 22, 2008 7:31 pm
Location: The Netherlands

Re: [DEV] TinyMCE integration

Post 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.
garak
Registered User
Posts: 57
Joined: Wed Jul 23, 2008 12:48 pm
Location: Rome, Italy
Name: Massimiliano Arione

Re: [DEV] TinyMCE integration

Post 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
faldoroc
Registered User
Posts: 11
Joined: Mon Sep 08, 2008 8:09 am

Re: [DEV] TinyMCE integration

Post by faldoroc »

I believe you fogot to mention that you need to remove the original bbcode buttons too :)
garak
Registered User
Posts: 57
Joined: Wed Jul 23, 2008 12:48 pm
Location: Rome, Italy
Name: Massimiliano Arione

Re: [DEV] TinyMCE integration

Post 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.
faldoroc
Registered User
Posts: 11
Joined: Mon Sep 08, 2008 8:09 am

Re: [DEV] TinyMCE integration

Post 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.
garak
Registered User
Posts: 57
Joined: Wed Jul 23, 2008 12:48 pm
Location: Rome, Italy
Name: Massimiliano Arione

Re: [DEV] TinyMCE integration

Post 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
faldoroc
Registered User
Posts: 11
Joined: Mon Sep 08, 2008 8:09 am

Re: [DEV] TinyMCE integration

Post 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.
quocanh83
Registered User
Posts: 17
Joined: Thu May 24, 2007 6:34 am

Re: [DEV] TinyMCE integration

Post 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
usenet2you
Registered User
Posts: 407
Joined: Sat Mar 22, 2008 7:31 pm
Location: The Netherlands

Re: [DEV] TinyMCE integration

Post by usenet2you »

We can't see in your localhost, it's not an error of this MOD. ;)
quocanh83
Registered User
Posts: 17
Joined: Thu May 24, 2007 6:34 am

Re: [DEV] TinyMCE integration

Post 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
faldoroc
Registered User
Posts: 11
Joined: Mon Sep 08, 2008 8:09 am

Re: [DEV] TinyMCE integration

Post 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]
SFGolfer
Registered User
Posts: 5
Joined: Fri Sep 05, 2008 2:26 pm

Re: [DEV] TinyMCE integration

Post 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>
garak
Registered User
Posts: 57
Joined: Wed Jul 23, 2008 12:48 pm
Location: Rome, Italy
Name: Massimiliano Arione

Re: [DEV] TinyMCE integration

Post 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
Locked

Return to “[3.0.x] Abandoned MODs”