comment on

Here it is, the menuitem and toolbar button don't work yet (haven't figured out http://www.tinymce.com/tryit/custom_formats.php yet), but round trip works ... to add code tags you toggle the raw textarea

the plugin tinymce/js/tinymce/plugins/perlmonks/plugin.js

/**
 * 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;
//            dialect = ed.getParam('bbcode_dialect', 'punbb').toLower
+Case();

            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('perlmonkscodetags', {
                text: '<code></code>',
                icon: false,
                context: 'format', /* file menu, views, tools ... */
                onclick: function() {
                    // something // ed.windowManager.open({
                    // TODO toggle add/remove code tags around selecti
+on  or at cursor
                }
            });
            ed.addButton('perlmonkscodetags', {
                text: '<code></code>',
                icon: false,
                onclick: function() {
                    // something // ed.windowManager.open({
                    // TODO toggle add/remove code tags around selecti
+on  or at cursor
                }
            });
        },

        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.replace( /(\&\#91;|\&\#93;|\&nbsp;|\&l
+t;|\&gt;|\&amp;|<br>)/gi, repsFun );
                    s = "<pre><code>"+s+"</code></pre>";
                } else if( code ){
                    s = code.replace( /(\&\#91;|\&\#93;|\&nbsp;|\&lt;|
+\&gt;|\&amp;|<br>)/gi, repsFun );
                    s = "<code>"+s+"</code>";
                } else {
                    s = c.replace( /(\&\#91;|\&\#93;|\&nbsp;|\&lt;|\&g
+t;|\&amp;|<br>)/gi, repsFun );
                    s = "<code>"+s+"</code>";
                }
                if( s.match(/\n/) ){
                    s = "<pre>" + s + "</pre>";
                }
                return s;
            }; /* end of codeReplacer */
            
            s = s.replace(/<pre><code>([\w\W]*?)<\/code><\/pre>|<code>
+([\w\W]*?)<\/code>|<c>([\w\W]*?)<\/c>/gi, codeReplacer );
            
            return s;
        },
        
        _pm2html : function(s) {
/* function(match, p1, p2, p3, offset, string)  */
            var codeReplacer = function(match, precode, code, c ){
                var repsFun = function(chr){
                    return {
                        "<"  : "&lt;",
                        ">"  : "&gt;",
                        "&"  : "&amp;",
                        " "  : "&nbsp;",
                        "\n" : "<br>",
                        "["  : "&#91;",
                        "]"  : "&#93;"
                    }[ chr ];
                }; /* repsFun */
                
                
                if( precode ){
                    s = precode.replace( /([\n <>&])/gi, repsFun );
                } else if( code ){
                    s = code.replace( /([\n <>&])/gi, repsFun );
                } else {
                    s = c.replace( /([\n <>&])/gi, repsFun );
                }
                s = "<code>" + s + "</code>";
                if( s.match(/\n/) ){
                    s = "<pre>" + s + "</pre>";
                }
                return s;
            }; /* end of codeReplacer */
            
            s = s.replace(/<pre><code>([\w\W]*?)<\/code><\/pre>|<code>
+([\w\W]*?)<\/code>|<c>([\w\W]*?)<\/c>/gi, codeReplacer );
            
            return s;
        }
    });
    
    // Register plugin
    tinymce.PluginManager.add('perlmonks', tinymce.plugins.PerlMonksPl
+ugin);
})();
[download]

the offline test html

<html lang="en-US" charset="UTF-8">
<head>
<title> tinymce perlmonks local editor </title>
<meta charset="utf-8">
</head>
<body>
<textarea>
<p> <b> not code </b> then <pre><code>  <> one line </code></pre>
<p> <b> not code </b> then <pre><code>  <> two
<> line </code></pre></textarea>
<hr>
<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
+%">

    </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', /* let <b> <i> and <u> remain not turn into <e
+m>/<strong>/<span> */
        'perlmonks',
    ],
    statusbar : true,
    cleanup: false, /* fake html */
    element_format : "html",
    toolbar : "perlmonkscodetags | undo redo | table | bold italic | a
+lignleft aligncenter alignright alignjustify | bullist numlist outden
+t indent | link | print preview | forecolor backcolor emoticons charm
+ap code | hr paste searchreplace spellchecker template visualblocks i
+nsertdatetime', // insertfile styleselect save media image fullpage p
+agebreak"
});
</script>


</body>
</html>
[download]

In reply to Re^6: TinyMCE javascript toolbar ( perlmonks/plugin.js v1 ) by Anonymous Monk
in thread TinyMCE javascript toolbar by Steve_BZ

Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!

Titles consisting of a single word are discouraged, and in most cases are disallowed outright.

Read Where should I post X? if you're not absolutely sure you're posting in the right place.

Please read these before you post! —

Posts may use any of the Perl Monks Approved HTML tags:

a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr

You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)

	For:		Use:
	&		`&`
	<		`<`
	>		`>`
	[		`[`
	]		`]`

Link using PerlMonks shortcuts! What shortcuts can I use for linking?

See Writeup Formatting Tips and other pages linked from there for more info.