hectorguo / CKEditor-Markdown-Plugin

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

How does one get markdown while in wysiwyg mode? #3

Closed Kikketer closed 8 years ago

Kikketer commented 9 years ago

There was mention in your description that a system could get markdown output while in wysiwyg mode. I'm doing a standard .getData() call while in wysiwyg mode, but always get html formatted output.

What needs to happen to get this to output markdown but while editing in wysiwyg.

hectorguo commented 8 years ago

Well, maybe the description is not clear. Two modes are separate, so you can only use .getData() to get one type of formatted output. The markdown formatted output can only be got in markdown mode.

However, if you want to get the markdown formatted output in WYSIWYG mode, you can try this:

toMarkdown(CKEDITOR.instances.editor1.getData());

By doing this, the html formatted data will be translated to markdown format. This plugin just use this method to do the translation. (see plugin.js line 57)

daxhns commented 8 years ago

Is there a way to do the oposite: get html code when in markdown mode?

The reason I am asking: We are storing content in html code, but want to allow users to enter in using markdown. We also have autosave option which executes every 10 seconds, and whent the user is in markdown we need to get the html code to be saved, not the current content in editor which is markdown code.

hectorguo commented 8 years ago

@daxhns Of course, you can use marked(yourMarkdownText) to get the html code. This plugin is just based on this plugin.

MaffooClock commented 8 years ago

After successfully implementing this plugin, I discovered that the CKEditor will happily display the Markdown within the editor as-is in WYSIWYG mode without parsing it into rich text. I had to click the Markdown button to enter Markdown mode, then click it a second time to toggle back to WYSIWYG mode, at which time the Markdown would display as rich text.

Not sure if this is what @Kikketer was trying to accomplish, but if so, I was able to make it happen (with hints from @hectorguo's comments):

CKEDITOR.on('instanceReady', function(event)
{
    var editor = event.editor;
    var markdown = editor.plugins.markdown;

    var contents = editor.getData();

    CKEDITOR.scriptLoader.load(markdown.path + 'js/marked.js', function() {
        editor.setData(marked(contents));
    });
});

Once the CKEditor initializes, the Markdown is immediately parsed into HTML so that it displays as rich text in WYSIWYG mode. Then, toggling Markdown mode on and off behaves as I expected it to.

Alternatively, since I'm storing the Markdown in the database, I could parse it into HTML server-side before the CKEditor is rendered, which would negate this.

daxhns commented 8 years ago

Is there a way to get current markdown data from the editor while in markdown mode?

When using default editor.getData() I get the markdown code, but not with the latest changes I typed in since entering markdown mode. Is there a way to get current markdown code, currently visible in editor?