@wpmvc/classic-editor
v0.0.2
Published
A React component for integrating WordPress' classic editor using wp.editor API
Downloads
153
Maintainers
Readme
ClassicEditor
ClassicEditor
is a React component that seamlessly integrates the WordPress Classic Editor using the wp.editor
API. This component provides a fully customizable TinyMCE editor for your React applications, enabling rich text editing capabilities.
Installation
To install the @wpmvc/classic-editor
package, run:
npm install @wpmvc/classic-editor
Usage
You can use the ClassicEditor
component in your React application as follows:
import { useState } from '@wordpress/element';
import ClassicEditor from '@wpmvc/classic-editor';
const MyComponent = () => {
const [content, setContent] = useState('Initial content here');
return (
<div>
<h2>My Custom Editor</h2>
<ClassicEditor
value={content}
onChange={(newContent) => setContent(newContent)}
height={300} // Optional, default is 250
hasMedia={true} // Optional, allows media buttons
useExtendStyles={true} // Optional, use extended CSS styles
/>
</div>
);
};
export default MyComponent;
Props
The ClassicEditor
component accepts the following props:
value
(string): The initial content of the editor.onChange
(function): Callback function that is called when the content changes. It receives the updated content as an argument.height
(number): The height of the TinyMCE editor in pixels. Defaults to250
.useExtendStyles
(boolean): If true, applies extended styles to the editor. Defaults tofalse
.hasMedia
(boolean): If true, includes media buttons in the editor. Defaults totrue
.
PHP Integration
To use the WordPress Classic Editor in your custom theme or plugin, add the following PHP code to your functions.php
file or the main plugin file:
<?php
/**
* Enqueue WordPress Classic Editor and Media for custom usage.
*/
// Ensure this code runs in the correct context
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
// Add filter to allow rich text editor
add_filter( 'user_can_richedit', '__return_true' );
// Function to enqueue the editor and media scripts
function enqueue_wp_classic_editor_and_media() {
// Enqueue the WordPress editor scripts
wp_enqueue_editor();
// Enqueue the WordPress media scripts
wp_enqueue_media();
}
// Hook the function to an appropriate action
add_action( 'admin_enqueue_scripts', 'enqueue_wp_classic_editor_and_media' );
Features
- Fully customizable TinyMCE editor
- Real-time content updates
- Optional media button integration
- Support for extended styling
Dependencies
This component requires react
. Ensure that your project includes this dependency.
Contributing
Contributions are welcome! Please open an issue or submit a pull request if you'd like to contribute to the project.