WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] WYSIWYG (5 posts)

  1. Johan van den Broek
    Member
    Posted 2 years ago #

    Hi,

    I ran into a problem with the WYSIWYG. To me it is an annoyance. To less tech savvy endusers quite an issue.

    It occurs when the user inserts an image which has any caption. After adding the WYSIWYG-cursor is stuck inside the caption with no way to click beneath and continue writing text. The problem occurs only with captioned images because of the different markup.

    How to reproduce with a new post or page

    1. Start a new empty post.
    2. Use insert/Upload image to pick any image
    3. Write a caption text
    4. to insert the image into your WYSIWYG

    It is also possible to reproduce with an existing page. Just insert a captioned image at the very bottom.

    Now your cursor is stuck.

    A good workaround (imho) would involve adding a dummy <p>&nbsp;</p> into the WYSYWIG after the inserted image. That way the user gets an element to click on and move the cursor inside it. I'd need some help to accomplish this. Where can I edit the default insert code of WordPress WYSIWYG?

    Another workaround was suggested on wordpress.com. It involves switching to html view so I don't find very satisfying. My endusers should not have to switch to html. It is confusing for the non tech savvy and error prone.

    The root cause is tinyMCE so I guess applies to any WordPress setup. My environment however is:

    WordPress 3.3.1. | Supercache plugin, nothing else | Default WYSIWYG | FireFox 10 / IE9 | Apache 2.2.x | PHP 5.3.9

  2. Johan van den Broek
    Member
    Posted 2 years ago #

    I have solved the issue. It was hard to find but easy to add the solution to any theme following these steps:

    • Get the 2 .js files (editor_plugin_src.js and editor_plugin.js) from
      http://www.tinymce.com/forum/viewtopic.php?id=16533
    • Save them in a folder called "trailing"
    • Upload your folder "trailing" to "wp-includes/js/tinymce/plugins"
    • Add the following code to your functions.php
      function add_wysiwy_trailing_plugin($initArray)
      {
          $initArray['plugins'] .= ',trailing';
          return $initArray;
      }
      add_filter('tiny_mce_before_init', 'add_wysiwy_trailing_plugin');

    Now you're set. If you insert your element (image or table) you'll have added spacing before and after te end of document.

    Don't worry the extra spacing will be removed if you save your post :)

    I can imagine this would be useful for others too. I haven't figured out yet how to write a wordpress plugin so i need to perform this manually for all my sites. I'd like to see this in default wordpress distro.

  3. I can imagine this would be useful for others too.

    If you are discussing modifying the theme's functions.php file and not the core file or adding to the wp-includes/js/tinymce/plugins directory, then yes, this will be very useful. ;)

    If your solution is to place new files in wp-includes/js/tinymce/plugins then that may become a problem with the next WordPress release update... I've not yet tried it myself but I think you are recommending the Not Good Thing instead of the theme's functions.php file.

  4. Johan van den Broek
    Member
    Posted 2 years ago #

    Like most of us know WordPress will indeed overwrite altered code (hacks). This is not the case here. Note that this plugin lives in a new folder which is not there by default. WordPress doesn't delete added folders and files. During updates it replaces only your hacks of files it ships with.

    The plugin gets added to the configuration by a hook. This is done inside the functions.php of your theme. This is not hardcoded into any existing TinyMCE or WordPress files.

  5. This is done inside the functions.php of your theme.

    Thanks, that's exactly what I wanted to read. :)

Topic Closed

This topic has been closed to new replies.

About this Topic