nhn / tui.editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
http://ui.toast.com/tui-editor
MIT License
17.21k stars 1.75k forks source link

Ability to create multiple editor using class #99

Closed aarangara closed 6 years ago

aarangara commented 6 years ago

Version

1.0.4

Test Environment

Firefox Developer Edition 59.0b13 (64-bit), macOS High Seirra 10.13.3

Current Behavior

I am trying to create multiple tui editors using class, but it only renders the editor for the first div.

Expected Behavior

Is there any way I can create multiple tui editors on the same html page using class? Or will I have to use the ids for each div and then create tui editors from it?

kyuwoo-choi commented 6 years ago

sure. you can create multiple editors on a page. and you should assign ids and initialize each editor according to the ids.

see gh-pages as an example https://github.com/nhnent/tui.editor/blob/5ffad56dcab38c760d260b5ff5e35819367ccd07/index.html#L210 https://github.com/nhnent/tui.editor/blob/5ffad56dcab38c760d260b5ff5e35819367ccd07/index.html#L226-L232 https://github.com/nhnent/tui.editor/blob/5ffad56dcab38c760d260b5ff5e35819367ccd07/index.html#L214 https://github.com/nhnent/tui.editor/blob/5ffad56dcab38c760d260b5ff5e35819367ccd07/index.html#L234-L247 https://github.com/nhnent/tui.editor/blob/5ffad56dcab38c760d260b5ff5e35819367ccd07/index.html#L218 https://github.com/nhnent/tui.editor/blob/5ffad56dcab38c760d260b5ff5e35819367ccd07/index.html#L249-L266

em... I don't know what you mean by using class. anyway, jquery plugin is just a wrapper around editor class. https://github.com/nhnent/tui.editor/blob/b4b1bd1895b7521efdc2aaf079ab015c46fd8138/examples/example01-basic.html#L29-L34

kyuwoo-choi commented 6 years ago

I think I'm closing this issue. feel free to open this issue again if you have a further question on this.

aarangara commented 6 years ago

By class, I meant using class selectors to load/render multiple toast ui editors.

Currently I have to do this :

$(".editor").each(function () {
        $(this).tuiEditor({
            initialEditType: 'markdown',
            previewStyle: 'vertical',
            height: '300px'
        });
    });

Is it possible to allow something like below instead :

$(".editor").tuiEditor({
            initialEditType: 'markdown',
            previewStyle: 'vertical',
            height: '300px'
});