• The new TinyMCE Wysiwyg feature is excellent but is there a way to use its table editing feature in WordPress?

Viewing 15 replies - 1 through 15 (of 32 total)
  • Thread Starter bricolou

    (@bricolou)

    OK, I found out how to add a table insertion button to the wysiwyg
    editor toolbar. If anyone’s interested, here’s how I managed to
    do it…

    Download the plugin “table.zip” from here
    http://mudbomb.com/images/files/table.zip

    Go to wp-includes/js/tinyMCE/plugins/ and
    drop the decompressed “table” directory.

    Go back to the “tinyMCE” directory.

    Open “tiny_mce_gzip.js”

    line 84: add ‘table’ to the array list…
    $plugins = apply_filters(‘mce_plugins’, array(‘wordpress’, ‘autosave’, ‘wphelp’, ‘table’));

    line 110: add ‘table’, to the list where you want the button
    to appear…
    $mce_buttons = apply_filters(‘mce_buttons’, array(‘bold’, ‘italic’, ‘strikethrough’, ‘separator’, ‘bullist’, ‘numlist’, ‘outdent’, ‘indent’, ‘separator’, ‘justifyleft’, ‘justifycenter’, ‘justifyright’ ,’separator’, ‘link’, ‘unlink’, ‘image’, ‘table’, ‘wordpress’, ‘separator’, ‘undo’, ‘redo’, ‘code’, ‘wphelp’));

    Refresh and the plugin should work in your textareas.
    It works for me.

    Thread Starter bricolou

    (@bricolou)

    Even better, line 110 put “tablecontrols” instead of “table”
    or forget about modifying this line and change line 112 as such
    $mce_buttons_2 = apply_filters(‘mce_buttons_2’,
    array(‘tablecontrols’));
    You’ll get the set of controls on a second line of the toolbar.

    Spellcheck! My kingdom for a spellcheck! I haven’t seen any of the regular spellcheck plugins on the 2.0 compatability list. WYSIWYG is nice, but without spellcheck it’s of limited use to me. I tried to use the Google toolbar plugin for spellcheck, but that inserts a lot of weird code into the WYSIWYG that I have to go back and delete.

    Any suggestions out there?

    If you go to the TinyMCE site (http://tinymce.moxiecode.com/) and download the full 2.01 release, there is the IESpell plugin that you can add to your editor.

    To easily add buttons and plugins to WordPress, check out hte “Advanced editing for WordPress 2.0″ plugin” (http://blog.labnotes.org/2005/12/26/advanced-editing-for-wordpress-20/).
    It easily allows you to add extend the rather minimal WP 2.0 implementation. This plugin has come in very handy.

    It is easy to take this plugin and also add a 2nd or 3rd line of buttons.

    Simply add another filter for mce_buttons_2, and if you need three lines, also mce_buttons_3:

    add_filter(“mce_buttons_2”, “extended_editor_mce_buttons2”, 0);

    function extended_editor_mce_buttons2($buttons) {
    return array( /* second row buttons */ );
    }

    I’ll try it, but editing plugins is somewhat new territory for me.

    hope they add quote button 🙂

    dbasulto,

    the Indent button automatically converts to a blockquote for you.

    TerranceDC,

    It is very easy. You can use the Plugin Editor off Admin->Plugins. Here is what I am using.

    if (isset($wp_version)) {
    add_filter(“mce_plugins”, “extended_editor_mce_plugins”, 0);
    add_filter(“mce_buttons”, “extended_editor_mce_buttons”, 0);
    add_filter(“mce_buttons_2″, extended_editor_mce_buttons2”, 0);
    add_filter(“mce_buttons_3”, “extended_editor_mce_buttons3”, 0);
    }

    function extended_editor_mce_plugins($plugins) {
    array_push($plugins, “table”, “fullscreen”, “emotions”, “advlink”, “advimage”, “searchreplace”, “iespell”);
    return $plugins;
    }

    function extended_editor_mce_buttons($buttons) {
    return array(
    “cut”, “copy”, “paste”, “separator”, “undo”, “redo”, “separator”, “search,replace”, “separator”, “iespell”, “charmap”, “emotions”, “separator”, “link”, “unlink”, “anchor”, “image”, “separator”, “removeformat”, “code”, “fullscreen”, “wordpress”, “wphelp”);

    function extended_editor_mce_buttons2($buttons) {
    return array(
    “formatselect”, “bold”, “italic”, “underline”, “strikethrough”, “sub”, “sup”, “separator”, “justifyleft”, “justifycenter”, “justifyright”, “justifyfull”, “separator”, “bullist”, “numlist”, “outdent”, “indent”, “separator”, “forecolor”, “backcolor”, “separator”, “hr”, );
    }

    function extended_editor_mce_buttons3($buttons) {
    return array(
    “tablecontrols”);
    }

    You need to make sure you add the plugins into the Tinymve js plugins directory.

    It depends on your definition of “easy.”

    The thing is, to add the TinyMCE editor, you have to be comfortable editing files .js files, etc. I tried it. I downloaded the editor, uploaded the plugin to the TinyMCE plugins directory and added the code in the READ ME file for the plugin to the TinyMCE file.

    tinyMCE.init({
    theme : "advanced",
    mode : "textareas",
    plugins : "iespell",
    theme_advanced_buttons3_add : "iespell"
    });

    I got nothing. I went back to my write screen and I got nothing. No button on my editor. Nothing. Maybe I didn’t add the code to the right place in the file, but the directions are surprisingly short and not specific about where to put the code. It assumes a level a knowledge I don’t have.

    So, if you’re a developer, a programmer, etc., this will be easy for you. I’m not. I’m just a writer, for whom a spellcheck would have some value. My solution is either to simply not use the WYSIWYG editor (which is a shame, because it’s a valuable feature) and rely on the spellcheck in the Google toolbar or downgrade to an older version of Firefox so I can use the older spellcheck extensions. At least, until someone updates a plugin or the feature gets added to the next version of WordPress, so it’s easy for a non-developer or non-programmer to add the feature.

    I either need to become a programer, or stop being an early adopter.

    Mike, I’ve tried the code you posted. If I just use the part for the plugins, it works fine.

    When I add this

    if (isset($wp_version)) {
    add_filter("mce_plugins", "extended_editor_mce_plugins", 0);
    add_filter("mce_buttons", "extended_editor_mce_buttons", 0);
    add_filter("mce_buttons_2", extended_editor_mce_buttons2", 0);
    add_filter("mce_buttons_3", "extended_editor_mce_buttons3", 0);
    }

    I get the following error message.

    Parse error: parse error, unexpected T_CONSTANT_ENCAPSED_STRING in /usr/www/users/terrance/wp-content/plugins/advacned-wysiwyg.php on line 17

    So, I revert back to the original plugin code, then add the plugins for TinyMCE. I have all the buttons now, but I have no idea how to get them on separate rows instead of all in one.

    At present, this is what I have in the plugin editor.


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

    function extended_editor_mce_plugins($plugins) {
    array_push($plugins, "table", "fullscreen", "iespell");
    return $plugins;
    }

    function extended_editor_mce_buttons($buttons) {
    return array(
    "formatselect", "bold", "italic", "underline", "strikethrough", "separator",
    "bullist", "numlist", "indent", "outdent", "separator",
    "cut", "copy", "paste", "undo", "redo", "separator", "wphelp");
    }

    function extended_editor_mce_buttons_2($buttons) {
    return array(
    "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator", "link", "unlink", "anchor", "image", "hr", "separator");
    // Add buttons on the second toolbar line
    return $buttons;
    }

    function extended_editor_mce_buttons_3($buttons) {
    return array(
    "table", "sub", "sup", "forecolor", "backcolor", "charmap", "separator", "code", "fullscreen", "wordpress");
    // Add buttons on the third toolbar line
    return $buttons;
    }
    ?>

    This is what my WYSIWYG editor bar looks like:

    http://i25.photobucket.com/albums/c70/TerranceDC/wordpress.jpg

    In your line add_filter(“mce_buttons_2″, extended_editor_mce_buttons2″, 0); you need a ” before the extended_editor_mce_buttons2″

    change to:

    add_filter(“mce_buttons_2”, “extended_editor_mce_buttons2”, 0);

    Recopied and repasted your code, with the above correction.

    Got this.


    Parse error: parse error, unexpected $ in /usr/www/users/terrance/wp-content/plugins/advacned-wysiwyg.php on line 38

    I’ve spent the last two hours or more trying to make this work. To be honest, I’d rather have spent that time writing a post or something. It’ll probably take me hours more to get it to work, if at all, given my skill level with the programmming involved.

    I think it’s best I give up until someone makes it easy for a non-programmer to do it. As it stands now, I’ll probalby delete the plugin and try to get my WYSIWYG editor back to its original state at intallation. If I can do that, I may be able to jerryrig a spellcheck some other way. I think it will mean reverting back to an older version of Firefox and using an extension.

    If there’s anyone on the WordPress development team reading this, I’d like to suggest making the iespell plugin for TinyMCE an included part of the WP installation. It would add a lot of extra value to the

    Function:

    function extended_editor_mce_buttons($buttons) {
    return array(
    “formatselect”, “bold”, “italic”, “underline”, “strikethrough”, “separator”,
    “bullist”, “numlist”, “indent”, “outdent”, “separator”,
    “cut”, “copy”, “paste”, “undo”, “redo”, “separator”, “wphelp”);
    }

    Add the return $buttons; before the closing brace

    Well, almost.

    I tried it again. But this time a shift+refresh was what it took to get the rows of buttons to show up. I now have an entire array of features. Except spellcheck, which is what I wanted most. For some reason, the spellcheck button doesn’t show up. Of course, I don’t know what’s wrong. I’ve uploaded the plugin to the TinyMCE directory in wp-includes/js.

    If I’m reading the plugin correctly, it’s supposed to show up on the top row. Right after the search-replace button. But it ain’t there.

    http://i25.photobucket.com/albums/c70/TerranceDC/wysiwyg.jpg

    This is now what the plugin code looks like.

    if (isset($wp_version)) {
    add_filter("mce_plugins", "extended_editor_mce_plugins", 0);
    add_filter("mce_buttons", "extended_editor_mce_buttons", 0);
    add_filter("mce_buttons_2", "extended_editor_mce_buttons2", 0);
    add_filter("mce_buttons_3", "extended_editor_mce_buttons3", 0);
    }

    function extended_editor_mce_plugins($plugins) {
    array_push($plugins, "table", "fullscreen", "emotions", "advlink", "advimage", "searchreplace", "iespell");
    return $plugins;
    }

    function extended_editor_mce_buttons($buttons) {
    return array(
    "cut", "copy", "paste", "separator", "undo", "redo", "separator", "search,replace", "separator", "iespell", "charmap", "emotions", "separator", "link", "unlink", "anchor", "image", "separator", "removeformat", "code", "fullscreen", "wordpress", "wphelp");
    return $buttons;
    }

    function extended_editor_mce_buttons2($buttons) {
    return array(
    "formatselect", "bold", "italic", "underline", "strikethrough", "sub", "sup", "separator", "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator", "bullist", "numlist", "outdent", "indent", "separator", "forecolor", "backcolor", "separator", "hr", );
    return $buttons;
    }

    function extended_editor_mce_buttons3($buttons) {
    return array(
    "tablecontrols");
    return $buttons;
    }
    ?>

    I think I got it right. According to the TinyMCE documeantion, the button for ispell has the same name as the plugin. I keep moving it around, saving the plugin, going to the write screen and doing a shift+refresh. I even cleared my cache just in case. Nothing. Do I need to do more than add it in the advanced_edit plugin? Do I have to edit tinymce.js too? And how do I do that without breakin it?

    I can’t see what’s wrong, any more than I can see why it has to be so hard. If anyone can, I’d appreciate the help. As it is I’ll probably spend the whole day just trying to get this right.

    I just posted before seeing this thread… the problem with IEspell check is that you have to run Explorer.

    So going to the OP’s topic for this thread, my addition to the TinyMCE wishlist is a TinyMCE/Firefox spell checker solution.

    I am having the same problem. I am in the same place as terrance.

Viewing 15 replies - 1 through 15 (of 32 total)
  • The topic ‘TinyMCE Wishlist’ is closed to new replies.