Tiny MCE – Adding the noneditable plugin

Hey Nick,

Was looking for the same thing, so had a dig in the WordPress code. I managed to find the filter tiny_mce_plugins, which gets passed an array of plugin strings. You can add the noneditable string to that array to enable the plugin… if it was included in the WordPress install, which it isn’t unfortunately.

One hack would be to copy the plugin file from another of tinymce to the correct place (wp_includes/js/tinymce/plugins/noneditable/plugin.min.js).

The other way would be just to include the contents of the plugin file in your javascript (a slightly horrible way which could lead to conflict, unless you renamed the plugin in the code).

I tried doing the later, but the plugin didn’t work well enough for my requirements (protecting divs, which with the plugin active, you could key into and then edit still).

Something I have also tried is setting contenteditable=false on the div to protect, which works until you click on it, which is set to popup a tinymce popup for my div. The div ends up replacing the body contents. I haven’t been able to figure out why yet.

Hope this helps.

Was thinking about modifying the noneditable plugin to see if I can get it to work properly. Will let you know how I go.

Would be good to hear if anyone has another way of protecting content in the tinymce visual editor?

Cheers.

Hi Jack and all.

Finally had another play with the noneditable under the standard wordpress editor. Its not the best solution but it is a working. Not the best solution since I am not sure if a wordpress update may change one of the files so you might have to reapply the fix.

You may be able load the functions and put them in your themes functions.php – I will try and explore later

1) Downloaded tinymce
2) Expand / Search for the tinymce\js\tinymce\plugins directory
you will see the noneditable
3) copy this directory and paste it to wp-includes\js\tinymce\plugins
4) then go to and load the wp-includes\class-wp-editor.php in your text editor and find the code / block

/**
* Filter the list of TinyMCE external plugins.
*
* The filter takes an associative array of external plugins for
* TinyMCE in the form 'plugin_name' => 'url'.
*
* The url should be absolute, and should include the js filename
* to be loaded. For example:
* 'myplugin' => 'https://mysite.com/wp-content/plugins/myfolder/mce_plugin.js'.
*
* If the external plugin adds a button, it should be added with
* one of the 'mce_buttons' filters.
*
* @since 2.5.0
*
* @param array $external_plugins An array of external TinyMCE plugins.
*/
$mce_external_plugins = apply_filters( 'mce_external_plugins', array() );

$plugins = array(
'charmap',
'colorpicker',
'hr',
'lists',
'media',
'paste',
'tabfocus',
'textcolor',
'fullscreen',
'wordpress',
'wpautoresize',
'wpeditimage',
'wpemoji',
'wpgallery',
'wplink',
'wpdialogs',
'wptextpattern',
'wpview',
'wpembed',

);
4) Add the line underneath ‘wpembed’
5) 'noneditable',
6) Save the code
7) You can now use the editor in text mode and use <div="noneditable">Protected Area</div> and then when you swap to HTML mode it will now see the code but will be non editable

To take this a stage further you can make it so the noneditable code is not shown

I altered \wp-includes\js\tinymce\skins\lightgray\content.min.css and unminified it and added this around line 68

body#tinymce.mcenoneditable {display:none}

{if you dont want to unminify the file – search the file and paste after .mce-pagebreak {cursor: default;display: block;border: 0;width: 100%;height: 5px;border: 1px dashed #666;margin-top: 15px;page-break-before: always}

Finally by adding an extra bit of code in a functions file, every time you go in to the editor, it will start on the html tab so is a bit safer for a normal editor user

Create a file /wp-content/themes/yourthemenamehere/includes/theme-functions.php and just add this line of code

<?php
add_filter( 'wp_default_editor', create_function('', 'return "tinymce";'));

The ultimate on the todo list would be able to assign an editor users which then has the text tab hidden thus reducing risk of a non tech user altering bits but unsure if that would happen, maybe a feature for tinymce to add or wordpress i not really sure.

So i hope this helps anyone out .. as it has taken a lot of blood sweat and tears and many hours of determination !!!

Cracked : removing the text button on the editor so an EDITOR role user only access the html pane

As i said in the todo list, did a bit of searching and found the following code which works !!

Add this to your themes function.php file (should reside or needs creating in the root of your themes directory)


<?php
add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );
add_action( 'admin_head', 'disable_html_editor' );
function disable_html_editor() {
global $current_user;
get_currentuserinfo();
if ($current_user->user_level != 10) {
echo '<style type="text/css">#content-html, #quicktags {display: none;}</style>';
}
}


My work here is done !!