Title: Tiny MCE – Adding the noneditable plugin Last modified: August 24, 2016 --- # Tiny MCE – Adding the noneditable plugin * Resolved [devo.uk](https://wordpress.org/support/users/devouk/) * (@devouk) * [11 years ago](https://wordpress.org/support/topic/tiny-mce-adding-the-noneditable-plugin/) * Hi * I really would love to be able to have the standard plugin on noneditable to be actived in tiny_mce front and backediting * I have uploaded the plugin to the tiny mce plugin directory * but then i havent got a clue how to activate it * This is from the tinymce website * tinymce.init({ plugins: “noneditable”, noneditable_leave_contenteditable: true}); * but i have no idea of how or where to incorporate this in to wordpress. * When answering please ensure you tell me the exact files to edit to add this even if it is in the general functions file of the template in use as i havent got a clue … !!! * many thanks nick Viewing 3 replies - 1 through 3 (of 3 total) * [Jack](https://wordpress.org/support/users/theelectricwiz/) * (@theelectricwiz) * [10 years, 6 months ago](https://wordpress.org/support/topic/tiny-mce-adding-the-noneditable-plugin/#post-6039952) * 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. * Thread Starter [devo.uk](https://wordpress.org/support/users/devouk/) * (@devouk) * [10 years, 3 months ago](https://wordpress.org/support/topic/tiny-mce-adding-the-noneditable-plugin/#post-6039958) * 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' => 'http://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 `Protected Area` 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 * `user_level != 10) { echo ''; } } * My work here is done !! Viewing 3 replies - 1 through 3 (of 3 total) The topic ‘Tiny MCE – Adding the noneditable plugin’ is closed to new replies. * 3 replies * 2 participants * Last reply from: [devo.uk](https://wordpress.org/support/users/devouk/) * Last activity: [10 years, 3 months ago](https://wordpress.org/support/topic/tiny-mce-adding-the-noneditable-plugin/#post-6039959) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics