Classic Editor

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


pnpm add @wpmvc/classic-editor


yarn add @wpmvc/classic-editor


bun add @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:

Prop	Type	Description
`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 to `250`.
`useExtendStyles`	`boolean`	If `true`, applies extended styles to the editor. Defaults to `false`.
`hasMedia`	`boolean`	If `true`, includes media buttons in the editor. Defaults to `true`.

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.