Beefy Boxes and Bandwidth Generously Provided by pair Networks
Your skill will accomplish
what the force of many cannot

TinyMCE javascript toolbar

by Steve_BZ (Chaplain)
on Dec 11, 2014 at 20:46 UTC ( [id://1110100]=monkdiscuss: print w/replies, xml ) Need Help??

Hi Monks,
After the controversy of my last post, I thought I'd post this in a spirit of reconciliation. I've also switched my spell-check back to English which might help.
Here is a piece of JavaScript that displays a toolbar with some html generator buttons on the text area where we type our responses. You put it in your Free Nodelet and it loads up a small editor.
The JavaScript source code can be downloaded freely to from here (, so that the risk of code changes would be lessened. Then of course it need not be included in our free nodelet.
Update 1 for tables, menu and other cool stuff.
Update 2 There seem to be some integration problems between tinyMCE and PM. TinyMCE posts as a wholeblock. I'm looking into it. - OK now.
Update 3. Needs some experimentation to get used to.
Update 4. White space and formatting issues fixed (Thanks anon).
<script src="//"></script> <script type="text/javascript">// <![CDATA[ tinymce.init({ selector: 'textarea', remove_linebreaks: false, forced_root_block : 'p', convert_newlines_to_brs : true, preformatted : true, plugins: 'table wordcount searchreplace autosave spellchecker visualb +locks textpattern textcolor save print preview paste lists link inser +tdatetime hr fullscreen legacyoutput contextmenu code charmap', // m +edia image tabfocus pagebreak template fullpage bbcode colorpicker em +oticons toolbar: 'undo redo | table | bold italic | alignleft aligncenter alig ++nright alignjustify | bullist numlist outdent indent | link | print +preview | forecolor backcolor emoticons charmap code | hr paste searc +hreplace spellchecker template visualblocks insertdatetime', // inser +tfile styleselect save media image fullpage pagebreak statusbar : true }); // ]]></script>
Try it out and let me know what you think.

Replies are listed 'Best First'.
Re: TinyMCE javascript toolbar
by marto (Cardinal) on Dec 12, 2014 at 14:49 UTC

    I think you previous post was more confusing that controversial, I'm still unclear as to what you were trying to say. No offence intended, I didn't downvote, but I don't think you made your points clear. I read the thread several times and am still none the wise as far as the what social networking can do for this site.

    It jumped from statements like 75% of people on trains with smartphones using Facebook, while you saw nobody using Perlmonks, or coding in perl. I'm unsure how this is an issue for us. I doubt 75% of Facebook users have an interest in coding anything. Unless you are on some magic train to start up land I'd expect to see nobody coding on a train, at least it would be a very rare occurrence. Coding isn't everyone's hobby or job, not everyone cares or has an interest in the same things.

    I don't have a Facebook account, it seems fairly pointless to me, also I've read their terms and conditions of use, crazy stuff. I mean of course you can trust your data to someone elses cloud system, those files you deleted actually were deleted weren’t they, the personal data could never get into the wrong hands? From observing others it seems to offer nothing that could be used in conjunction with Perlmonks. I don't see any evidence or arguments in your previous thread to the contrary.

    Also I don't see any feedback regarding the claim you can't use this site on an Android phone.

Re: TinyMCE javascript toolbar
by chacham (Prior) on Dec 12, 2014 at 16:05 UTC

    After the controversy of my last post

    Your last post was not controversial. It comes up all the time (and then some).

    It comes up, its gets answered twofold. One, if it ain't broke, don't fix it. And it ain't broke, because it works exactly as designed. Two, if you want to redesign, Display Settings is readily available (especially the Stylesheet Settings section). Not only that, but your fellow monks would love to hear about it, in this very section!

    The only issue, as you may have noted yourself, is the tone of the post. Starting off sweet and screaming at the end or the original post (by using caps), and suggesting in the thread that there is a real need to change things instead of just making a suggestion.

    The good monks here in the monastery responded with the usual PerlMonks goodness, and it's a nice thread.

Re: TinyMCE javascript toolbar
by Anonymous Monk on Dec 11, 2014 at 21:28 UTC
Re: TinyMCE javascript toolbar (on/off)
by Anonymous Monk on Dec 14, 2014 at 22:16 UTC

    Here is a "button" to turn MCE off/on

    <a href="#" onclick="tinymce.execCommand('mceToggleEditor',false,'content');"> [Toggle WYSIWYG]</a>

    If I turn MCE off, add code tags with newlines, then turn MCE on, its eats the newlines ... grr :)

Re: TinyMCE javascript toolbar
by Steve_BZ (Chaplain) on Dec 14, 2014 at 11:10 UTC
    Hi Monks,
    So this post was posted with TinyMCE. Here are some features, all from the toolbar:
    1. Some lists without all that ol and ul li stuff,
    2. Second item
    Now some unordered items:
    • Text 1 (Some with Bold and some with Italics
    • Text 2 (Strikethrough)
    Special characters like ‰ (what is that?)


    And lots of other stuff.
    It still has a few issues, but they mostly have workarounds which are easer than scripting the HTML yourself. Here are a few:

    It suppresses white space.  (Updated OK, white space issue fixed).

    p-tags and br-tags are converted to non-breakable space characters. This is not very helpful, so this post has a table for paragraphs. Oh, I forgot it has tables too:
    row header
    row item
    row item

    It has a spellcheck but I haven't got it working yet

    I haven't quite got the hang of code snips yet. There is a code-tag and a pre-tag. Here they are:

    Code tag

    use strict;

    use warnings;

    print @_;

    (Note white space problem -now fixed again thanks to "Anon"- and (updated) paired code tags on each line - thanks anon)

    Here is a pre-tag

    use strict;
    use warnings;
    print @_;

    Updated: unsuported style= attributes in tables and lists.

    (Thanks Tye)
    I'll keep on plugging and update as I find resolutions.

      It is also posting unapproved attributes (seems just "style=...") that show up as error indications if you have error reporting turned up.

      - tye        

        Hi Tye
        Thanks for noticing that, I hadn't. I did wonder why the colours I had specified did not come out :)
        I'll check the tinyMCE user manual. I thought you could specify allowed tags, but I don't recall seeing attributes.


      This is not good :)
      <h2>Code tag</h2> <code>use strict;</code> <code>use warnings;</code> <code>print @_;</code>
        Yes, I saw that. Any ideas?

Log In?

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: monkdiscuss [id://1110100]
Approved by GotToBTru
and the web crawler heard nothing...

How do I use this?Last hourOther CB clients
Other Users?
Others having a coffee break in the Monastery: (5)
As of 2024-07-24 14:36 GMT
Find Nodes?
    Voting Booth?

    No recent polls found

    erzuuli‥ 🛈The London Perl and Raku Workshop takes place on 26th Oct 2024. If your company depends on Perl, please consider sponsoring and/or attending.