The MU forums have moved to WordPress.org

How To: adding advanced post editing features for users with TinyMCE (22 posts)

  1. andrea_r
    Moderator
    Posted 13 years ago #

    I thought I'd write this up here in case anyone else is bashing their head on the desk trying to figure out how to add things users may want for editing their posts.

    WPMU comes bundled with the Tiny MCE editor included, known as the Rich Text Editor in the user options. Not all of the options for Tiny MCE are turned on or included with the WP/WPMU distro, so for some things, you may have to go to the TinyMCE page and download the latest version to get the extras.

    http://tinymce.moxiecode.com/

    My users wanted Spellcheck, more smilies and text editing features. Two of these - spellcheck and smilies - are available as plugins for TinyMCE. As regular plugins for WP/WPMU, these sorts of options were really convoluted to me and sometimes involved hacking the code, and then it may not work with MU. Why not use what we have instead of trying to bend to fit?

    So the steps I took:
    - MAKE A BACKUP!
    - download the full version, extract to hard drive.
    - look over the plugins folder and decide what you want (read documentation online here: http://tinymce.moxiecode.com/tinymce/docs/reference_buttons.html)
    - upload wanted Tiny MCE plugins to /wp-includes/js/tinymce/plugins/ folder. I added emotions and iespell, each are in their own folder.

    Edit /public_html/wp-inst/wp-includes/js/tinymce/tiny_mce_gzip.php

    To add the plugins, find this line:
    // Load all plugins and their language packs
    $plugins = apply_filters('mce_plugins', array('wordpress', 'autosave', 'wphelp'));

    Add the ones you want to the array, so it looks like this:
    $plugins = apply_filters('mce_plugins', array('wordpress', 'autosave', 'wphelp', 'emotion', 'iespell'));

    Note the single quotes. This is slightly different than the TinyMCE documentation calls for. This is what loads the plugins.

    Just under that is a big list of options that starts with the line:
    $mce_buttons = apply_filters .
    Add , 'emotions', 'iespell' inside the single brackets with everything else, it's a long list of items. This part is what makes them show up as buttons.

    To add extra buttons that are built in but not turned on, and add then to a new line, I found this further down in the file:
    $mce_buttons_2 = apply_filters());

    I added the names of the features I wanted, as listed in the documentation link above (right under "Default buttons available in the advanced theme").

    The second line now looked like this:
    $mce_buttons_2 = apply_filters('mce_buttons_2', array('formatselect', 'fontselect', 'fontsizeselect'));

    This adds 3 drop-down boxed for users to add formatting.

    Now SAVE the file.

    Go login to the admin area and go to the Write Post section. If all is well, and you have the Rich Text Editor ON for yourself, you should see the new buttons. :)

    I really have to thank LucidGreen for posting about this in plain English.

    If someone has problems and wants to add the same options I did, I'd be happy to send or pastebin the changed file. Hope this helps someone!

  2. samchng
    Member
    Posted 13 years ago #

    Thanks andrea! You just added some value to my hosting :)))

    Yeah, why didnt my users think of that haha.. Maybe you can add your codes to paste bin. I am refraining from asking you to send the files over, need to do it myself so I know more about this issue.

    There isn't any changes to Tinymce since your build right?

  3. andrea_r
    Moderator
    Posted 13 years ago #

    Dunno, don't think so. I seem to recal reading lately that WP 2.5 may have some TinyMCE changes, but that shouldn't affect this right now.

  4. andrea_r
    Moderator
    Posted 13 years ago #

    Just to add an update: the iespell depends on the user have IESpell installed in their browser.

  5. samchng
    Member
    Posted 13 years ago #

    Thanks for update andrea. SMILES :)

  6. MazZziKa
    Member
    Posted 13 years ago #

  7. andrea_r
    Moderator
    Posted 13 years ago #

    That one was made redundant by the inclusion of TinyMCE in WP itself.
    You coudl try it if you like. I don't know how it would work, really.

  8. andrea_r
    Moderator
    Posted 13 years ago #

    Okay, since the upgrade to RC4 (and probably any RC version) you don't have to add Spellcheck. I *did* have to go into /wp-includes/js/tinymce/plugins/spellcheckerconfig.php and change enabled= false to true. (which I'm thinking if the button is there, *enable* it OOTB)

    File path has changed and instead of editing tiny_mce_gzip.php, you need to edit tiny_mce_config.php.

    I aded all my new options on a new line of buttons, just to keep it straight in my head.ie; I added my new options to the $mce_buttons_2 array.

  9. Cruz
    Member
    Posted 13 years ago #

    Whenever I add the new plugin names to the line like the following, the buttons are distorded..

    $plugins = apply_filters('mce_plugins', array('wordpress', 'autosave', 'wphelp', 'emotion', 'iespell'));

  10. andrea_r
    Moderator
    Posted 13 years ago #

    Distorted how? And what did you add exactly?

    Also, since we now have 1.0, the setup is slightly different.

  11. Cruz
    Member
    Posted 13 years ago #

    Right.. I thought I could post the screenshot on this forum.

    When I change from
    "$plugins = apply_filters('mce_plugins', array('wordpress', 'autosave', 'wphelp'));"

    to:
    "$plugins = apply_filters('mce_plugins', array('wordpress', 'autosave', 'wphelp', 'emotion', 'iespell'));"

    the button changes from "graphical buttons" (buttons similar to what you see on Microsoft Word (Bold, italics, etc..) to buttons that uses plain words.

  12. zeug
    Member
    Posted 13 years ago #

    You can also use Advanced WYSIWYG Editor plugin in muplugins. It uses a WP hook, tinyinit, to initialise the tinymce plugins whnenver the rich editor is called. I hacked it into my anarchy media plugin for mu and no need to mess with the tinymce core files, plus you can add tinymce plugins and initialise them from the muplugin. Spellcheck works with no editing required.

    This from my plugin code but should also work stand alone:

    * Start Advanced WYSIWYG Editor adapted from http://www.labnotes.org
    **********************************************************************/

    if (isset($wp_version)) {
    add_filter("mce_buttons", "extended_editor_mce_buttons", 0);
    add_filter("mce_buttons_2", "extended_editor_mce_buttons_2", 0);
    }

    function extended_editor_mce_buttons($buttons) {
    return array(
    "bold", "italic", "underline", "strikethrough", "separator", "link", "unlink", "anchor", "image", "separator",
    "sub", "sup", "forecolor", "backcolor", "charmap", "separator");
    }

    function extended_editor_mce_buttons_2($buttons) {
    // Add buttons on the second toolbar line
    return array(
    "formatselect", "bullist", "numlist", "indent", "outdent",
    "separator", "justifyleft", "justifycenter", "justifyright",
    "justifyfull", "separator", "wp_more", "separator", "undo", "redo", "separator", "spellchecker",
    "separator", "code", "fullscreen", "separator", "wordpress", "wp_help");
    return $buttons;
    }

  13. DarkPepe
    Member
    Posted 13 years ago #

    thank you andrea_r for this nice tutorial.. BUT... it seems that it doesnt work on MU 1.0 :( the TinyMCE editor has been upgraded, cant find some clear documentation on how to add new plugins to the editor :S

    Can you port this modification to MU 1 ?

    Thanx a lot!

  14. boetter
    Member
    Posted 13 years ago #

    I'm also very interested!

  15. andrea_r
    Moderator
    Posted 13 years ago #

    That only thing that has changed is which file to edit. Instead of editing editing tiny_mce_gzip.php, you need to edit tiny_mce_config.php.
    Other than that, it's pretty much the same.

  16. qzplx
    Member
    Posted 13 years ago #

    hello.....i try to follow your step on wp 2.0.5 but its not work, tinyMCE not load properly, and i use the latest tiny mce, and the wordpress tinyMCE is 2.0rc4, is there anyone have this version plugin ?

  17. roth
    Member
    Posted 13 years ago #

    hello, im trying to find tinyMCE for youtube, googlevideo, dailymotion, etc.. and for mp3 add from urls..
    anyone know where are them ?.. i really want to isntall this ones for my users.. thanks alot.

  18. suleiman
    Member
    Posted 13 years ago #

    search for anarchy media player and download it.

  19. zeug
    Member
    Posted 13 years ago #

    <<<--- Or you can just click on my username :)

  20. dunrite67
    Member
    Posted 13 years ago #

    Wow, this is great. I followed your directions andrea, and it worked perfectly!

    I haven't found out why I can't add html yet, other people say they have an html button, but I don't have that. Also I still get ajax error in spell check, but I am still digging away.

  21. Akashic
    Member
    Posted 12 years ago #

    I've tried both methods - with direct hack and plugin. As I can change the layout of the icons, I cannot add new things by instaling tinyMCE plugins (as if they were not installed)
    (was trying with newest tinyMCE ver. 3).

    Anyone similar problems?

  22. yyvonne
    Member
    Posted 11 years ago #

    I have done this modification, and it works great!
    However, I added quite a number of smilies, but the popup is neither scrollable nor resizeable, so the smilies way down the list are not able to be viewed.

    Can someone please assist me on how to chnage the size of the popup window, or make it scrollable.

    Thank you.

About this Topic

  • Started 13 years ago by andrea_r
  • Latest reply from yyvonne