owzim Posted February 25, 2015 Posted February 25, 2015 (edited) 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. 26
renobird Posted February 25, 2015 Posted February 25, 2015 Nice one Owzim! Great screencast too. Can't wait to experiment with this.
Macrura Posted February 25, 2015 Posted February 25, 2015 yeah this is so awesome - owzim's work on this goes beyond expectations! 7
arjen Posted February 25, 2015 Posted February 25, 2015 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. 2
owzim Posted February 25, 2015 Author Posted February 25, 2015 arjen, did not know of this feature, looks great. Added it to the roadmap. To all: Feature requests and bug reports very welcome! 2
LostKobrakai Posted February 25, 2015 Posted February 25, 2015 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/ 2
Adam Kiss Posted February 25, 2015 Posted February 25, 2015 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 2
bernhard Posted February 25, 2015 Posted February 25, 2015 looks great! can you also render the content of your field in frontend templates with code highlighting?
LostKobrakai Posted February 25, 2015 Posted February 25, 2015 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 Posted February 25, 2015 Posted February 25, 2015 @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 Posted February 25, 2015 Posted February 25, 2015 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 Posted February 25, 2015 Posted February 25, 2015 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 Posted February 25, 2015 Posted February 25, 2015 @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 Posted February 25, 2015 Posted February 25, 2015 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 4
Macrura Posted February 25, 2015 Posted February 25, 2015 fyi for anyone testing this out today, ace extended won't work if the initial field is set to collapsed only when blank.. 1
owzim Posted February 25, 2015 Author Posted February 25, 2015 Thanks Macrura, I am glad that you could pinpoint the issue. I already fixed it, see this commit 2
owzim Posted February 25, 2015 Author Posted February 25, 2015 diogo, looks great. Will try that later. Why not a separate forum post?
diogo Posted February 27, 2015 Posted February 27, 2015 diogo, looks great. Will try that later. Why not a separate forum post? Sure, I'll do it
owzim Posted March 2, 2015 Author Posted March 2, 2015 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. 3
LostKobrakai Posted March 2, 2015 Posted March 2, 2015 Now you only have to convince Ryan to use this for Hanna Code, so we don't need to have two big ace installations 3
Macrura Posted March 2, 2015 Posted March 2, 2015 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. 2
owzim Posted March 12, 2015 Author Posted March 12, 2015 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. 1
Macrura Posted March 12, 2015 Posted March 12, 2015 it's all working well here, got it on 3 live sites, and have tried various different configurations and it looks great 1
Nico Knoll Posted April 1, 2015 Posted April 1, 2015 +1 for Hanna code (maybe optionally?) using this module
Macrura Posted April 1, 2015 Posted April 1, 2015 @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 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now