Auto complete
-
I am not sure this plugin is being supported or furthered worked on, however I was wondering if there is a way to add ‘autocomplete’ to a code field? I know that when enabling the built in Codemirror on WordPress text fields the auto complete is on. However this is now option with this plugin to do that.
Possible?
Cheers!
-
I too struggled with this and the fact it does not display properly in blocks – the theme gets lost.
In the end I implemented my own solution, which displays in blocks and autocomplete works fine:
1. Enqueue a javascript file for the backend only:
add_action('admin_enqueue_scripts','cm_load_admin_script'); function cm_load_admin_script( $hook ){ wp_enqueue_script( 'cm_admin_script', //unique handle get_template_directory_uri().'/path-to/cm-admin-scripts.js', //location array('jquery') //dependencies ); }
2. Load the WP codemirror assets – this just makes sure we have all the assets we need for cm-admin-scripts.js to work:
add_action('admin_enqueue_scripts', 'codemirror_enqueue_scripts'); function codemirror_enqueue_scripts($hook) { $cm_settings_scss['codeEditor'] = wp_enqueue_code_editor(array('type' => 'text/x-scss')); wp_localize_script('jquery', 'cm_settings_scss', $cm_settings_scss); wp_enqueue_script('wp-theme-plugin-editor'); wp_enqueue_style('wp-codemirror'); }
3. We need cm-admin-scripts.js to setup different editor types. This is where the magic happens. Add one of these classes to an acf textarea field: html-editor, scss-editor or js-editor:
jQuery(document).ready(function ($) { function initCodeMirrors() { $('.scss-editor textarea').each(function (e) { let editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {}; editorSettings.codemirror = _.extend( {}, editorSettings.codemirror, { indentUnit: 2, tabSize: 2, mode: 'text/x-scss', autoRefresh: true, } ); wp.codeEditor.initialize($(this), editorSettings); }); $('.html-editor textarea').each(function (e) { let editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {}; editorSettings.codemirror = _.extend( {}, editorSettings.codemirror, { indentUnit: 2, tabSize: 2, mode: 'htmlmixed', autoRefresh: true, } ); wp.codeEditor.initialize($(this), editorSettings); }); $('.js-editor textarea').each(function (e) { window.console.log('setting up js codeMirror'); let editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {}; editorSettings.codemirror = _.extend( {}, editorSettings.codemirror, { indentUnit: 2, tabSize: 2, mode: 'javascript', autoRefresh: true, } ); wp.codeEditor.initialize($(this), editorSettings); }); } if (window.acf) { window.acf.addAction('load', initCodeMirrors); } });
This works for blocks the first time the page is loaded. It needs more work to get it to work for blocks as they are added to a page. If you are not using blocks then it should work just fine. I have a hack to refresh all codemirrors on a timer, checking to see if the texarea is visible or not:
function refreshCodeMirrors() { $('.scss-editor textarea').each(function (e) { if ($(this).is(':visible')) { let editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {}; editorSettings.codemirror = _.extend( {}, editorSettings.codemirror, { indentUnit: 2, tabSize: 2, mode: 'text/x-scss', autoRefresh: true, } ); wp.codeEditor.initialize($(this), editorSettings); } }); ... setInterval(refreshCodeMirrors,1000);
But it is ugly. Gutenberg does not fire any js events, so no way of knowing via js if a block has been added. If anyone knows how to handle this more elegantly I would like to know.
There is a plugin which changes the default theme for all codemirror editors site-wide here: https://www.ads-software.com/plugins/wp-codemirror-themes/
Not sure if this plugin is still maintained – but it should give you an idea of how codemirror works in WordPress.
Thanks for the info! I have written similar code to apply Codemirror (using the version that comes with the WP core) to text fields that were created in custom metaboxes, I could not find out, however, how to apply CodeMirror themes to these textareas however (only the default wordpress codemirror theme).
Reading the CodeMirror documentation, I see…
“CodeMirror is a code-editor component that can be embedded in Web pages. The core library provides only the editor component, no accompanying buttons, auto-completion, or other IDE functionality.”
So perhaps this plugin is loading only the core of CodeMirror (i.e no auto-complete).
Might be best in the long run then to create my own Metaboxes and Textfields and apply CodeMirror to them. But for now, I guess this plugin (and the basic core of CodeMirror) will have to do. I will revisit the idea of making my own boxes/fields when time permits.
Cheers!
- The topic ‘Auto complete’ is closed to new replies.