hectorguo / CKEditor-Markdown-Plugin

Markdown Plugin for CKEditor
http://hectorguo.github.io/CKEditor-Markdown-Plugin/
112 stars 24 forks source link

Not work with CKEditor 4.6.1 #22

Open GoBigorGoHome opened 7 years ago

GoBigorGoHome commented 7 years ago

With CKEditor 4.6.1, when I clink on the Markdown button the text disappears and the button can not be toggled after that.

leokun commented 7 years ago

more details :

error : Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('cke_source cke_reset cke_enable_context_menu') contains HTML space characters, which are not valid in tokens.

I succeed to debug, you have to replace html chars I suppose something like htmlentyties : in ckeditor.js

        var e = document.createElement("_").classList
          , e = "undefined" !== typeof e && null !== String(e.add).match(/\[Native code\]/gi)
          , g = /[\n\t\r]/g;
        CKEDITOR.tools.extend(CKEDITOR.dom.element.prototype, {
            type: CKEDITOR.NODE_ELEMENT,
            addClass: e ? function(a) {
               /* hereis the problem, I don't know if you are supposed to explode with spaces and 
                * add one by one or if just replace spaces with '+'
               */
                this.$.classList.add(a); 

                return this
            }
ghost commented 7 years ago

Hello Developers,

I have the same problem with Ckeditor 4.6.2. When I click the button Markdown, I can not write in the editor. The button can not be deactivated.

Can you eliminate this or what do I have to do so that Markdown works?

Thanks in advance.

dancinllama commented 7 years ago

I'm in the same boat. However, after some playing around with the code I finally got it to work. Here's what I had to do:

1) Download the "basic" CKEditor download. (Don't select to download the markdown module from ckeditor.com as it's currently broken and not maintained there) 2) Clone the code from this repository to my local machine and copy the markdown folder to my CKEditor's plugins directory. 3) Add extraPlugins : 'markdown' to my CKEditor's replace function (or config.js file)

Now, after this I got a different error. Something about calling maximize.modes where maximize was undefined (stems from an error in the plugin.js file within this repository). I fixed the plugin.js file and the error went away and I was able to get markdown to work. You can find the plugin.js file under this pull request I submitted: https://github.com/dancinllama/CKEditor-Markdown-Plugin/commit/d8b7ef41681e91db4cadb938634b6704f2f94432

Last, if you're a glutton for punishment, you can try to fix the error manually by doing the following: In ckeditor.js (around line 2291 when I pretty print it), there is a function that adds css classes and looks like the following: (@leokun calls this out too)

addClass: e ? function(a) { this.$.classList.add(a); return this }

For whatever reason, it bombs when trying to add multiple classes. This can be fixed with the following:

addClass: e ? function(a) { var strArr = a.split(' '); for(var strArrIdx = 0; strArrIdx < strArr.length; strArrIdx = strArrIdx + 1){ this.$.classList.add(strArr[strARrIdx]); } return this; }

This seems to be more of a bug in the ckeditor.js though than in the markdown plugin.

Hope that helps other folks having the same issue!

battlecat commented 7 years ago

Hey guys,I have debuged this problem sucessfully and thanks a lot with @dancinllama.the fixed can be worked very well with ckeditor 4.6.2

so this is the correct step:

  1. download the ckeditor 4.6.2 from ckeditor.com 2.chose the customize and online builder to download. 3.add ckeditor standard,add the markdown plugins to it,chose kama skin(avoid some strange questions),chose language and down the zip file 4.add the ckedior directive to you static directive and add the extraplugins with markdown in config.js 5.edit your ckeditor.js with this: from addClass: e ? function(a) { this.$.classList.add(a); return this } to addClass: e ? function(a) { var strArr = a.split(' '); for(var strArrIdx = 0; strArrIdx < strArr.length; strArrIdx = strArrIdx + 1){ this.$.classList.add(strArr[strARrIdx]); } return this; }

note:split(' ') there must be a space between ' '

it is done.I hope someone test this .in my app ,it is worked very good,and I am tired to test it again.

mukarramali commented 7 years ago

On your browser, open developer tools and check the console. You might be getting an error as: Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('cke_source cke_reset cke_enable_context_menu') contains HTML space characters, which are not valid in tokens.

Go to your project>ckeditor>plugins>markdown>plugin.js: search for "textarea.addClass('cke_source cke_reset cke_enable_context_menu');"

If you found the same. Replace this with: "textarea.addClass('cke_source','cke_reset','cke_enable_context_menu');"

tinkerbits commented 1 year ago

mukarramali's solution solved it for me :) thank you!