Jump to content

Inputfield ACE Extended


Recommended Posts

A highly configurable and flexible ACE editor input field.

This module is sponsored in part by Nibiri, aka forum member Macrura which was a great jump start. So many thanks to him. :frantics:

See this short screencast to get an overview:

Get it from Github or the Modules Directory.


  • add full screen mode
  • expose a jQuery api for resizing, setting row count etc.
  • add image handling like in Adam Kiss' version
Edited by Nico Knoll
Added the "module" tag and removed it from title.
  • Like 25
Link to comment
Share on other sites

Really looking forward to experiment with this! I always liked ACE since I use Textile a lot. I've seen the roadmap and full screen would be awesome.

Another thing you might consider is image handling. Something like this done by Adam.

Thanks and great work.

  • Like 2
Link to comment
Share on other sites

Nice. I can redirect everyone here now, instead of fiddling with my own :D

FYI, image upload was really really hacky, but the relevant coffee script is here:

- event: https://github.com/adamkiss/InputfieldAceEditor/blob/image-upload/_coffee/modules/editor.coffee#L50-L59

- method: https://github.com/adamkiss/InputfieldAceEditor/blob/image-upload/_coffee/modules/editor.coffee#L73-L94

  • Like 2
Link to comment
Share on other sites

can you also render the content of your field in frontend templates with code highlighting?

Code highlighting is done by javascript, to theres no simple "echo $page->codeHighlighted". I'd also think it's better to leave the choice for a highlighting library to the user.

Link to comment
Share on other sites

of course, but i thought maybe there's a simple way to take use of the code highlighting that comes with this module. something like

$ace = $modules->get('ace...');

<script src="<?= $ace->gethighlightjs() ?>"></script>

<div class="php">

   <?= $page->phpcode ?>


Link to comment
Share on other sites

Guys, this thread gave me the impulse I needed to finish an idea that I started long ago. So, here is a new module for using image fields inside textarea using the same markup language that you are using in that same text area https://github.com/ocorreiododiogo/pw-image-fields-markup

edit: still testing and work in progress, so I'm not submitting to the directory yet

  • Like 4
Link to comment
Share on other sites

I've added and changed a lot of things on the dev branch. It'd be cool if you guys could test the current state to spot issues I have not encountered yet, so I can call it 1.0.0, merge it into master, and then publish it to the modules directory. Thanks!

Changes, since the first post:

0.6.x - 0.12.x

  • use noconflict version of ace
  • implement possibility to add built-in extensions, by default emmet is enabled
  • apply major PHP code refactoring


  • enable field to be instantiated via API
  • add interval check on editor.renderer.lineHeight and only initalize everything via callback when it is available
  • add option to enable/disable localStorage
  • make advancedOptions use the the Inputfield itself, INCEPTION!

Regarding built-in extensions: They are sparsely documented, there are only two examples here. I have no idea what they all do. Some might even need additional libs, like emmet, which needs the core parser, that I included in this module.

  • Like 3
Link to comment
Share on other sites

i think hanna code does need it's own version of ace, since a lot of people won't use this module;

unless it is a really simple one, i mostly do hanna codes as files on the server, so the hanna code just includes the file (thx to soma for this idea);

would be cool if i Nico's template editor module could have a setting somewhere to select the inputfield type and then one could set it to use this if it is installed;

the use cases for the backend ace editor are many though - definitely people wanting to have a markdown editor could use this... I'm also doing YAML settings field with this.

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

No one has complained about issues, 1.0.0 it is.

Merged into master, submitted to the directory and updated original post. I might not have the necessary time to tackle the road map for now, but if issues arise, I surely can fix them.

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

@Nico, been meaning to ask you if we could have your template editor check for this module installed and then have a setting or something to use ace extended for template editing; i'm actually already using this with your template editor, but i hacked your module hardcoded to use this inputfield

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...