Plugins (e.g. SCEditor) config support

[sashasochka]

Hi, how do I set plugin (e.g. SCEditor) options?

JsonEditorConfig.plugins.sceditor.style = /* url */ doesn't work because json-editor takes these properties from JSONEditor global object and in this lib JsonEditorConfig is manually merged into each instance config. The only (very hacky) solution I found is doing:

        window.JSONEditor.plugins = { // todo: add support for plugin properties in angular-json-editor
            sceditor: {
       //         style: '/components/SCEditor/minified/jquery.sceditor.default.min.css'
            }
        };

in angular.module(...).config. Not even $window because I can't use services in my config..

[rodikh]

Hey sochka,

I'm still trying to figure out how to work with sceditor, but i came across a solution that might be slightly more elegant for you.
I noticed that JsonEditor merges the properties of the schema config with the options config.

so something like this will work:

$scope.mySchema = {
    type: 'object',
    properties: {
        content: {
            type: 'string',
            required: true,
            format: "html",
            options: {
                wysiwyg: true,
                sceditor_options: {
                    style: 'path/to/jquery.sceditor.default.min.css'
                }
            }
        }
    }
};

While it's still not the best idea to mix configuration with schema, It'll surely work better for you than configuring global variables.

What do you think?

[sashasochka]

It might be a good idea but not with my use case. It's actually other devs - users of my API who'll need to create schemas. I can't quite force them to set this property.

[rodikh]

There doesn't seem to be a smart way to configure JSONEditor without accessing globals,
So I thought perhaps just to wrap the JSONEditor in a constant and let the user configure it during his config phase.
i.e.
.constant('JSONEditor', window.JSONEditor)
and then

angular.module('demoApp', ['angular-json-editor']).config(function (JSONEditor) {
    JSONEditor.plugins = {
        sceditor: {
            style: 'sce/development/jquery.sceditor.default.css'
        }
    };
});

It's still not ideal, as it's just accessing the global, but at least this will work until json-editor is updated with an easier functionality.

Will this be acceptable?

[sashasochka]

Maybe we should use providers, so we're able to use $window instead of window? Something like this (not tested):

.provider('JSONEditor', function () {
  var self = this;
  this.$get = function ($window) {
    // merge all the properties from `self` except those starting with `$` onto $window.JSONProvider
   return $window.JSONEditor;
 }
});

Is it better from design point? For my personal use-case it's probably quite the same as what you suggest but later-on it might be easier to mock $window.

[rodikh]

You can now inject JSONEditorProvider to your config, and configure JSONEditor using the JSONEditorProvider.configure() method.
(as demonstrated in the README.md)

[sashasochka]

Thanks! Do you think it makes sense to have JsonEditorConfig now? If I set my iconlib in JSONEditorProvider and won't touch JsonEditorConfig it won't work because JsonEditorConfig will shadow JSONEditorProvider.

[rodikh]

Since there is no use setting a different theme for every instance of JSONEditor on the page, I removed it, and now the configuration should be done through the JSONEditorProvider.configure method.
See readme and example.

[sashasochka]

Thanks, that's good. FYI, it's better to release this kind of breaking changes using major version updates. If somebody specified their dependency as "angular-json-editor": "~0.1.3", they'd automatically receive angular-json-editor v0.1.5 but not if major version was bumped.

[rodikh]

Good call.
As you can see I'm new to this, and still learning the ropes.
I'll make sure to note this next time.
Thanks