ICE Plugin init error when i used requirejs

[atmegavn]

hi, i download the sample code and it run good. but when i run it on my project use requirejs then ICE plugin can not init. i think the main reason is ICE plugin is not AMD style. how do you think?

[imdfl]

Sounds interesting. Can you please provide some code to show how you use requirejs and how this affects the loading of the plugin and/or ckeditor?

[atmegavn]

hi, thank you for reply my codes simple here

<div id="editor">
    <h1>Hello world!</h1>
    <p>I am an instance of CKEditor</p>
</div>

<script>
    require(['ckeditor'], function () { 
        CKEDITOR.replace('editor');
    })
</script>

and this is result

i think requirejs loaded ckeditor successful, but ckeditor can not load ICE plugin via requirejs

[imdfl]

Thanks for the info. Can you please share you essential script includes, so that I can reconstruct the problem on my machine?

[atmegavn]

so i tried to delete some text then my browser console add more error like this

[atmegavn]

thanks, i am going to build another simple project for you because my project is too big

[imdfl]

Thanks. Maybe that's not necessary, I just need to know how and where you include requirejs (and which version) and how ckeditor is required - does this come out of the box or do you need special configuration.

[atmegavn]

This is how I configure requirejs

# The config.js file:
require.config({
    baseUrl: 'lib',
    paths: {
        hd: '../js/hd', # app js file
        'domReady': 'requirejs_domReady/domReady',
        'jquery': "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery",
        'jquery.validate': 'jquery_validation/dist/jquery.validate',
        'jquery.validate.unobtrusive': 'jquery_validation_unobtrusive/jquery.validate.unobtrusive',
        'toolkit': "dashboard/dist/toolkit",
        'js.cookie': "js_cookie/src/js.cookie",
        'kendo': 'kendo/js',
        'kendo.all.min': 'kendo/js/kendo.all.min',
        'kendo.aspnetmvc.min': 'kendo/js/kendo.aspnetmvc.min',
        'kendo.timezones.min': 'kendo/js/kendo.timezones.min',
        'pako_deflate.min': 'kendo/js/pako_deflate.min',
        'ckeditor': 'ckeditor/ckeditor'
    },
    bundles: {
        'kendo.all.min': [
            # ... Bulde config for load kendo
        ]
    },
    shim: {
        'toolkit': ["jquery"],
        'jquery.validate': ['jquery'],
        'jquery.validate.unobtrusive': ['jquery.validate'],
        'ckeditor': ['jquery']
    }
});

# The main of requrejs
# Just force requriejs to load essential library

define(['jquery', 'js.cookie', 'toolkit', 'jquery.validate', 'jquery.validate.unobtrusive'], function ($, Cookies) {    
});

And on the head of page I load requirejs by:

    <script src="~/js/config.js"></script>
    <script>
        require(['main']);
    </script>

When need to use ckeditor on page I load it by:

<script>
    require(['ckeditor'], function () { 
        CKEDITOR.replace('editor');
    })
</script>

The ckeditor is load fine, but when calling CKEDITOR.replace('editor');, it's give me the error about.

[imdfl]

I finally found time to look at this. The problem stems from the rangy being the only part of the plugin that suppors amd. Therefore, when requirejs is used, rangy is no longer define in the global namespace. I hope to provide a solution soon, unless some1 beats me to it.

[imdfl]

Please check out the latest version in master. I added code that loads rangy appropriately when requirejs is present. Make sure you config() requirejs with the correct path for "rangy" - it should be "ckeditor/plugins/lite/js/rangy-core", or something close depending on the location of ckeditor.

Please close this issue if the fix is satisfactory.

[atmegavn]

It's now working fine, thank you so much