HTML Module - ACE editor - activate Emmet

Beaver Builder
1

Hi Guys,

I’d like to activate Emmet in the HTML Module. According to the Ace editor docs, this should be possible by:

  1. loading the https://github.com/nightwing/emmet-core/blob/master/emmet.js script
  2. loading the Ace extension: /src/ext-emmet.js
  3. calling: require(“ace/ext/emmet”);
  4. 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?

Thanks!
Jeff.

2

Hi Jeff,

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?

Thanks,
Danny

3

+1 for this feature.

@Danny, Yeah, that is the general idea. For instance:

ul.benefit-list>li.benefit{Benefit $}*5

Will generate:

<ul class="benefit-list">
  <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>
</ul>

It saves a hell of a lot of typing.

4

Hi Danny,

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):

  1. saved https://github.com/nightwing/emmet-core/blob/master/emmet.js to themes/bb-theme-child/lib/js/emmet.js
  2. in the functions.php added: wp_enqueue_script( 'emmet', get_stylesheet_directory_uri() . '/lib/js/emmet.js' );
  3. in plugins/bb-plugin/classes/class-fl-builder.php underneath line 473 (wp_enqueue_script('ace-language-tools'...) added: wp_enqueue_script('ace-emmet', $js_url . 'ace/ext-emmet.js', array(), $ver, true);
  4. in plugins/bb-plugin/includes/field-code.php under line 18 (ace.require('ace/ext/language_tools');) added: ace.require('ace/ext/emmet');
  5. 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): enableEmmet: true

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).

Jeff.

5

Hi Danny,

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:
table#my-table.table.table-bordered.table-striped>tr5>lorem2.my-cell4
then press the tab key.

Jeff.

6

Hi Danny,

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)

Jeff

7

Hey Jeff,

That’s really awesome about the plugin, and so cool of you to share it! Thanks, we really appreciate it. :slight_smile:

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. :slight_smile:

Ben

8

Hey Ben,

Happy to help :slight_smile:

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.

Jeff.

9

Hi Ben,

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 :wink:

If you have any problems accessing the repo, let me know.

Jeff.

10

Awesome! Thanks, Jeff, for taking the time to do this. We really appreciate it. :slight_smile:

Ben

11

You’re welcome, Ben.

12

Hi All,

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.

13

Hi Everyone,

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!