1. how to enable wrap mode in ace editor
It would be nice to see all available option key/values that can be used in APF.
It seems lots of options have been added to the Ace editor jQuery plugin since the Ace custom field type was written. It was written by Per S?derlind about 4 years ago. So it is good to ask him whether he is capable of adding your feature requests, or better, you submit a pull request on his repository. If he is not available, another options is extend the Ace field type and write your own. It’s fairly simple though.
Specifically, this part sets the Ace editor options, and it clearly does not support all the options which have become available now.
// Add Ace editor to textarea from: https://stackoverflow.com/a/19513428/1434155
var addAceEditor = function(oTextArea) {
var sMode = oTextArea.data('ace_language');
var sTheme = oTextArea.data('ace_theme');
var bGutter = oTextArea.data('ace_gutter');
var bReadonly = oTextArea.data('ace_readonly');
var iFontsize = oTextArea.data('ace_fontsize');
var oEditDiv = jQuery('<div>', {
position: 'absolute',
//width: getWidth( oTextArea ),
height: getHeight( oTextArea ),
'class': oTextArea.attr('class')
}).insertBefore(oTextArea);
oTextArea.css('display', 'none');
var oEditor = ace.edit(oEditDiv[0]);
oEditor.renderer.setShowGutter(bGutter);
oEditor.setFontSize(iFontsize);
oEditor.setReadOnly(bReadonly);
oEditor.getSession().setValue(oTextArea.val());
oEditor.getSession().setMode('ace/mode/' + sMode);
oEditor.setTheme('ace/theme/' + sTheme);
oEditor.resize( true );
jQuery(oEditDiv[0]).parents('.admin-page-framework-input-label-container').css('display', 'block');
jQuery(oEditDiv[0]).parents('.admin-page-framework-field-ace').css('width', '100%');
oEditor.getSession().on('change', function () {
oTextArea.val(oEditor.getSession().getValue());
});
}
(from https://github.com/soderlind/AceCustomFieldType/blob/master/AceCustomFieldType.php#L106)
When you write your own custom field type extending the Ace custom field type, you want to do something like
AceCustomFieldTyppe2 extends AceCustomFieldType {
public $aFieldTypeSlugs = array( 'ace2', );
protected function getScripts() {
... your JavaScript code here to support new optins ....
}
}
2. how to set width of ace editor to 100% of container
You want to add the following CSS rules.
.admin-page-framework-field { width: 100%; }
.admin-page-framework-input-label-container { width: 100% }
.admin-page-framework-field .ace_editor { width: auto !important; }
If you generated framework files with your text domain, change admin-page-framework with your text domain slug.
3. how to send custom output to another read-only textarea from submit_after_* action method
Are you trying to do it on the client side? submit_after_{...} action hook is called on the server-side, meaning handled with PHP. If you want to modify displayed another textarea field in real-time, you need to code it with JavaScript.
4. how to run submit button ajax way
Currently Admin Page Framework form submit buttons does not have any functionality to send Ajax requests. You need to code it by yourself.
5. how to specify a custom mode file for ace editor
I’m not familiar with all the functionality of the Ace editor. So you should ask Per S?derlind.
