Skip to content

Instantly share code, notes, and snippets.

@itsHall

itsHall/functions.php

Last active Jul 20, 2020
Embed
What would you like to do?
Add HTML Editor Syntax Highlighter to ACF WYSIWYG
//---------------------------------------------------//
// Add HTML Editor Syntax Highlighter to ACF WYSIWYG //
//---------------------------------------------------//
/* ADD CODE MIRROR CSS */
function admin_style() {
wp_enqueue_style('admin-styles', 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css');
}
add_action('admin_enqueue_scripts', 'admin_style');
/* ENQEUE CODE MIRROR JS */
function my_enqueue() {
wp_enqueue_script('code_mirror_script1', 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.js');
wp_enqueue_script('code_mirror_script2', 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/xml/xml.js');
}
add_action('admin_enqueue_scripts', 'my_enqueue');
/* ADD CODE MIRROR ADDITIONAL STYLES */
add_action('admin_head', 'custom_css');
function custom_css() {
echo '
<style>
.tmce-active .mce-tinymce{display:block !important;visibility:visible !important;}
.html-active .mce-tinymce{display:none !important;visibility:hidden !important;}
.tmce-active .CodeMirror{display:none;}
</style>
<script>
jQuery(document).ready(function($){
function rundCodeMirror(){
var areas = document.getElementsByClassName("wp-editor-area"); // I experienced a duplicate content field issue with this line of code, my fix was to replace this line with: var areas = $(".wp-editor-area:not(#content)");
for(var i = 0; i < areas.length; i++) {
CodeMirror.fromTextArea(areas.item(i), { // In some cases `areas.item(i)` needs to be changed to `areas[i]`
mode : "xml",
htmlMode: true,
theme: "material",
lineNumbers: true
});
}
}
setTimeout(rundCodeMirror, 1000);
});
</script>
';
}
@itsHall

This comment has been minimized.

Copy link
Owner Author

@itsHall itsHall commented Jun 17, 2020

Thanks to a comment here

@itsHall

This comment has been minimized.

Copy link
Owner Author

@itsHall itsHall commented Jul 15, 2020

Please take note of the comments on lines 30 and 32

@itsHall

This comment has been minimized.

Copy link
Owner Author

@itsHall itsHall commented Jul 20, 2020

https://gist.github.com/itsHall/73051c485cff04ca903b4bf55bc9d193 is code to enable resizing of the WYSIWYG fields.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment