I’d like to activate Emmet in the HTML Module. According to the Ace editor docs, this should be possible by:
- loading the https://github.com/nightwing/emmet-core/blob/master/emmet.js script
- loading the Ace extension: /src/ext-emmet.js
- calling: require(“ace/ext/emmet”);
- then, calling: editor.setOption(“enableEmmet”, true);
I started browsing BB’s source and wanted to make sure I’m not duplicating anything before delving deeper.
Is the emmet script already loaded? If so, where (in which file) do you set Ace’s default config?
I believe they’re set in
/bb-plugin/includes/field-code.php/. However, I have just this moment attempted the instructions you provided and couldn’t get it to work.
I haven’t used Emmet before, but from my quick read of it. Am I right in thinking that if I was to type
html:5 and then press
tab. It should convert that to a basic HTML5 template?
+1 for this feature.
@Danny, Yeah, that is the general idea. For instance:
<li class="benefit">Benefit 1</li>
<li class="benefit">Benefit 2</li>
<li class="benefit">Benefit 3</li>
<li class="benefit">Benefit 4</li>
<li class="benefit">Benefit 5</li>
It saves a hell of a lot of typing.
Yes, as @mike mentioned, it is a great time-saver. You can code HTML very quickly with its auto-completion shortcuts.
OK guys, I got it working! Here’s what I did (this is the quick-and-dirty version, will clean it up later):
- saved https://github.com/nightwing/emmet-core/blob/master/emmet.js to themes/bb-theme-child/lib/js/emmet.js
- in the functions.php added:
wp_enqueue_script( 'emmet', get_stylesheet_directory_uri() . '/lib/js/emmet.js' );
- in plugins/bb-plugin/classes/class-fl-builder.php underneath line 473 (
wp_enqueue_script('ace-emmet', $js_url . 'ace/ext-emmet.js', array(), $ver, true);
- in plugins/bb-plugin/includes/field-code.php under line 18 (
- in plugins/bb-plugin/includes/field-code.php under line 28 (
enableSnippets: false) added (NOTE: don't forget to add a comma at the end line 28):
That did the trick for me.
This just makes me love using BBuilder even more! (saves me the trouble of flipping between Sublime Text to quickly create the HTML I want and pasting it into BB’s HTML Module).
For more info, check out: http://emmet.io/ (I have no affiliation, just love the tool)
I find it most useful when coding tables, for example, after adding Emmet to your HTML module, try:
then press the tab key.
I’ve created a plugin to add Emmet to any Beaver Builder HTML Module installation thus avoiding the need for the above installation steps (and avoiding the inevitable overwrite with a BB update).
In the future, I’ll enhance the plugin to enable further customization of the HTML module’s Ace editor (if there is enough interest).
Where’s the best place to upload/share this plugin? (keep in mind it is strictly in it’s early stages)
That’s really awesome about the plugin, and so cool of you to share it! Thanks, we really appreciate it.
We don’t really have any place where you can share 3rd party BB enhancement stuff. But you can leave a link here where we can get your plugin. Searching for
emmet should bring it up!
Also, feel free to share it on the BB FB Group and/or Slack Channel. We’ve a lot of active users there and some of them may just need it.
Happy to help
I’ll setup a repo on BitBucket and post the info here when it’s ready (and will follow-up w/ the link in FB and Slack).
Probably get a chance tomorrow.
Had a minute, so setup the new repo.
You, and BB’s fans, can download the plugin from https://bitbucket.org/CreativelyCloudy/ccbb-html-emmet
Please note that this is my first attempt at sharing my work via a Git repo, so everyone be gentle
If you have any problems accessing the repo, let me know.
Awesome! Thanks, Jeff, for taking the time to do this. We really appreciate it.
Here’s v1.1.1 (https://bitbucket.org/CreativelyCloudy/ccbb-html-emmet/downloads/ccbb-html-emmet.zip) w/ bug fix for broken Add Media button caused by duplicate Underscore library in versions of Wordpress newer than 3.5.
Here’s a great cheatsheet re: Emmet shortcuts: http://docs.emmet.io/cheat-sheet/ to go with my new CCBB HTML Emmet plugin (https://bitbucket.org/…/ccbb-…/downloads/ccbb-html-emmet.zip)
BB + Emmet work great together to help you quickly add custom HTML, CSS in the WP’s Customizer and BB’s HTML module
Looking forward to everyone’s feedback!