Admin theme editor php on

[Tutorial] How to Use TinyMCE WYSIWYG Editor in WordPress Plugin / Theme Admin Page

Updated on : 8 November 2018.
In some case we need to store HTML data for our WordPress plugin or theme admin settings/options. We want to add/edit this HTML in visual mood. So we have to use an WYSIWYG editor with inputs fields. There are some JavaScript library to create WYSIWYG editor with HTML input fields ( mostly for ). Most people like TinyMCE Library. TinyMCE is a platform independent web based JavaScript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. TinyMCE has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems. In WordPress there is a build in TinyMCE library. WordPress is using this TinyMCE WYSIWYG editor in post/page editor page. But some times we need to use this editor with any other field like theme settings page. Here I will show you how to use this build in WordPress TinyMCE Editor with your own fields.

Читайте также:  Title of the webpage

WP TinyMCE WYSIWYG Editor

To add TinyMCE we have to include some JavaScript , CSS and images for this library. As WordPress has this library build in.There was a WP function wp_tiny_mce() to call this library. But this is pretty much complex to use and this function is deprecated now. Don’t worry, There is another new simple WordPress function wp_editor() to handle the whole process to use this library.

WP EDITOR

This function is very easy to use. Assume you have a text input field named ‘mytext’ and you want to edit it’s data in visual mood by using an WYSIWYG editor. Following codes will let you do that.

12, 'editor_class'=>'mytext_class')); ?>

You don’t need to use any HTML element for this field ‘mytext’, wp_editor() function creates a element automatically.

Usage

Parameters

Default: None $editor_id (string) (required) HTML ID attribute value for the textarea and TinyMCE. (may only contain lower-case letters)

Default: None $settings (array) (optional) An array of arguments.

Arguments

Default: true media_buttons (boolean) (optional) Whether to display media insert/upload buttons

Default: true textarea_name (string) (optional) The name assigned to the generated textarea and passed parameter when the form is submitted. (may include [] to pass data as array)

Default: $editor_id textarea_rows (integer) (optional) The number of rows to display for the textarea

Default: get_option(‘default_post_edit_rows’, 10) tabindex (integer) (optional) The tabindex value used for the form field

Default: None editor_css (string) (optional) Additional CSS styling applied for both visual and HTML editors buttons, needs to include tags, can use “scoped”

Default: None editor_class (string) (optional) Any extra CSS Classes to append to the Editor textarea

Default: teeny (boolean) (optional) Whether to output the minimal editor configuration used in PressThis

Default: false dfw (boolean) (optional) Whether to replace the default fullscreen editor with DFW (needs specific DOM elements and css)

Default: false tinymce (array) (optional) Load TinyMCE, can be used to pass settings directly to TinyMCE using an array()

Default: true quicktags (array) (optional) Load Quicktags, can be used to pass settings directly to Quicktags using an array()

Play with TinyMCE editor via JavaScript

You may need to add your custom listener function to various events of the editor. For example, you want to do something when the editor content has been changed. Also you may want to add your custom button to the editor toolbar. You can add your custom settings to TinyMCE of WP Editor through `tinymce-editor-setup` event.
References : https://make.wordpress.org/core/2017/05/20/editor-api-changes-in-4-8/

This event passes two arguments.
event : event object
editor : object of tinymce.Editor for the current Editor. tinymce.Editor class contains the core logic for a TinyMCE editor.
See the full reference of tinymce.Editor object
Also see the reference of TinyMCE editor Events

Here is a basic example :

$( document ).on( 'tinymce-editor-setup', function( event, editor ) < editor.on('Change', function (e) < console.log("Editor content : "+editor.getContent()); //trigger a custom event $(document).trigger('custom_wp_editor_change', [editor]); //do more here on change event >); //add more listener here >);

Here we added a custom listener to the Change event of TinyMCE editor. But this code has a problem. This will add custom listener to all instance of TinyMCE editor in the page. If you want to add your custom settings/function only for specific editor then you have to do a small trick.
Here’s an example of how to add custom settings/function only for specific editor:

$( document ).on( 'tinymce-editor-setup', function( event, editor ) < var EDITOR_ID = editor.settings.id; if( EDITOR_ID == 'your_editor_id' ) < editor.on('Change', function (e) < console.log("Editor content : "+editor.getContent()); //trigger a custom event $(document).trigger('custom_wp_editor_change', [editor]); //do more here on change event >); //add more listener here > >);

Here’s an example of how to add few of the default TinyMCE buttons to the toolbar:

jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) < editor.settings.toolbar1 += ',alignleft,aligncenter,alignright'; >);

Here is another example of how to add a custom button:

jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) < editor.settings.toolbar1 += ',mybutton'; editor.addButton( 'mybutton', < text: 'My button2', icon: false, onclick: function () < editor.insertContent("It's my button!"); >>); >);

This Article Meets Your Following Questions about WordPress TinyMCE WYSIWYG Editor

  • How to manually insert wysiwyg editor in wordpress form
  • wordpress WYSIWYG admin plugin
  • WYSIWYG edit wordpress theme
  • how to use tinymce editor in wordpress plugin development
  • wp WYSIWYG editors functionality
  • Use HTML Editor with your admin settings fields
  • Use TinyMCE editor with any WordPress input fields
  • Custom use of wp_editor() Function

Источник

WordPress: Enable the theme editor for Multisite

Let me start out by saying that I do not recommend using this method. I am writing it down to remember later if needed. There are some very good security reasons why editing themes is not allowed in WordPress multisite. In this particular instance the theme editor was required as there was literally no other method to alter theme files. It should also be noted that this method alters core WordPress files. That means if you upgrade you will lose your changes. If you do not upgrade though you are a chump. Either way you lose. When if have time to develop a better method I will update you here.

So here we go. In order to enable the theme editor in a WordPress Multisite install you will need to open the theme-editor.php file at

At the beginning of the file comment the following lines ( please comment and not remove so you can restore them later! )

This section of the file should now look like

Remember, this is very insecure! Use at your own risk and expect in an uncontrolled environment that you WILL be hacked.

One thought on “ WordPress: Enable the theme editor for Multisite ”

Hey there, just to make the above code more secure, I wouldn’t comment out both if statements, but would instead do this: /*
if ( is_multisite() && ! is_network_admin() ) wp_redirect( network_admin_url( ‘theme-editor.php’ ) );
exit();
>
*/ if ( !is_admin() )
wp_die(”.__(‘You do not have sufficient permissions to edit templates for this site.’).”);

Источник

WordPress: how to edit php files from admin panel?

If you are newer in WordPress and need to change some php files from admin panel and do not use your server admin panel or ftp, this article would help you.

How to edit php files of your theme in admin panel WordPress

To do this, you need to go to ‘Appearance’ and choose its subcategory ‘Theme editor’ in the left menu.

At the top of your right menu there is the ability to choose the theme you are going to edit (if you have several of them), select the theme you are currently using and press select. Your theme is automatically chosen by default.

WordPress: how to edit php files from admin panel?

Below are the list of the theme files you can edit: php and css. Select the one you need and make your necessary changes and press ‘Update File’. N.B. Do not forget to create copy of the original file to have the ability to restore it if some problems with new changes happened.

How to edit php files of your installed plugins in admin panel WordPress

If you decided to upgrade plugins that you have installed you can edit it also from admin panel.

In the left panel find ‘Plugins’ and choose its subcategory ‘Plugin Editor’. At the next screen at the top of right menu choose the plugin name you want to change, select its file and make changes to it. Do not forget to make a copy of the original file to have the ability to restore it.

Hope this post helped you and now you know how to edit theme or plugins files from admin panel in WordPress.

Источник

Оцените статью