Support » Plugin: Admin Page Framework » WRT ace editor custom field type

  • Me again. I have few more questions about ace editor field.

    1. how to enable wrap mode in ace editor
    2. how to set width of ace editor to 100% of container
    3. how to send custom output to another read-only textarea from submit_after_* action method
    4. how to run submit button ajax way
    5. how to specify a custom mode file for ace editor

    • This topic was modified 1 week, 4 days ago by  Joey George.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Actually, I am looking at https://ace.c9.io/build/kitchen-sink.html
    It would be nice to see all available option key/values that can be used in APF.

    Plugin Author miunosoft

    (@miunosoft)

    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: http://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.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.