Future of the HTML editor component

Hello,

I'm currently trying to implement the HTML text editor included with Ui-Kit 2.

But I was wondering if it is a good thing to do because :

• Ui-kit 3 (in beta now) does not include this component anymore ;
• CodeMirror, on which the HTML text editor is built, doesn't directly provide codemirror.js anymore, which, according to me, complicates a lot its implementation via Beans (but I might be wrong).

What's your opinion ?

@Thierry, it seems that you use the HTML text editor component, here, in this forum. Could you please give me some hint about the way you added this component ? Did you use a version of CodeMirror older than version 5.20.0 ?

Any advice would be veeeeeeeeeery appreciated !

Mathieu

PS : have a very good year !

Hi Mathieu,

Yes it is worth implementing it using UIkit 2 (same applies to all other components) as there is still a long way to go before UIkit 3 stable is released 😉 UIkit 3 will include the HTML editor and all the other components currently missing but they didn't get to it yet. UIkit 3 is really exciting, but we should wait until it is properly stable, at least in my opinion!

Regarding implementing the HTML editor, in which context are you trying to implement it?

Thanks,

Hello Thierry,

Yes, for sure, I'll stick to Ui-Kit 2 for the moment. Don't want to play the sorcerer's apprentice. 🙂

I'm currently working on a Buddypress project : registered and logged-in users will be able to post content from their profile page.

For this, I'm using the WP REST API to post content, with this rather simple method.

How would you add the HTML text editor component in such a case ? Once again, my problem is that the codemirror.js file doesn't exist anymore in the last version of Codemirror : I don't know what files/dependancies/etc. to use.

Thanks a lot, Thierry, for any advice you could give.

Mathieu

Hi Mathieu,

Here is the function I use on this forum:

add_action( 'beans_uikit_enqueue_scripts', 'example_editor_assets' );

function example_editor_assets() {
 $path = get_stylesheet_directory();

 // Enqueue necessary UIkit components.
  beans_uikit_enqueue_components( array( 'tooltip', 'htmleditor' ), 'add-ons' );

  // Add vendors to UIkit compiler.
 beans_compiler_add_fragment( 'uikit', "{$path}/vendors/codemirror.min.css", 'less' );
 beans_compiler_add_fragment( 'uikit', array(
    "{$path}/vendors/codemirror.min.js",
    "{$path}/vendors/gfm.min.js",
   "{$path}/vendors/markdown.min.js",
    "{$path}/vendors/marked.min.js",
    "{$path}/vendors/overlay.min.js",
   "{$path}/vendors/xml.min.js",
   "{$path}/js/editor.min.js",
 ), 'js' );

}

Here is my vendors directory and here is my JS directory which includes some custom JS to add the code icon and mechanism to the editor.

Finally, below is the HTML I use for the editor:

<textarea name="example" cols="40" rows="12" data-uk-htmleditor="{markdown: true, toolbar: [ 'bold', 'italic', 'strike', 'link', 'blockquote', 'listUl', 'listOl', 'code' ], height: 320, lblMarkedview: '<?php esc_html_e( 'Write', 'example' ); ?>' }"></textarea>

Have fun,

This is HUGE. Thanks a lot, Thierry. Works like a charm. Now I'm able to post content from the front-end, with the Rest API, with an elegant form. 🙂 I'll show some screenshots here very soon. Mat

Hello, the Cloudup downloads do not work ... where i can find them? Thanks

Hi Walter,

Looks like Cloudup didn't like the archived files. I replaced the files with .tar which seems to work fine. Both links should work as expected now.

Let me know if you encounter other issues when trying to download them.

Happy coding,

Hi Thierry, Download without problem. Thanks!

You can insert HTML editor component into an array?

            array(
                'id' => "accordion_{$i}_desc",
                'label' => 'Descrizione',
                'type' => 'textarea'
            )

Hi Walter,

Adding the UIkit editor in the backend can be done but it will require to register a custom field for it and enqueue all the assets in the backend too. I would rather advise to use WordPress HTML editor in the backend which is much simpler to setup. Here is what you can do to register the HTML editor field type:

add_action( 'beans_field_example_editor', 'example_field_editor' );
/**
 * Echo editor field type.
 *
 * @param array $field Field data.
 */
function example_field_editor( $field ) {
 wp_editor( $field['value'], $field['id'] );
}

Then you can use the editor "field" by replacing 'textarea' with example_editor in the snippet you posted in your last reply 😉

Hope that helps,

Hi Thierry, perfect is a good solution.

Thanks

Hey @Thierry 🙂

I'm using the example editor function on some post specific fields and while the editor is showing up, none of the content added to the editors is getting saved.

Here is the code I'm using: https://www.pastiebin.com/5a265c05cf896

Any ideas why it's not saving?