Including markdown support in CKEditor

Hi folks,

i've trying to include support for markdown in the CKEditor using this plugin: http://ckeditor.com/addon/markdown

I tryed several approachs, using CKEditor Extended plugin and also creating a different plugin with a customized version of CKEditor with markdown plugin bundled with it. I always get stuck in the same point, retrieving the same errors. It seems that the plugin, in Elgg context, cant load some JS libraries included in the the plugin. I got these errors in the dev console:

plugin.js?t=F0RD:2 Uncaught ReferenceError: toMarkdown is not defined
plugin.js?t=F0RD:7 Uncaught ReferenceError: CodeMirror is not defined

I think the problem is related with Elgg's JS library loading. I ran out of ideas how to continue.

Could any of you, more experimented developer, give this idea a try and help me to make it work?

 

Thx in advance!

  • Are you using an absolute simplecache path when calling CKEDITOR.plugins.addExternal()? 

    See an example here: https://github.com/hypeJunction/Elgg-ckeditor_addons/blob/master/views/default/components/ckeditor/setup.js.php#L89

  • The plugin markdown plugin is loaded from the following url:

    http://example.com/cache/0/default/ckeditor/plugins/markdown/plugin.js

    I just installed ckeditor_addons plugin and adapted it be able to load Markdown plugin in the following way:

    1. Copied the markdown plugin files in /mod/ckeditor/vendors/ckeditor/plugins/markdown
    2. Changed /mod/ckeditor_addons/start.php in line 92 to add the Marldown option to config: 'document' => ['Source', 'Templates', 'Markdown'],
    3. Added the following code in /mod/ckeditor_addons/views/default/components/ckeditor/setup.js.php:
    if (ckeditor_addons_is_enabled('Markdown')) {
        $config['extraPlugins'][] = 'markdown';
        $plugins['markown'] = ['path' => elgg_get_simplecache_url('ckeditor/plugins/markdown/plugin.js')];
    }

    Still geting the same errors detailed in my first message.

    What I am doing wrong?

     

  • Vendor assets are not views, hence they don't have the simplecache URL. 

    The proper way is to add views.php in the plugin root and specify the path:

    // views.php
    return [
       'default' => [
          'ckeditor/plugins/markdown/plugin.js' => '/path/to/vendor/plugin.js'
       ],
    ];
    
    
  • Thanks Ismayil.

    I tryed to specify the simplecahe URL as you said, but nothing changes. As far I can tell, the plugin.js file already have a simplecache URL. Markdown plugin got 3 js dependencies stored in vendors/ckeditor/plugins/markdown/js/ (codemirror-gfm-min.js, marked.js and to-markdown.js). The 3 files are loaded on demand, after you click in the markdown button in ckeditor. All of them are accesigle via a simplecache URL, too.

    i just uploaded a copy of the code of adapted ckeditor with markdown plugin. Please give it a try and check the errors by yourself: https://github.com/Yaco/elgg-ckeditor-markdown

    Thanks again for all your help!

  • See my fork for a working example: https://github.com/hypeJunction/elgg-ckeditor-markdown

    I don't know how this markdown addon works elsewhere. Basically, it loads missing vendor scripts asynchronously, but executes the code synchronously. It has nothing to do with Elgg really, just execution logic that's based on pure luck - your internet connection and server are fast enough to load the libs before any code is executed...

    The solution is to load the libraries before markdown even kicks in: https://github.com/hypeJunction/elgg-ckeditor-markdown/blob/master/views/default/ckeditor/markdown-loader.js

  • Amazing! It works!

    But there some seems to be problem with the code. If I enable the simplecache option with js compression I got the following error:

    Uncaught Error: Script error for "../../lib/codemirror", needed by: ckeditor
    http://requirejs.org/docs/errors.html#scripterror
    

    Besides that, it seems to work fine.

    Also, It would be good to make editor go back to WYSIWYG mode when submitting the textarea content. If not, the content is stored as plain text with markdown syntaxis.

  • I just noticed that, with all caches turned off, it randomly fails with errors similar to the following one:

    GET http://example.com/cache/0/default/ckeditor/plugins/lib/codemirror.js 
    
    Uncaught Error: Script error for "ckeditor/plugins/lib/codemirror", needed by: ckeditor/plugins/markdown/js/to-markdown
  • Not willing to put anymore time into this. CKeditor just sucks. I have other ideas for an HTML5 editor, which I'd rather be working on

  • Fair enough. I will try to improve it myself. Good luck with your new editor and thanks for all your great work!