phpwordpressmarkdownadvanced-custom-fieldsrepeater

How to implement Mark Down editor with Advance Custom Field's repeater


I want to use Markdown editor with Toolbar in Advance Custom field's repeater add-on.


Solution

  • Install WP Markdown Editor Plugin then install the add-on for repeater field acf-wp-wysiwyg.

    Please consider below mention steps to use editor for repeater field.

    In your wordpress plugin section Go to "acf-wp-wysiwyg" plugin, open "acf-wp_wysiwyg-v4.php" file, Go to "create_field" function.

    Replace this :

    function create_field( $field )
    {
        // defaults?
        $field = array_merge($this->defaults, $field);
    
        $id = 'wysiwyg-' . $field['id'] . '-' . uniqid();
        $field['textarea_name'] = $field['name'];
    
        // create Field HTML
        wp_editor( $field['value'], $id, $field );
    }
    

    With

    function create_field( $field )
    {
        // defaults?
        $field = array_merge($this->defaults, $field);
    
        $id = 'wysiwyg-' . $field['id'] . '-' . uniqid();
        $field['textarea_name'] = $field['name'];
    
        // create Field HTML
        wp_editor( $field['value'], $id, $field );
        echo '<script> var simplemde = new SimpleMDE({element: document.getElementById("'.$id.'")});
        jQuery(".quicktags-toolbar").css("display","none");
        </script>';
    }
    

    After that go to "acf-repeater" plugin and open "input.js" file. In the line number 142

    Replace

    new_field_html = this.$el.find('> table > tbody > tr.row-clone').html().replace(/(=["]*[\w-\[\]]*?)(acfcloneindex)/g, '$1' + new_id),
    

    With

    new_field_html = this.$el.find('> table > tbody > tr.row-clone').html().replace(/(["]*[\w-\[\]]*?)(acfcloneindex)/g, '$1' + new_id),
    

    That's it. It is working for me.