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

Question

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

Answer 1

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.