WordPress.org

Ready to get started?Download WordPress

Make WordPress Core

Tagged: Editor Toggle Comment Threads | Keyboard Shortcuts

  • Andrew Nacin 1:40 pm on April 16, 2014 Permalink
    Tags: , , Editor, external libraries   

    jQuery UI and wpdialogs in WordPress 3.9 

    WordPress 3.9 does not use the “wpdialogs” TinyMCE plugin as part of the TinyMCE 4.0 update ( #16284, #24067), which comes with a new dialog manager. (For more, see this post and their migration guide.) This was a jQuery UI wrapper we had introduced back in WP 3.1. If you were using this in your own scripts, please be sure you are setting “wpdialogs” as a script dependency.

    If you were using jQuery UI for anything on the post screen, please be sure you are setting this as a script dependency.

    In both cases you may need to enqueue the “wp-jquery-ui-dialog” stylesheet, if you are using the WP UI dialog design.

     
  • Konstantin Obenland 1:55 am on April 15, 2014 Permalink
    Tags: , , Editor, , ,   

    HTML5 Galleries & Captions in WordPress 3.9 

    WordPress 3.6 introduced HTML5 versions of popular template tags, starting out with comments, the comment form, and the search form. With the 3.9 release we add galleries and captions to that list. Now, when adding HTML5 support for those features, WordPress will use <figure> and <figcaption> elements, instead of the generic definition list markup.

    To declare that your theme supports these new HTML5 features, add the following call to your theme’s functions.php file, preferably in a callback to the after_setup_theme action:

    add_theme_support( 'html5', array( 'gallery', 'caption' ) );
    

    For forward compatibility reasons, the second argument with the specific parts can’t be omitted when registering support. Otherwise a theme would automatically declare its support for HTML5 features that might be added in the future, possibly breaking its visually because of it.

    For both galleries and captions not only the markup changes when a theme declares its support for them, there are also peripheral changes that come with it.

    Galleries

    By default, galleries will not include inline styles anymore when in HTML5 mode. This caters to the trend of disabling default gallery styles through the use_default_gallery_style filter, a filter that even the last two default themes used. With that, theme developers can always start with a clean slate when creating their own set of gallery styles.

    We also took the opportunity to remove the line breaks between rows of images. Not only did they encourage an inferior way of positioning elements, more importantly they were non-semantic html elements that are meant for presentational use, and they made it harder to style galleries.

    Captions

    Up until now, captions received an additional 10 pixels of width, to keep text flowing around the caption, from bumping into the image. As @nacin put it, this has vexxed theme developers for years, and even resulted in the addition of a filter in WordPress 3.7 to manipulate the caption width.

    We were not able to completely remove the inline style in HTML5 mode, it’s still necessary to force captions to wrap, but we’re no longer the adding 10px of width. We also removed caption styles in the editor, bringing it on par with how non-captioned images are displayed:

    Twenty Thirteen and Twenty Fourteen have been updated to support both features, while retaining backwards compatibility with older WordPress versions. There is a remote possibility however, that child themes that use element selectors to overwrite gallery or caption styles can lose those customizations. Please test your child themes with the current development versions of the last two default themes.

    If there are any questions about the current implementation, feel free to leave a comment below.

     
    • andrei1709 5:08 am on April 15, 2014 Permalink | Log in to Reply

      Awesome! Thank you very much for this update :)

    • Manuel Schmalstieg 12:07 pm on April 15, 2014 Permalink | Log in to Reply

      Glad to see that the HTML5 mode removes the BR tags from the gallery markup. That’s great news for responsive theme development!

    • Morten Rand-Hendriksen 3:12 pm on April 15, 2014 Permalink | Log in to Reply

      This is great and long overdue. I always say WordPress is at the forefront of web standards and the two thing that have been lagging behind are the galleries and comments. This is a major milestone that will change the way we think about built in features.

    • glueckpress 9:15 am on April 16, 2014 Permalink | Log in to Reply

      (goes updating themes)

    • Justin Kopepasah 6:43 am on April 17, 2014 Permalink | Log in to Reply

      This is great news. I was happy when the filter was introduced and now I am elated to see the ability to implement HTML5 galleries completely. Definitely adding this to my latest theme.

    • car57 6:52 pm on May 14, 2014 Permalink | Log in to Reply

      I am not a developer, so would you be so kind as to explain what is meant by:

      To declare that your theme supports these new HTML5 features, add the following call to your theme’s functions.php file, preferably in a callback to the after_setup_theme action:

      add_theme_support( ‘html5′, array( ‘gallery’, ‘caption’ ) );

      I have a functions.php file for a child theme. I don’t know what code to insert to have “a callback to the after_setup_theme action”

      TIA

      • Knut Sparhell 12:39 am on May 15, 2014 Permalink | Log in to Reply

        A callback is a function (or class method) that is added to an action by add_action(). In this case add_action( 'after_setup_theme', 'my_theme_setup' );. Inside my_theme_setup() function you can add the theme support. It could also be added in other actions, like ‘init’ or ‘wp_loaded’, but not before ‘after_setup_theme’ has fired. If you just add the support in the outer scope of functions.php it may be executed too early in the load process. The internal data structures to receive this theme addition may not have been initialised before ‘after_setup_theme’.

        The outer scope of functions.php (and plugins) should only add actions and filters, nothing else. All things you want to do should be inside a “callback” (a function or a class method, to be precise).

        See http://code.tutsplus.com/articles/the-beginners-guide-to-wordpress-actions-and-filters–wp-27373

    • car57 7:56 pm on May 14, 2014 Permalink | Log in to Reply

      no matter how i add php to functions.php, this script is never run. Still getting old-style dl with inline css. Sigh.

    • paulinelephew 12:02 pm on July 23, 2014 Permalink | Log in to Reply

      Hi there,

      I am using the Argo theme and I have no caption displaying with galleries.
      I have tried about everything (including contacting the theme support a zillion times and they won’t get back to me).

      I inserted the lines below in function.php and nothing happens:

      add_action( ‘after_setup_theme’, ‘argo_setup’ );
      add_theme_support( ‘html5′, array( ‘gallery’, ‘caption’ ) );

      the website is http://www.terredalizes.fr

      If anyone can help it is greatly appreciated!

      Cheers,

      Pauline

  • Konstantin Kovshenin 11:20 am on April 11, 2014 Permalink
    Tags: , , Editor,   

    Plupload 2.x in WordPress 3.9 

    Plupload is the library that powers most of the file upload interfaces in WordPress, and in 3.9 we’ve updated the bundled library to version 2.1.1 (#25663). Here are some of things that have changed, which may affect WordPress plugins and themes.

    If you’re using direct references to Plupload’s runtime .js files, such as plupload.html5.js, note that these files are now gone. The following script handles were removed: plupload-html5, plupload-flash, plupload-silverlight and plupload-html4. If you need to enqueue the Plupload library, just use the plupload handle.

    If you’re constructing your own Plupload settings array vs. using wp_plupload_default_settings() and/or the _wpPluploadSettings object, note that some of the arguments have changed, most notably:

    • flash_swf_url should point to the new Moxie.swf file (See update)
    • Similarly, silverlight_xap_url should use the new Moxie.xap (See update)
    • The multiple_queues argument is no longer used
    • The max_file_size key has been moved to the filters array
    • The filters array now supports multiple keys, and the list of file types array has been moved to its mime_types key

    To illustrate that with code:

    $settings = array(
        // ...
        'flash_swf_url' => includes_url( 'js/plupload/plupload.flash.swf' ), // Unchanged
        'silverlight_xap_url' => includes_url( 'js/plupload/plupload.silverlight.xap' ), // Unchanged
        'filters' => array( 
            'max_file_size' => $max_upload_size . 'b', 
        ),
    );
    

    Plupload version 2.1.1 has also added some exciting new options and methods, which you can find in the updated documentation.

    As a result of this update in WordPress 3.9 we were able to add drag and drop upload support directly to our TinyMCE editor (#19845), and we’ve also added a new boolean flag to wp_editor(), which you can use to enable drag and drop upload support in your own instance of the editor (#27465):

    wp_editor( '', 'my-editor', array(
        // ...
        'drag_drop_upload' => true,
    ) );
    

    If you run into any problems with this update in 3.9, please leave a comment on this post and we’ll be happy to help you out!

    Update: I opened #27763 to address some of the compatibility issues around the update. We might be renaming the swf/xap files for backwards compatibility.

    Update, April 13: The original swf/xap filenames were restored.

     
    • Andrew Nacin 1:20 am on April 14, 2014 Permalink | Log in to Reply

      Post updated to reflect changes via #27763.

    • experiencedbadmom 11:54 am on April 18, 2014 Permalink | Log in to Reply

      Thank you for the link to the manual instructions. My blog is experiencedbadmom.com tho, not experiencedbadmom.com/wordpress/ – does that matter? Also, one of the steps says to deactivate plugins – how am I to deactivate plugins if I can’t even get into my dashboard? GoDaddy is my host – do I deactivate plugins somewhere on their servers?

    • Najeeb 6:16 am on April 21, 2014 Permalink | Log in to Reply

      Hello there,

      well I am using pluploader library in my plugin and when try ‘plupload’ handle to use shipped scripts it not applying to my uploader object, even I can see libraries are loading. Any help will be much appreciated.

      Cheers.

      • Konstantin Kovshenin 7:32 am on April 21, 2014 Permalink | Log in to Reply

        Hi there! Can you please provide more details, like a code sample? Also, has it worked in 3.8 and broken in 3.9 or does it just not work in general? Thanks!

    • pbusardo 7:13 pm on April 21, 2014 Permalink | Log in to Reply

      Perhaps this is relevant. I believe the FLA gallery uses Plupload. When I try to upload multiple files to the gallery, the GUI no longer appears.

  • Andrew Nacin 5:24 am on March 27, 2014 Permalink
    Tags: , , Editor,   

    TinyMCE 4.0 requires text/css for editor style files 

    As of TinyMCE 4.0, the visual editor iframe now has an HTML5 document type (<!DOCTYPE html>). In this scenario, CSS files must be served with the text/css content type. A server will serve a *.css file with the proper content type, but if you’re using a PHP file for an editor style file, you need to be the one to do it. It’s as simple as leading with:

    <?php
    header( 'Content-Type: text/css; charset=UTF-8' );
    

    So if you’re doing something particularly crazy with the editor and your styles aren’t loading in WordPress 3.9, you may just need a content type. Also, Chrome (and probably other browsers) throw a console warning when this happens.

    (via #27288)

     
  • Andrew Ozz 6:33 pm on January 18, 2014 Permalink
    Tags: , , Editor,   

    TinyMCE 4.0 is in core 

    This is a major upgrade for the WordPress editor. There are many changes in 4.0:

    • New UI and UI API.
    • New theme.
    • Revamped events system/API.
    • Better code quality, readability and build process.
    • Lots of (inline) documentation.
    • And generally many improvements everywhere.

    All default TinyMCE plugins have been upgraded. The WordPress implementation custom plugins  were upgraded too. Looking in the plugin repository, there are a lot of WordPress plugins  that add a TinyMCE plugin. Because of all the API changes, most of these plugins would need an update too. If you are the author of such plugin, please test it in trunk now.

    Generally there are three groups of TinyMCE plugins added by WordPress plugins:

    • Custom plugin created specifically for the WordPress plugin. If you’ve developed this kind of plugin, please see the 3.x to 4.0 migration guide and the 4.0 API documentation.
    • WordPress plugins that add third-party or default TinyMCE plugins would (of course) need to be updated to include the 4.0 version of the plugin. The PHP global $tinymce_version can be used to determine which plugin to load.
    • Mini-plugins that only add a button to the toolbar. This works pretty much the same. It is advisable to update to use the ‘dashicons’ icon font instead of image icon.

    TinyMCE 4.0 includes a ‘compat3x’ plugin that should prevent all fatal errors caused by old plugins and adds compatibility for most of the 3.x API methods. If there are any editor related Javascript errors while running trunk, please open a trac ticket quoting the first error from the browser console.

     
    • Shapeshifter 3 7:24 pm on January 18, 2014 Permalink | Log in to Reply

      Mr. Ozz,

      I’ve been using the TinyMCE Spellchecker plugin but recently disabled it while reviewing your progress with TinyMCE 4.0. I was going to leave it installed (but disabled) until the developer updates it. Would you recommend that I completely uninstall it instead?

      • Andrew Ozz 9:03 pm on January 18, 2014 Permalink | Log in to Reply

        The updated ‘spellchecker’ plugin currently doesn’t work with the (old) PHP back-end. This is a somewhat moot problem as all newer browsers have built-in spellcheckers. Furthermore Jetpack includes the After the Deadline module which also checks grammar.

        I know that the TinyMCE team has plans for the ‘spellchecker’ plugin, but for now it has been removed from the default editor configuration.

    • PeterRKnight 7:31 pm on January 18, 2014 Permalink | Log in to Reply

      I’ve been looking forward to this so bad. Awesome news!!

    • Jeremy Felt 7:43 pm on January 18, 2014 Permalink | Log in to Reply

      Great news, thanks @azaozz!

    • Mike Schinkel 9:04 pm on January 18, 2014 Permalink | Log in to Reply

      Hi @azaozz,

      This is indeed good news!

      Do you (or anyone else) know if it will make it easier to have more than one TinyMCE instance in a single admin page?

      • Andrew Ozz 9:15 pm on January 18, 2014 Permalink | Log in to Reply

        Creating multiple TinyMCE instances has been quite easy for some time :)

        From PHP all that’s needed is to call `wp_editor()` and pass any initial content and an unique HTML ID. From JS you can simply call `tinymce.init({ my_settings_obj })`. TinyMCE 4.0 also supports “inline” instances, so any part of the screen can be made editable (of course that would need some more JS to handle saving).

    • adamsilverstein 5:06 am on January 19, 2014 Permalink | Log in to Reply

      Thanks again Sir Ozz for your diligent work on this. Its going to make a huge difference for everyone editing content every day in WordPress ! Even if they don’t notice how much has improved, the improvements will benefit them. Its a bit of open heart surgery at the core of WordPress and you are the man to handle it!

      So cheers to you from the untold masses who benefit from your work! Thank you!

    • emzo 11:21 pm on January 19, 2014 Permalink | Log in to Reply

      Great work on this!

      Do you happen to know if TinyMCE 4.x can be moved around in the DOM without breaking? With the 3.x release, dragging/moveing a WP metabox containing a TinyMCE instance it causes TinyMCE to break. I believe it’s down to how certain browsers deal with moving iframes within the DOM, and it is possible to circumvent the problem by removing the TinyMCE instance then re-adding it after moving, but it is a bit of a faff. Does TinyMCE 4.x help with this issue in any way?

      • Andrew Ozz 12:02 am on January 20, 2014 Permalink | Log in to Reply

        Haven’t tried that yet, but 4.0 is more resilient than 3.5, so hopefully it works. If not, a relatively simple workaround would be to not initialize the instance on page load and have a button/link “Edit”. Then on initialization lock down the postboxes so they cannot be moved: $( selector ).sortable('disable');.

    • Piet 1:16 am on January 20, 2014 Permalink | Log in to Reply

      Great stuff, reading the 4.x documentation now.

      After downloading current core from git and trying it out, I noticed that a tooltip has been added to the buttons. Does anyone know how to include that tooltip as my plugin now shows the tooltip en.undefined

      • Andrew Ozz 1:37 am on January 20, 2014 Permalink | Log in to Reply

        IMHO the best way to learn the new API is to check the default plugins. Most of them add a button and also a menu item (4.0 can show a menubar too). The menubar is not shown by default in WordPress but that might change.

        The translations API in 4.0 is changed too. All strings are in English and are matched directly against the loaded translation. The ‘compat3x’ plugin patches it to make it back-compat. If you see ‘undefined’ perhaps refresh the browser cache again (just in case) and trace where it comes from. You should be seeing some kind of a string.

    • Jeff Chandler 7:38 pm on January 20, 2014 Permalink | Log in to Reply

      Using the bleeding edge nightlies for 3.9, am I suppose to see a noticeable different between the visual editor of WordPress 3.8 and what was added to WordPress with TinyMCE 4.0? I don’t see much of a difference except for a dark background tooltip when hovering over the buttons and the removal of the Paste From Word button.

    • Paal Joachim Romdahl 12:46 pm on January 21, 2014 Permalink | Log in to Reply

      Looking at the interface for 4.0 the use of tables is still much in use (from what I saw that the tinyMCE web site). It would be nice to create columns/boxes in a similar way to creating tables. As one would be able to place content inside the cells (dashed lined area) create buffers between the cells as a margin.

      This way one would be able to create boxes/columns in an easy visual way using the table look and feel.

      Perhaps even add a background color, curved lines, shadow etc..:)

    • needle 11:33 am on January 22, 2014 Permalink | Log in to Reply

      My existing wp_editor() code defines the buttons that I want to have appear by populating the ‘tinymce’ array that is passed to wp_editor() as part of the $settings array. But now, because the ‘advanced’ theme is no longer present, the editor no longer works. What’s the procedure for recreating this functionality with TinyMCE 4.0?

    • David Wells 8:56 pm on April 16, 2014 Permalink | Log in to Reply

      Our tinymce button is done from the tinymce toolbar with the 3.9 update and tinyMCE 4.0

      I’ve read http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x but don’t see any thing specific to our case.

      Our code was adding an additional button to the toolbar: https://github.com/inboundnow/leads/blob/master/shared/inbound-shortcodes/js/tinymce.js#L41-L183

      Can anyone see what the issue might be? or can you point me in the right direction to fix?

      Many thanks

      • Andrew Ozz 11:15 pm on April 25, 2014 Permalink | Log in to Reply

        The TinyMCE API has changed, adding a “simple” button works pretty much like in 3.x, however for adding a drop-down or a split button you’ll need to use the new API. There are some examples in the TinyMCE default plugins.

    • Mr. Vibe 9:47 am on April 17, 2014 Permalink | Log in to Reply

      +1, similar case as @David wells. Tried the compact3x plugin and it does not work. Any ideas ? The codex is not updated and we’re hanging in the middle of nowhere.

    • Jacob N. Breetvelt 10:13 am on April 17, 2014 Permalink | Log in to Reply

      Can you lease help me in fixing this?

      /* wppa-tinymce.js

      • Pachkage: wp-photo-album-plus
      • Version 5.2.17
      • /

      // closure to avoid namespace collision
      (function(){
      // creates the plugin
      tinymce.create(‘tinymce.plugins.mygallery’, {
      // creates control instances based on the control’s id.
      // our button’s id is “mygallery_button”
      createControl : function(id, controlManager) {
      if (id == ‘mygallery_button’) {
      // creates the button
      var button = controlManager.createButton(‘mygallery_button’, {
      title : ‘WPPA+ Shortcode Generator’, // title of the button
      image : wppaImageDirectory+’albumnew32.png’, // path to the button’s image
      onclick : function() {
      // triggers the thickbox
      var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
      W = W – 80;
      H = jQuery(window).height();
      H = H – 115;
      tb_show( 'WPPA+ Shortcode Generator', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=mygallery-form' );

      var isNew = wppa_getCookie('wppanewstyle') == 'on';
      if (isNew) document.getElementById('mygallery-newstyle').checked = 'checked';
      }
      });
      return button;
      }
      return null;
      }
      });

      // registers the plugin. DON'T MISS THIS STEP!!!
      tinymce.PluginManager.add('mygallery', tinymce.plugins.mygallery);

      // executes this when the DOM is ready
      jQuery(function(){
      // creates a form to be displayed everytime the button is clicked
      // you should achieve this using AJAX instead of direct html code like this
      var xmlhttp = wppaGetXmlHttp(); // located in wppa-admin-scripts.js
      // wppa-ajax.php calls wppa_make_tinymce_dialog(); which is located in wppa-tinymce.php

      var url = wppaAjaxUrl+'?action=wppa&wppa-action=tinymcedialog';
      xmlhttp.open("GET",url,true);
      xmlhttp.send();
      xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status!=404 ) {
      var formtext = xmlhttp.responseText;

      var form = jQuery(formtext);

      var table = form.find('table');
      form.appendTo('body').hide();

      // handles the click event of the submit button
      form.find('#mygallery-submit').click(function(){

      var type = table.find('#mygallery-type').val();
      var temp1;
      if (table.find('#mygallery-album').val()) temp1 = table.find('#mygallery-album').val().split('|');
      else temp1 = [''];
      var album = temp1[0];
      var tags = table.find('#mygallery-tags').val();
      var andor = document.getElementById('mygallery-andor').checked;
      var size = table.find('#mygallery-size').val();
      var align = table.find('#mygallery-align').val();
      var temp2;
      if (table.find('#mygallery-photo').val()) temp2 = table.find('#mygallery-photo').val().split('.');
      else temp2 = [''];
      var photo = temp2[0];
      var temp3 = photo.split('/');
      photo = '';
      for ( i=0; i 0) {} // Ok, positive number
      else if (size == ‘auto’) {} // Ok, auto
      else {
      alert(‘Sorry, you made a mistake\n\nSize must be a positive number or auto\nA number less than 100 will be interpreted as a percentage of the current column width\n\nPlease try again’);
      return;
      }
      if (size < 100) size=size/100;

      // Check for inconsistencies
      if ( type == 'cover' ) {
      if ( album == '#topten' || album == '#lasten' || album == '#comten' || album == '#featen' || album == '#tags' || album == '#all' ) {
      alert('Sorry, you made a mistake\n\nA — special — selection has no album cover\n\nPlease try again');
      return;
      }
      }
      if ( type != 'photo' && type != 'mphoto' && type != 'slphoto' && type != 'generic' && type != 'upload' ) {
      if ( album == 0 ) {
      alert('Sorry, you made a mistake\n\nPlease select an album\n\nPlease try again');
      return;
      }
      }
      if ( type == 'photo' || type == 'mphoto' || type == 'slphoto' ) {
      if ( photo == 0 ) {
      alert('Sorry, you made a mistake\n\nPlease select a photo\n\nPlease try again');
      return;
      }
      }
      if ( type == 'filmonly' && ! newstyle ) {
      alert('Sorry, filmonly is as newstyle shortcode available only.\n\nPlease check the new style checkbox and try again.');
      return;
      }
      if ( type == 'upload' && ! newstyle ) {
      alert('Sorry, the upload box is as newstyle shortcode available only.\n\nPlease check the new style checkbox and try again.');
      return;
      }
      if ( album == '#tags' && ! tags ) {
      alert('Select at least one tag and try again.');
      return;
      }

      // Make the shortcode
      var shortcode = '%%wppa%%';

      if ( type == 'generic' ) {
      }
      else if ( type == 'photo' || type == 'mphoto' || type == 'slphoto' ) {
      shortcode += ' %%'+type+'='+photo+'%%';
      }
      else if ( album == '#tags' ) {
      shortcode += ' %%album=#tags,';
      var sep = andor ? ',' : ';';
      var last = tags.length – 1;
      for (var tag in tags) {
      shortcode += tags[tag];
      if ( tag != last ) shortcode += sep;
      }
      shortcode += '%%';
      }
      else {
      var temp = album.split('|');
      if ( temp[0] == '#topten'|| temp[0] == '#lasten' || temp[0] == '#comten' || temp[0] == '#featen' ) {
      if ( cnt != '0' ) {
      shortcode += ' %%'+type+'='+temp[0]+','+alb+','+cnt+'%%';
      }
      else if ( alb != '0' ) {
      shortcode += ' %%'+type+'='+temp[0]+','+alb+'%%';
      }
      else {
      shortcode += ' %%'+type+'='+album+'%%';
      }
      }
      else {
      shortcode += ' %%'+type+'='+album+'%%';
      }
      }

      if ( size != 0 )
      shortcode += ' %%size='+size+'%%';

      if ( align != 'none' )
      shortcode += ' %%align='+align+'%%';

      // Make the new shortcode
      var newShortcode = '[wppa type="'+type+'"';

      if ( type == 'generic' ) {
      }
      else if ( type == 'photo' || type == 'mphoto' || type == 'slphoto' ) {
      newShortcode += ' photo="'+photo+'"';
      }
      else if ( album == '#tags' ) {
      newShortcode += ' album="#tags,';
      var sep = andor ? ',' : ';';
      var last = tags.length – 1;
      for (var tag in tags) {
      newShortcode += tags[tag];
      if ( tag != last ) newShortcode += sep;
      }
      newShortcode += '"';
      }
      else {
      var temp = album.split('|');
      if ( temp[0] == '#topten' || temp[0] == '#lasten' || temp[0] == '#comten' || temp[0] == '#featen' ) {
      if ( cnt != '0' ) {
      newShortcode += ' album="'+temp[0]+','+alb+','+cnt+'"';
      }
      else if ( alb != '0' ) {
      newShortcode += ' album="'+temp[0]+','+alb+'"';
      }
      else {
      newShortcode += ' album="'+temp[0]+'"';
      }
      }
      else {
      if ( album || type != 'upload' ) {
      newShortcode += ' album="'+album+'"';
      }
      }
      }

      if ( size != 0 ) newShortcode += ' size="'+size+'"';
      if ( align != 'none' ) newShortcode += ' align="'+align+'"';
      newShortcode += '][/wppa]';

      // inserts the shortcode into the active editor and save the newstyle checkbox
      if (newstyle) {
      tinyMCE.activeEditor.execCommand('mceInsertContent', 0, newShortcode);
      wppa_setCookie('wppanewstyle', 'on', '365');
      }
      else {
      tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);
      wppa_setCookie('wppanewstyle', 'off', '365');
      }

      // closes Thickbox
      tb_remove();
      });
      }
      }
      });
      })()

      function wppaGalleryTypeChange(value) {

      if (value == 'generic' ) {
      jQuery('.mygallery-photo').hide();
      jQuery('.mygallery-album').hide();
      jQuery('.mygallery-help').show();
      }
      else if (value == 'photo' || value == 'mphoto' || value == 'slphoto' ) {
      jQuery('.mygallery-photo').show();
      jQuery('.mygallery-album').hide();
      jQuery('.mygallery-help').hide();
      }
      else {
      jQuery('.mygallery-photo').hide();
      jQuery('.mygallery-album').show();
      jQuery('.mygallery-help').hide();
      }
      }

      function wppaTinyMcePhotoPreview(id) {
      jQuery('#mygallery-photo-preview').html('‘);
      }

      function wppaTinyMceAlbumPreview(id) {
      var html = ”;
      var temp = id.split(‘|’);
      var count = temp.length – 1;

      if (count > 0) for (var i = 1; i <= count; i++) {
      if ( temp[i] != '' ) html += '‘;
      }
      else {
      html = ‘

      ‘+wppaNoPreview;
      }
      jQuery(‘#mygallery-album-preview’).html(html);

      if ( temp[0] == ‘#topten’ || temp[0] == ‘#lasten’ || temp[0] == ‘#comten’ || temp[0] == ‘#featen’ ) {
      jQuery(‘.mygallery-extra’).show();
      }
      else {
      jQuery(‘.mygallery-extra’).hide();
      }
      }

      function wppaGalleryAlbumChange(value) {
      if ( value == ‘#tags’ ) jQuery(‘.mygallery-tags’).css(‘display’, ”);
      else jQuery(‘.mygallery-tags’).css(‘display’, ‘none’);
      }

    • llazarus 11:23 am on April 17, 2014 Permalink | Log in to Reply

      Upgraded to 3.9 and tinyMCE 4.0. I am unable to Edit a hyperlink – if I select the link and click Insert/Edit Hyperlink, the existing link is erased.

      Also, when pasting a link from Word that has a target=”_blank”, the extra code is removed – this making more work for me as I specifically generate the link to open in a new window. Is there anyway to stop the target=”_blank” being removed?

      Many thanks

    • TTBoS 10:22 pm on April 17, 2014 Permalink | Log in to Reply

      A similar problem is with onmouseover and onmouseout WP removes the html code from the article / news.

    • alfredocubitos 2:27 pm on April 18, 2014 Permalink | Log in to Reply

      Hi,

      how can I get data passed with the “tiny_mce_before_init” filter?
      In my old plugin I get the data with “tinyMCE.activeEditor.settings” but with tinyMCE I can’t get any data.
      Or has the “tiny_mce_before_init” filter changed?

      Thanx for your answer

      • Andrew Ozz 10:59 pm on April 25, 2014 Permalink | Log in to Reply

        No, the filter hasn’t changed and tinymce.activeEditor.settings works as before. Seems there is another problem. The init settings can also be accessed with ‘tinyMCEPreInit.mceInit.editor_id’ where ‘editor_id’ is the id of the instance you need.

    • thanhluan710 5:10 am on April 19, 2014 Permalink | Log in to Reply

      Hi all.
      I upgraded WordPress to Version 3.9 and I have a problem with Visual Editor.
      My site is for coupon. When I write a post on Visual Editor on “Visual” tab and I want insert html code, I move “Text” tab. For example code:

      Click here to WordPress:

      Well done. A post is successful but When I update post, I see:

      Click here to WordPress:

      Link was lost. I can not open a new tab when click button. On WordPress version 3.8.3, all is good. I turned off all plugin but not success. I install new site with WP 3.9 but same.

      Please me. Thank you.

    • Karen Pogosyan 2:05 pm on April 22, 2014 Permalink | Log in to Reply

      Hello, everyone, just updated wordpress to new 3.9, new features are great, love them. Only got some issues with tinyMCE 4. I use wp_editor to create multiple tinyMCE editors with custom field.

      $tinymce_opt = array(
      	 'height' 	 => "250",
      	 'plugins'  => "ninzio_button, line, gap, slider_colorbox, icon_list, icons, font_size",
      	 'toolbar1' => "formatselect,fontselect, styleselect,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,forecolor,removeformat,charmap,undo,redo",
      	 'toolbar2' => "ninzio_button, line, gap, slider_colorbox, icon_list, icons, font_size",
      	 'toolbar3' => ""
      );
      
      $settings = array (
      	'tinymce'       => $tinymce_opt
      ); 
      wp_editor( ${"layer_$i"}, "layer_$i", $settings);
      

      everything is fine. the problem is that it does not understand plugins (my custom shortcodes, that i created). Custom shortcodes work fine in regular wp editor, but iwth multiple wp_editor, it just don’t find them.

      In colsole i get error 404 can’t find

      for example “line” shortcodes

      http://localhost/0_test/wp-includes/js/tinymce/plugins/line/plugin.min.js 404 (Not Found)

      All my custom shortcodes are ignored, not found.

      Does anyone know, how to tell tinyMCE + wp_editor to use custom shortcodes?

      Thanks very much!

      • Andrew Ozz 10:45 pm on April 25, 2014 Permalink | Log in to Reply

        As your custom MCE plugins are not in the default location, i.e. not in wp-includes/js/tinymce/plugins/, you have to load them as external plugins using the ‘mce_external_plugins’ filter.

    • Stagger Lee 8:09 pm on April 23, 2014 Permalink | Log in to Reply

      Can someone share code snippet for functions.php to disable some buttons (and new toolbar) in comment forms ? Old one doesnt work anymore witj new tinymce.

      Btw, new WP 3.9 and new Tinymce are real candy. Real enjoyable to work with latests WP.

      Have difficult to understand why Drupal chosed Ckeditor for core in its Drupal 8 version.
      Ckeditor aka “look at me i am from outer space with my huge buttons and huge shadows that never near fit to themes”.

      • Andrew Ozz 10:54 pm on April 25, 2014 Permalink | Log in to Reply

        That should be set in the plugin you’re using for adding TinyMCE to the comment form. If that plugin uses wp_editor(), it may be possible to use the ‘mce_buttons’, ‘mce_buttons_2′, etc. filters. Having a code snippet in functions.php is not the best way to do that :)

    • Thomas S. Butler 10:31 pm on April 25, 2014 Permalink | Log in to Reply

      As the author of the Google Fonts Manager plugin, I am having this issue as well. The custom font dropdown no longer appears and the TinyMCE documentation is no help at all. The plugin was using the following functions: theme_advanced_buttons1_add_before, theme_advanced_fonts and tiny_mce_before_init to add the font options. It no longer works and I’m stumped (so far) as to how to address the issue.

      • Andrew Ozz 11:28 pm on April 25, 2014 Permalink | Log in to Reply

        Would have been better to use a WordPress filter, ‘mce_buttons’ or ‘mce_buttons_2′, to add the button. Would have worked without a change. All the ‘theme_advanced_*’ settings are gone from TinyMCE as there is a new theme. Have a look at the settings: http://www.tinymce.com/wiki.php/Configuration, seems you need ‘font_formats': http://www.tinymce.com/wiki.php/Configuration:font_formats.

      • Stagger Lee 8:54 am on April 26, 2014 Permalink | Log in to Reply

        Thank you Andrew. mce_buttons never worked for me, maybe i used wrong code snippet.
        I know what you are saying, but this way i block even Admins to all Tinymce options and icons.
        Cant use plugin for this because they dont exist. One exist but is outdated.

        This code snippet works for me now, unfortunately had to remove new menu toolbar at the top even for admins with Tinymce advanced plugin (global setting).

        ———————————————————————————————–

        add_filter( ‘comment_form_defaults’, ‘rich_text_comment_form’ );
        function rich_text_comment_form( $args ) {
        ob_start();
        wp_editor( ”, ‘comment’, array(
        ‘media_buttons’ => false, // show insert/upload button(s) to users with permission
        ‘textarea_rows’ => ’10’, // re-size text area
        ‘tinymce’ => array(
        ‘menubar’ => ”,
        ‘toolbar1′ => ‘fontsizeselect,bold,italic,underline,strikethrough,bullist,numlist,alignleft,aligncenter,alignright,blockquote,link,unlink,|,undo,redo,media,image,emoticons,’,
        ‘toolbar2′ => ”, // 2nd row, if needed
        ‘toolbar3′ => ”, // 3rd row, if needed
        ‘toolbar4′ => ” // 4th row, if needed
        ),
        ‘quicktags’ => array(
        ‘buttons’ => ‘strong,em,link,block,del,ins,img,ul,ol,li,code,close’
        )
        ) );
        $args['comment_field'] = ob_get_clean();
        return $args;
        }
        ————————————————————————————————

    • nextstep 5:20 am on April 26, 2014 Permalink | Log in to Reply

      How do I restore the icons? I hate the menu options — it’s now multiple click to find what I want (not what you want to give me. The menu — in my opinion — is a definite step backwards.

    • urkekg 8:29 am on April 26, 2014 Permalink | Log in to Reply

      Hi all,

      I’m not sure if this is right place to post this question, but let me try :)

      We need a class field in Link Insert/Edit plugin (WP_Link). Is that mod on the way, or I can submit diff I did to enable this? I altered core files /wp-includes/js/wplink.js and /wp-includes/class-wp-editor.php

      Also, we need some docs regarding custom colour swatches and number of rows. Here is my answer to that question on StackOverflow http://stackoverflow.com/a/23183406/1509769

    • Stagger Lee 9:04 am on April 26, 2014 Permalink | Log in to Reply

      Maybe someone from the core team should take a look at it. Maybe i am plain stupid and miss something in the front of oy nose, but i struggle from website to website to customize editor for my comment form. Losing much time on it every time.

      Second problem is my code snippet in functions.php for overriding editor works in admin part but not at the front end. Not so easy to style comments editor. Use of !important declarations are so bad, but had to use them. Right now i find it more easy to go and change it directly in the core, CSS. What to do, cant lose much time on it every time.

    • Stagger Lee 9:27 am on April 26, 2014 Permalink | Log in to Reply

      As i know and i am aware people from Drupal team in latest years sniff things around WP as undercover agents, and imitate some good things. You can take something good from them too. For instance Text formats and editor profiles for writing and editors. So simple and so easy. Easy to customize all butons, options, and override CSS (or JS) files for each profile/format.

    • akamaxbuz 10:04 pm on May 16, 2014 Permalink | Log in to Reply

      What about keeping the format styling when pasting from Pages? I use Pages to edit my client’s dock files. Styled text from Pages does loses the style format when I paste it into the 3.9 edit pane. This is a problem.

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel