Rich Text Editor Conversion

February 3, 2025 · AI Conversations

User

array(
'type' => 'textarea',
'param_name' => 'content',
'label' => __( 'Content', 'fusion-builder' ),
'description' => __( 'Enter the accordion content.', 'fusion-builder' ),
),
convert above to rich text editor in fusion custom element

Assistant

To convert the `textarea` field into a rich text editor (TinyMCE) in a custom Fusion Builder element, you need to use `'type' => 'tinymce'`. Here’s how you can modify your existing code:

array(
    'type'        => 'tinymce',
    'param_name'  => 'content',
    'label'       => __( 'Content', 'fusion-builder' ),
    'description' => __( 'Enter the accordion content.', 'fusion-builder' ),
    'default'     => '',
    'options'     => array(
        'theme' => 'modern',
        'height' => 200, // Adjust height as needed
    ),
),

This will replace the plain textarea with a TinyMCE editor, providing a rich-text editing experience. Let me know if you need further customizations! 🚀

User

not working

Assistant

If `'type' => 'tinymce'` is not working in your custom Fusion Builder element, you can manually initialize TinyMCE using JavaScript. Here’s a complete approach:

### **Steps to Add a Rich Text Editor (TinyMCE) in Fusion Builder**
Fusion Builder does not natively support `'type' => 'tinymce'`, so we need to use `'type' => 'textarea'` and manually initialize TinyMCE.

—

### **1. Modify Your Element Registration**
Use `'type' => 'textarea'` (since `'tinymce'` is not recognized) and give it a unique class or ID.

array(
    'type'        => 'textarea',
    'param_name'  => 'content',
    'label'       => __( 'Content', 'fusion-builder' ),
    'description' => __( 'Enter the accordion content.', 'fusion-builder' ),
    'default'     => '',
    'dependency'  => array(),
    'class'       => 'fusion-tinymce', // Unique class to target with JS
),

—

### **2. Enqueue TinyMCE in Fusion Builder Editor**
Now, enqueue a custom JavaScript file inside your child theme to initialize TinyMCE for elements with the `.fusion-tinymce` class.

#### **Add this in `functions.php`:**

function custom_fusion_tinymce_scripts() {
    if ( function_exists( 'fusion_builder_is_builder_page' ) && fusion_builder_is_builder_page() ) {
        wp_enqueue_script( 'custom-fusion-tinymce', get_stylesheet_directory_uri() . '/js/custom-fusion-tinymce.js', array( 'jquery' ), null, true );
        wp_enqueue_script( 'wp-tinymce' ); // Ensure TinyMCE is loaded
    }
}
add_action( 'admin_enqueue_scripts', 'custom_fusion_tinymce_scripts' );

—

### **3. Add JavaScript to Initialize TinyMCE**
Create a file `custom-fusion-tinymce.js` inside your theme’s `/js/` folder.

jQuery(document).ready(function ($) {
    function initializeTinyMCE() {
        if (typeof tinymce !== "undefined") {
            $(".fusion-tinymce").each(function () {
                var textareaID = $(this).attr("id");
                if (textareaID && !tinymce.get(textareaID)) {
                    tinymce.init({
                        selector: "#" + textareaID,
                        menubar: false,
                        toolbar: "bold italic | alignleft aligncenter alignright | bullist numlist",
                        setup: function (editor) {
                            editor.on("change", function () {
                                tinymce.triggerSave(); // Ensures Fusion Builder captures the content
                            });
                        },
                    });
                }
            });
        }
    }

    // Reinitialize TinyMCE when Fusion Builder is opened
    $(document).on("fusion-element-render-fusion_custom_element", function () {
        initializeTinyMCE();
    });

    // Initialize TinyMCE on document load
    initializeTinyMCE();
});

—

### **4. Clear Cache and Test**
– **Clear Fusion Builder Cache**: Go to **Fusion Builder > Settings > Clear Cache**.
– **Refresh the Page** and open your custom element in Fusion Builder. The text area should now load as a TinyMCE editor.

—

### **Why This Works**
– `wp_enqueue_script('wp-tinymce');` ensures TinyMCE is loaded.
– The `custom-fusion-tinymce.js` script initializes TinyMCE for `.fusion-tinymce` fields.
– It listens for `fusion-element-render-` to ensure it works inside the builder.

—

Let me know if you need further adjustments! 🚀🔥

Rich Text Editor Conversion

Leave a Comment Cancel