javascript - tui-editor: how can i retrieve text (markdownhtml) - Stack Overflow

admin管理员组

文章数量:1414621

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

Share Improve this question Follow asked Jun 12, 2018 at 10:47 GDAGDA 15911 gold badge22 silver badges1212 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

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()

本文标签： javascripttuieditor how can i retrieve text (markdownhtml)Stack Overflow