in reply to Re^6: TinyMCE javascript toolbar ( tinymce/js/tinymce/plugins/perlmonks/plugin.js )
in thread TinyMCE javascript toolbar

Turning bbcode off got a whole load of things to spring into life.

Yeah, I did that ages ago :)

And its finished , for the most part :) buttons work, switching from raw to mce to raw works, no multiline code inside tt code ...

plugin.js not v1 

/**
 * tinymce/js/tinymce/plugins/perlmonks/plugin.js
 * 2014-12-14-16:41:12
 * based on
 * tinymce/js/tinymce/plugins/bbcode/plugin.js
 * tinymce/js/tinymce/plugins/example/plugin.js
 *
 * Copyright, Anonymous Monk
 * Released under the same terms as perl itself
 */

/*global tinymce:true */

(function() {
    tinymce.create('tinymce.plugins.PerlMonksPlugin', {
        init : function(ed) {
            var self = this;
            ed.on('beforeSetContent', function(e) {
                e.content = self['_pm2html'](e.content);
            });

            ed.on('postProcess', function(e) {
                if (e.set) {
                    e.content = self['_pm2html'](e.content);
                } else if (e.get) {
                    e.content = self['_html2pm'](e.content);
                }
            });
            
            ed.addMenuItem('perlmonks_pre_code', {
                text: "\u003Ccode\u003E\n\n\u003C/code\u003E",
                tooltip: "multiline, toggle add/remove code tags aroun
+d selectuion or at cursor",
                icon: false,
                context: 'format', /* file menu, views, tools ... */
                onclick: function() {
                    ed.execCommand('mceToggleFormat', false, 'perlmonk
+s_pre_code' );
                }
            });
            ed.addButton('perlmonks_pre_code', {
                text: "\u003Ccode\u003E\n\n\u003C/code\u003E",
                tooltip: "multiline, toggle add/remove code tags aroun
+d selectuion or at cursor",
                icon: false,
                onclick: function() {
                    ed.execCommand('mceToggleFormat', false, 'perlmonk
+s_pre_code' );
                }
            });
            ed.addMenuItem('perlmonks_c_code', {
                text: "\u003Cc\u003E\u003C/c\u003E",
                tooltip: "oneline, toggle add/remove code tags around 
+selectuion or at cursor",
                icon: false,
                context: 'format', /* file menu, views, tools ... */
                onclick: function() {
                    ed.execCommand('mceToggleFormat', false, 'perlmonk
+s_c_code' );
                }
            });
            ed.addButton('perlmonks_c_code', {
                text: "\u003Cc\u003E\u003C/c\u003E",
                tooltip: "oneline, toggle add/remove code tags around 
+selectuion or at cursor",
                icon: false,
                onclick: function() {
                    ed.execCommand('mceToggleFormat', false, 'perlmonk
+s_c_code' );
                }
            });          
        }, /* end of init */

        getInfo: function() {
            return {
                longname: 'PerlMonks Plugin',
                author: 'Anonymous Monk',
                authorurl: 'http://www.perlmonks.org/?node_id=961',
                infourl: 'http://www.perlmonks.org/?node=PerlMonks+FAQ
+'
            };
        },

        _html2pm : function(s) {
            var codeReplacer = function(match,precode,code, c){
/* function(match, p1, p2, p3, offset, string)  */
                var repsFun = function(chr){
                    return {
                        "&lt;"   : "<",
                        "&gt;"   : ">",
                        "&amp;"  : "&",
                        "&nbsp;" : " ",
                        "<br>"   : "\n",
                        "&#91;"  : "[",
                        "&#93;"  : "]"
                    }[chr];
                }; /* repsFun */
                
                if( precode ){
                    s = precode;
                } else if( code ){
                    s = code;
                } 
                
                s = '<c>' + s.replace( /(\&\#91;|\&\#93;|\&nbsp;|\&lt;
+|\&gt;|\&amp;|<br>)/gi, repsFun ) + '</c>';
                return s;
            }; /* end of codeReplacer */
            s = s.replace(/<pre(?: class="codepre")?>([\w\W]*?)<\/pre>
+|<tt(?: class="codetext")?>([\w\W]*?)<\/tt>/gi, codeReplacer );
            
            return s;
        }, /* end of _html2pm */
        
        _pm2html : function(s) {
/* function(match, p1, p2, p3, offset, string)  */
            var codeReplacer = function(match, precode, ttcode, code, 
+c ){
                var repsFun = function(chr){
                    return {
                        "<"  : "&lt;",
                        ">"  : "&gt;",
                        "&"  : "&amp;",
                        " "  : "&nbsp;",
                        "\n" : "<br>",
                        "["  : "&#91;",
                        "]"  : "&#93;"
                    }[ chr ];
                }; /* repsFun */
                
                
                if( precode ){
                    s = precode;
                } else if( ttcode ){
                    s = ttcode;
                } else if( code ){
                    s = code;
                } else {
                    s = c;
                }
                if( s.match(/\n/) ){
                    s = '<pre class="codepre">' + s.replace( /([\n <>&
+])/gi, repsFun ); + '</pre>';
                } else {
                    s = '<tt class="codetext">' + s.replace( /([\n <>&
+])/gi, repsFun ); + '</tt>';
                }
                return s;
            }; /* end of codeReplacer */
            
            s = s.replace(/(<junkish>)(<spacerish>)\u003Ccode\u003E([\
+w\W]*?)\u003C\/code\u003E|\u003Cc\u003E([\w\W]*?)\u003C\/c\u003E/gi, 
+codeReplacer );
            
            return s;
        } /* end of _pm2html */
    });
    
//~     tinymce.PluginManager.add('perlmonks', tinymce.plugins.PerlMon
+ksPlugin, 'legacyoutput');
    tinymce.PluginManager.add('perlmonks', tinymce.plugins.PerlMonksPl
+ugin );
})();

[download]

the html with important stuff thats hard to config from plugin 

<html lang="en-US" charset="UTF-8">
<head>
<title> tinymce perlmonks local editor </title>
<meta charset="utf-8">
</head>
<body>
<a href="#" onclick="tinymce.execCommand('mceToggleEditor',false,'cont
+ent');">[Toggle WYSIWYG]</a>
<hr>
<form method="post" onsubmit='return false'>
    <textarea id="content" name="content" style="width:100%; height:82
+%">
<p>I said <b>bold</b> code</p>
<c>a
s
d
f</c>
<p>But then you said <c> dsfd </c></p>
    </textarea>
</form>
<script type="text/javascript" src="tinymce/js/tinymce/tinymce.dev.js"
+></script>
<script type="text/javascript">
tinymce.init({
    selector: 'textarea#content',
    remove_linebreaks: false,
    forced_root_block : 'p',
    convert_newlines_to_brs : true,
    force_p_newlines : false,
    remove_redundant_brs: false,
    preformatted : true,

    plugins: [
        'legacyoutput',
        'perlmonks',
    ],
    statusbar : true,
    cleanup: false, /* fake html */
    element_format : "html",
    formats : {
        'perlmonks_pre_code' : { block: "pre", classes: "codepre"  }, 
        'perlmonks_c_code'   : { inline: "tt",  classes: "codetext" },
    },
//~     valid_children: '-pre[tt],+ol[ul|ol],+ul[ul|ol]',
    valid_children: '+a,+abbr,+b,+blockquote[blockquote|div|dl|h5|h6|h
+r|ol|p|pre|table|ul|a|abbr|b|br|code|del|em|i|ins|small|span|strong|s
+ub|sup|u],+caption[blockquote|div|dl|h5|h6|hr|ol|p|pre|table|ul|a|abb
+r|b|br|code|del|em|i|ins|small|span|strong|sub|sup|u],+code,+colgroup
+[col],+dd[blockquote|div|dl|h5|h6|hr|ol|p|pre|table|ul|a|abbr|b|br|co
+de|del|em|i|ins|small|span|strong|sub|sup|u],+del[blockquote|div|dl|h
+5|h6|hr|ol|p|pre|table|ul|a|abbr|b|br|code|del|em|i|ins|small|span|st
+rong|sub|sup|u],+div[blockquote|div|dl|h5|h6|hr|ol|p|pre|table|ul|a|a
+bbr|b|br|code|del|em|i|ins|small|span|strong|sub|sup|u],+dl[dt|dd],+d
+t[blockquote|div|dl|h5|h6|hr|ol|p|pre|table|ul|a|abbr|b|br|code|del|e
+m|i|ins|small|span|strong|sub|sup|u],+em,+h5,+h6,+i,+ins[blockquote|d
+iv|dl|h5|h6|hr|ol|p|pre|table|ul|a|abbr|b|br|code|del|em|i|ins|small|
+span|strong|sub|sup|u],+li[blockquote|div|dl|h5|h6|hr|ol|p|pre|table|
+ul|a|abbr|b|br|code|del|em|i|ins|small|span|strong|sub|sup|u],+ol[li]
+,+p,-pre[tt|b|u|i|span],+small,+span,+strong,+sub,+sup,+table[caption
+|colgroup|thead|tfoot|tbody|tr],+tbody[tr],+td[blockquote|div|dl|h5|h
+6|hr|ol|p|pre|table|ul|a|abbr|b|br|code|del|em|i|ins|small|span|stron
+g|sub|sup|u],+tfoot[tr],+th[blockquote|div|dl|h5|h6|hr|ol|p|pre|table
+|ul|a|abbr|b|br|code|del|em|i|ins|small|span|strong|sub|sup|u],+thead
+[tr],+tr[td|th],+tt[pre|b|u|i|span],+u,+ul[li]',
    valid_elements : "a[href|name|target|class|title|rel],abbr[title],
+b,big,blockquote[class|cite|lang|dir],br,c,caption[class],center,code
+,col[align|col|span|width|class],colgroup[align|col|span|width|class]
+,dd,del[class|datetime|cite],div[class],dl,dt,em,font[size|color|clas
+s],h[class|align],h3[class|align],h4[class|align],h5[class|align],h6[
+class|align],hr,i,ins[class|datetime|cite],li[value],ol[type|start],p
+[align|class],pre[class],readmore3[title],small,span[class|title],spo
+iler4,strike,strong,sub,sup,table[width|cellpadding|cellspacing|borde
+r|bgcolor|class],tbody[width|align|valign|colspan|rowspan|bgcolor|hei
+ght|class],td[width|align|valign|colspan|rowspan|bgcolor|height|class
+],tfoot[width|align|valign|colspan|rowspan|bgcolor|height|class],th[w
+idth|align|valign|colspan|rowspan|bgcolor|height|class],thead[width|a
+lign|valign|colspan|rowspan|bgcolor|height|class],tr[width|align|vali
+gn|colspan|bgcolor|height|class],tt[class],u,ul[type],wbr",
    toolbar : "perlmonks_pre_code | perlmonks_c_code | undo redo | tab
+le | bold italic | alignleft aligncenter alignright alignjustify | bu
+llist numlist outdent indent | link | print preview | forecolor backc
+olor emoticons charmap code | hr paste searchreplace spellchecker tem
+plate visualblocks insertdatetime', // insertfile styleselect save me
+dia image fullpage pagebreak"
});
</script>
</body>
</html>

[download]

Replies are listed 'Best First'.
Re^8: TinyMCE javascript toolbar ( perlmonks/plugin.js v2 )
by Steve_BZ (Chaplain) on Dec 16, 2014 at 08:54 UTC

    Hi Anonimous Monk,

    Well, I tried out your code, but I couldn't get it running.  This is what I did:

    I downloaded the the dev version of tinyMCE version 4.1.7 , unpacked it and put it on the server.

    I uploaded your pluggin (the version on the above post).

    I checked the paths.

    I loaded up your local html file on my pc and ran it in firefox.  I get

    ReferenceError: "tinymce is not defined pm_test_editor.html:23"

    Pointing to "tinymce.init".

    Have I missed a step?

    Meanwhile the updated version in my first post is still working, but clearly without your multiline "code" pluggin and the PM command set.

    Thanks for doing this.

    Do you want to send me a private message with your email address and we can converse offline?

    Regards

    Steve.

[reply]
[d/l]

      Have I missed a step?

      step one, test stuff without webserver :)

      step zero, did you use d/l download code link?

      step two, don't write stuff like checked the paths especially when it didn't work as that isn't specific enough

      This probably means you didn't use download link ReferenceError: "tinymce is not defined pm_test_editor.html:23"

      That is the simplest explanation not involving webserver

      Now it could be that I didn't upload the right thing, or that perlmonks fudged something up, so I'll check that now update: I checked, i uploaded the right thing, it works when downloading from perlmonks

      Use /?abspart=1;displaytype=displaycode;node_id=1110370;part=1 and /?abspart=1;displaytype=displaycode;node_id=1110370;part=2 to download

[reply]

        Hi Anon,

        step one, test stuff without webserver :),

        I didn't do this. You mean on my local PC, without apache? So:

        <script src="file:///home/steve/Downloads/tinymce/js/tinymce/tinymce.dev.js">

        step zero, did you use d/l download code link?

        Yes.

        I don't think it's a problem with your code, it's getting tinymce developer running.  I used the .min all the way through.  I feel it should work with your script too.  .dev seems to have a lot less code than .min.

        I think if I add your perlmonks pluggin and your valid_elements and other stuff it should be fine.  I'm adding it a bit at a time and I'll let you know how it goes.

        Regards,

        Steve.

[reply]

In Section Perl Monks Discussion