Module Inputfield ACE Extended

[owzim]

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.

See this short screencast to get an overview:

Get it from Github or the Modules Directory.

Roadmap

• add full screen mode
• expose a jQuery api for resizing, setting row count etc.
• add image handling like in Adam Kiss' version

Edited April 18, 2015 by Nico Knoll
Added the "module" tag and removed it from title.

[renobird]

Nice one Owzim! Great screencast too.

Can't wait to experiment with this.

[Macrura]

yeah this is so awesome - owzim's work on this goes beyond expectations!

[arjen]

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.

[owzim]

arjen, did not know of this feature, looks great. Added it to the roadmap.

To all: Feature requests and bug reports very welcome!

[LostKobrakai]

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

Until the magic is finished there's this: http://modules.processwire.com/modules/textformatter-image-tags/

[Adam Kiss]

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

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

[bernhard]

looks great!

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

[LostKobrakai]

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.

[Macrura]

@BernhardB - i think you would simply do that by using a <pre> tag and then having css to render the look you want;  You can include source code pro on your frontend for a nice mono font

[bernhard]

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 ?>

</div>

[LostKobrakai]

I don't think you could use the highligher standalone, as is has to work different for a editor enviroment compared to a more-or-less static <pre> tag.

[mr-fan]

@Bernhard

this is the exact way for your example:

https://highlightjs.org/usage/

important question would be -> have we API access to the setting of the language from the backend...so you could set easy the <pre> class for the language to show...

regards mr-fan

[diogo]

Until the magic is finished there's this: http://modules.processwire.com/modules/textformatter-image-tags/

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

[Macrura]

fyi for anyone testing this out today, ace extended won't work if the initial field is set to collapsed only when blank..

[owzim]

Thanks Macrura, I am glad that you could pinpoint the issue. I already fixed it, see this commit

[owzim]

diogo, looks great. Will try that later. Why not a separate forum post?

[diogo]

diogo, looks great. Will try that later. Why not a separate forum post?

Sure, I'll do it

[owzim]

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

0.5.x

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

[LostKobrakai]

Now you only have to convince Ryan to use this for Hanna Code, so we don't need to have two big ace installations

[Macrura]

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.

[owzim]

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.

[Macrura]

it's all working well here, got it on 3 live sites, and have tried various different configurations and it looks great

[Nico Knoll]

+1 for Hanna code (maybe optionally?) using this module

[Macrura]

@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