Ace Editor blocked upload field

[ghost]

Hello, first and foremost thanks for this project. Second i have notice that ace_editor field block the upload field. In short my browser recognize this error if ace_editor is enable.

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

in the file ace-loader-min.js:1:231

I have make two simple test:

1) I tried to exchange the plugin exopite-simple-options-framework in bundle with your plugin tutorial and the problem persist.

2) From your plugin tutorial i have commented the array relative to ace_editor and without this edtior the upload works fine.

Is it possible to solve somehow?

I forgot. The ace_editor field doesn't work in any case. It does not allow you to type anything.

Thanks in advance Adriano

[ghost]

I found the solution.

For some reason the loading order of the javascript files provided by your plugin conflicts with something, while using the cdn there is no problem..

However I observed that using a scheme similar to that of reduxframework it is possible to load javascript without resorting to cdn and without going into conflict with anything.

Basically what I did was change the enqueue method of the ace_editor class like this:

public static function enqueue( $args ) {
    wp_enqueue_script( 'ace-editor', OSPress_Helper::get_fields_url() . 'ace_editor/ace/ace.js', array( 'jquery' ), '1.2.4', true );
        wp_enqueue_script( 'ace-editor-language_tool', OSPress_Helper::get_fields_url() . 'ace_editor/ace/ext-language_tools.js', array( 'ace-editor' ), '1.2.4', true );
        wp_enqueue_script( 'exopite-sof-ace-loader', OSPress_Helper::get_fields_url() . 'ace_editor/ace-loader.min.js', array( 'ace-editor-language_tool' ), '1.0.0', true );

        $resources = [];
        parent::do_enqueue( $resources, $args );
}

After that I copied the assets/editor/ace folder inside the field directory and the ace-loader.min.js file always inside that folder.

The method get_fields_url() is a simple wrapper around the plugin_dir_url( __FILE__ ) functions.

This is the simple method:

    public static function get_fields_url()
    {
        return trailingslashit( plugin_dir_url( __FILE__ ) ) . 'fields/';
    }

    public static function get_fields_path()
    {
        return trailingslashit( plugin_dir_path( __FILE__ ) ) . 'fields/';
    }

Now everything works without having to use the cdn.

The question at this point is the following.

Is it possible to create abstract method enqueue inside the class Exopite_Simple_Options_Framework_Fields and completely remove the static method allowing the loading of javascript and css as soon as the class is instantiated?

I noticed that the add_field method does just that but by trying something like this:

$element = new $class( $field, $value, $this->unique, $this->config, $this->multilang );

if ( $class === 'Exopite_Simple_Options_Framework_Field_ace_editor' ) {
       $element->test_enqueue();
}

not work. Obviously the test_enqueue() method existed because I had created it.

Ultimately to avoid this type of problem you should find a way to use css and javascript from within the field directory, better if each field has its own subdirectory.

Since I really like this framework, could you give me some indication of where and how to use a non-static enqueue method from within the single classes that represent the fields?

Thanks Adriano

[JoeSz]

I will check it out later. Unfortunately I have VERY little time now. It would be also nice, if you could make a pull request, if you can. :)

[ghost]

Gladly ... just ready to send it.

[JoeSz]

Sorry for the late answer. I can not reproduce the problem. I tried in Firefox, Edge and Chrome. Works flawlessly. I don't see, why the location of the JS would effect anything. I like to keep this way in the moment.