I try use JS markdown editor tui-editor. For this i add on page div element with id "rawtext". Standart initializaion:

var editor = $('#rawtext').tuiEditor({
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    exts: ['colorSyntax']
     });

Editor is successfully loaded and all work. But how can i retrieve text from editor? According documentation class ToastUIEditor has method getMarkdown,but i can't acess to object with this method

I try use JS markdown editor tui-editor. For this i add on page div element with id "rawtext". Standart initializaion:

var editor = $('#rawtext').tuiEditor({
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    exts: ['colorSyntax']
     });

Editor is successfully loaded and all work. But how can i retrieve text from editor? According documentation class ToastUIEditor has method getMarkdown,but i can't acess to object with this method

• javascript
• markdown

6 Answers 6

It's from the editor maintainer.

The jQuery plugin doesn't expose any APIs from the documentation. It's just a shortcut for the initializer.

You'll want to initialize the editor with ToastUIEditor constructor if you want to access the APIs.

var editor = new tui.Editor({
    el: document.querySelector('#rawtext'),
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px'
});

editor.getMarkdown()

The change event is where you most likely want to call that method.

var editor = $('#rawtext').tuiEditor({
  initialEditType: 'markdown',
  previewStyle: 'vertical',
  exts: ['colorSyntax'],
  events: {
    change: function() {
        console.log(editor.getMarkdown())
    },
  }
});

I'm also not sure if the jQuery plugin returns the object, but some form of this pattern will get you where you're trying to go.

This is an old thread but I think I faced the same problem and want to share my solution.

I embedded the editor within the HTML element and then was able to get the markdown directly.

1. create the editor

    let editor = $('#rawtext').tuiEditor({
        initialEditType: 'markdown',
        previewStyle: 'vertical',
        exts: ['colorSyntax']
         });
    $('#rawtext').editor = editor;
   

2. get the markdown directly from the embedded editor

    let editor = $('#rawtext').editor;
    let markdown = editor.getMarkdown()
   

I've faced the same problem and below is what I did. Hope it helps

var editor = new tui.Editor({
  el: document.querySelector('#editSection'),
  initialEditType: 'markdown',
  previewStyle: 'vertical',
  height: '300px'
});
$('#editSection').data('editor', editor);
$("#editSection").data('editor').setValue("* [x] Some markdown **here**");
alert($("#editSection").data('editor').getValue());

For the jquery editor (v2) the following is suggested in the documentation and I can confirm that this is working for me. The answer that suggests to attach the editor to the div after creation however doesn't work for me.

Creation of the editor after loading the page

let logeditor = $('#editor').toastuiEditor(
    {
      height: '500px',
      initialEditType: 'markdown',
      previewStyle: 'horizontal'
    });

Fething the markdown or html

const markdown = $('#editor').toastuiEditor('getMarkdown');
console.log (markdown);
const html = $('#editor').toastuiEditor('getHtml');
console.log (html);

editor.data('tuiEditor').getMarkdown()