nhn/tui.editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

GFM Markdown and WYSIWYG Editor - Productive and Extensible

🚩 Table of Contents

• Packages
• Why TOAST UI Editor?
• Features
• Examples
• Browser Support
• Pull Request Steps
• Contributing
• TOAST UI Family
• Used By
• License

📦 Packages

TOAST UI Editor

Name	Description
@toast-ui/editor	Plain JavaScript component

TOAST UI Editor's Wrappers

Name	Description
@toast-ui/react-editor	React wrapper component
@toast-ui/vue-editor	Vue wrapper component

TOAST UI Editor's Plugins

Name	Description
@toast-ui/editor-plugin-chart	Plugin to render chart
@toast-ui/editor-plugin-code-syntax-highlight	Plugin to highlight code syntax
@toast-ui/editor-plugin-color-syntax	Plugin to color editing text
@toast-ui/editor-plugin-table-merged-cell	Plugin to merge table columns
@toast-ui/editor-plugin-uml	Plugin to render UML

🤖 Why TOAST UI Editor?

TOAST UI Editor provides Markdown mode and WYSIWYG mode. Depending on the type of use you want like production of Markdown or maybe to just edit the Markdown. The TOAST UI Editor can be helpful for both the usage. It offers Markdown mode and WYSIWYG mode, which can be switched any point in time.

Productive Markdown Mode

CommonMark + GFM Specifications

Today CommonMark is the de-facto Markdown standard. GFM (GitHub Flavored Markdown) is another popular specification based on CommonMark - maintained by GitHub, which is the Markdown mostly used. TOAST UI Editor follows both CommonMark and GFM specifications. Write documents with ease using productive tools provided by TOAST UI Editor and you can easily open the produced document wherever the specifications are supported.

• Live Preview : Edit Markdown while keeping an eye on the rendered HTML. Your edits will be applied immediately.
• Scroll Sync : Synchronous scrolling between Markdown and Preview. You don't need to scroll through each one separately.
• Syntax Highlight : You can check broken Markdown syntax immediately.

Easy WYSIWYG Mode

• Table : Through the context menu of the table, you can add or delete columns or rows of the table, and you can also arrange text in cells.
• Custom Block Editor : The custom block area can be edited through the internal editor.
• Copy and Paste : Paste anything from browser, screenshot, excel, powerpoint, etc.

UI

• Toolbar : Through the toolbar, you can style or add elements to the document you are editing.

• Dark Theme : You can use the dark theme.

Use of Various Extended Functions - Plugins

CommonMark and GFM are great, but we often need more abstraction. The TOAST UI Editor comes with powerful Plugins in compliance with the Markdown syntax.

Five basic plugins are provided as follows, and can be downloaded and used with npm.

• chart : A code block marked as a 'chart' will render TOAST UI Chart.
• code-syntax-highlight : Highlight the code block area corresponding to the language provided by Prism.js.
• color-syntax : Using TOAST UI ColorPicker, you can change the color of the editing text with the GUI.
• table-merged-cell : You can merge columns of the table header and body area.
• uml : A code block marked as an 'uml' will render UML diagrams.

🎨 Features

• Viewer : Supports a mode to display only markdown data without an editing area.
• Internationalization (i18n) : Supports English, Dutch, Korean, Japanese, Chinese, Spanish, German, Russian, French, Ukrainian, Turkish, Finnish, Czech, Arabic, Polish, Galician, Swedish, Italian, Norwegian, Croatian + language and you can extend.
• Widget : This feature allows you to configure the rules that replaces the string matching to a specific RegExp with the widget node.
• Custom Block : Nodes not supported by Markdown can be defined through custom block. You can display the node what you want through writing the parsing logic with custom block.

🐾 Examples

• Basic
• Viewer
• Using All Plugins
• Creating the User's Plugin
• Customizing the Toobar Buttons
• Internationalization (i18n)

Here are more examples and play with TOAST UI Editor!

🌏 Browser Support

Chrome	Internet Explorer	Edge	Safari	Firefox
Yes	11+	Yes	Yes	Yes

🔧 Pull Request Steps

TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.

Setup

Fork main branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check if there are any errors.

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ npm run build toastmark
$ npm run test editor

TOAST UI Editor uses npm workspace, so you need to set the environment based on npm7. If subversion is used, dependencies must be installed by moving direct paths per package.

Develop

You can see your code reflected as soon as you save the code by running a server. Don't miss adding test cases and then make green rights.

Run snowpack-dev-server

snowpack allows you to run a development server without bundling.

$ npm run serve editor

Run webpack-dev-server

If testing of legacy browsers is required, the development server can still be run using a webpack.

$ npm run serve:ie editor

Run test

$ npm test editor

Pull Request

Before uploading your PR, run test one last time to check if there are any errors. If it has no errors, commit and then push it!

For more information on PR's steps, please see links in the Contributing section.

💬 Contributing

• Code of Conduct
• Contributing Guideline
• Commit Convention
• Issue Guidelines

🍞 TOAST UI Family

• TOAST UI Calendar
• TOAST UI Chart
• TOAST UI Grid
• TOAST UI Image Editor
• TOAST UI Components

🚀 Used By

• NHN Dooray! - Collaboration Service (Project, Messenger, Mail, Calendar, Drive, Wiki, Contacts)
• UNOTES - Visual Studio Code Extension

📜 License

This software is licensed under the MIT © NHN Cloud.

tui.editor's Issues

It's a little uncomfortable to import dependencies

Version

v1.0.1

Test Environment

OS: Windows 10
Browsers: Google Chrome

Current Behavior

The developers who want to use tui editor have to install lots of dependencies. Using package manager, they can install the dependencies easily, of course.
However, I think it is a little uncomfortable to import the dependencies, like this.

import 'markdown-it';
import 'toMark';
import 'codemirror';
import 'squire-rte';
import 'codemirror/lib/codemirror.css';
import 'tui-editor/dist/tui-editor.min.css';
import 'tui-editor/dist/tui-editor-contents.min.css';
import Editor from 'tui-editor';

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

In addition, it is difficult to find the documents that explain about the dependencies.

Expected Behavior

I'd like to import all of dependencies at a time, but I don't know if that's possible. I'm sorry.
Also, I suggest updating getting-started.md. It confuses beginners, because the codes on the document are too simple. I think it should explain about importing the dependencies.

pasting excel table in ww makes wrong table

Version

1.0.2

Test Environment

All

Current Behavior

switch to markdown

|  |  |  |
| --- | --- | --- |
<colgroup><col width="87" span="3"></colgroup>|  |  |  |
| a | b | c |
| 1 | 2 | 3 |

Expected Behavior

remove colgroup.

Create a stand-alone version that can edit local markdown files

I'd love to see this as a stand-alone markdown editor too, like retext or typora, that can edit local markdown files.

WYSIWYG: Add 3+ horizontal lines, try to erase them, get +2 line breaks and same lines

Version

1.0.2

Test Environment

Mozilla Firefox Developer Edition (latest), nw.js (webkit latest).

Current Behavior

1. Open https://nhnent.github.io/tui.editor/
2. Find a WYSIWYG example
3. Insert 3 or more horizontal rows in, erm, in a row
4. Start erasing them with Backspace key. Notice as new paragraphs appear between the lines when you try to erase the second one.

It happens on any horizontal line number greater than two. Extra paragraphs appear exactly after trying to remove the second line at the bottom.

Expected Behavior

No additional paragraphs or line breaks should appear.

about use async xhq render viewer ToastUIEditorViewer by vue tips

Version

tui-editor: v1.0.1 axios: v0.17.1 vue: v2.5.0 vuex: v3.0.1

Test Environment

chrome win7*64

Current Behavior

// Write example code
const 	tuiViewer = new Viewer({
				el: document.querySelector('#viewerSection'),
				height: '500px',
				initialValue: this.content || '',
				language: 'zh_CN',
				exts: ['table', 'uml', 'chart'],
				hooks: {
					previewBeforeHook(content) {
						console.log(arguments);
						// tuiViewer;
						debugger;
					}
				}
			});

Expected Behavior

I need to render the view and set initialValue after the axios request.
use hook previewBeforeHook debug when async req success then render the editor view and begin initialValue
When exist multiple xhq trigger the initialValue , can be cause some problem, then should use watch props（initialValue ）
then ToastUIEditorViewer.setValue(newValue)， Ensure that the obtained values are correct.;
These tips can help people who use data binding.

this my code by vue 2.x：

<template>
  <div>
    <div id="viewerSection"></div>
  </div>
</template>

<script>
var Viewer = require('tui-editor/dist/tui-editor-Viewer');
require('tui-editor/dist/tui-editor.min.css');
require('tui-editor/dist/tui-editor-contents.min.css');
require('codemirror/lib/codemirror.css');
require('tui-editor/dist/tui-editor-extScrollSync.min.js');
require('tui-editor/dist/tui-editor-extColorSyntax.min.js');
require('tui-color-picker/dist/tui-color-picker.min.css');
require('tui-editor/dist/tui-editor-extTable.min.js');
require('tui-editor/dist/tui-editor-extUML.min.js');
require('plantuml-encoder/dist/plantuml-encoder.js');
require('raphael/raphael.js');
require('tui-chart/dist/tui-chart.min.js');
require('tui-editor/dist/tui-editor-extChart.min.js');
require('tui-chart/dist/tui-chart.min.css');
var tuiViewer;
export default {
	name: 'TuiViewer',
	props: {
		content: String
	},
	methods: {
		setContent() {
			tuiViewer.setMarkdown(this.content);
		}
	},
	watch: {
		content: function(newValue) {
			debugger;
			tuiViewer.setValue(newValue);
		}
	},
	mounted() {
		this.$nextTick(function() {
			tuiViewer = new Viewer({
				el: document.querySelector('#viewerSection'),
				height: '500px',
				initialValue: this.content || '',
				language: 'zh_CN',
				exts: ['table', 'uml', 'chart'],
				hooks: {
					previewBeforeHook(content) {
						console.log(arguments);
						// debugger;
					}
				}
			});
			// debugger;
		});
	}
};
</script>

<style scoped>

</style>

Use NPM for toMark dependency

Hi !

Test Environment

Windows 7

Current Behavior

I'm trying to npm install --save tui-editor.

I'm getting this error :

npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\cmd\git.EXE ls-remote -h -t ssh://[email protected]/nhnent/toMark.git
npm ERR!
npm ERR! FATAL ERROR: Network error: Connection refused
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR! exited with error code: 128

It seems to be a proxy issue but git and npm are already configured for my proxy.

I tried to run git ls-remote independently :
git ls-remote -h -t ssh://[email protected]/nhnent/toMark.git : same error
git ls-remote -h -t https://github.com/nhnent/toMark.git : the command never ends

Could you npm publish toMark and change package.json to use it that way ? I think that would solve my issue.

jquery

Version

1.0.1

Test Environment

All

Current Behavior

Expected Behavior

jquery update to version ^3.1.0

Translation

Hello,

Is it possible that we can get the language strings in an stand alone file in the project. So we can translate easily the editor?

Request: Webdav support

Hi, I’d like to request Webdav support, which is supported by all operating systems (MacOS, Windows, FreeBSD, Linux) and usable through apps on mobile devices.

This would allow the editor to integrate with other pieces of software mentioned on issue #50, which is also referenced on Joplin issue #176.

Being able to config extensions

Hi,
Is there a way to configure extensions ?
For example I would like to change the DEFAULT_RENDERER_URL to use mine.
https://github.com/nhnent/tui.editor/blob/377d148fd328ed3d54e6c9163a15b07264797632/src/js/extensions/uml.js#L10

Pb with tui and vuejs

Hi,

I'm testing tui and it's seems pretty good. thx for releasing it :)
I have problem with loading underscorejs and tui.editor. Without underscorejs, tui.editor works fine, but with underscorejs loaded, the editor displays but does not react (unable to write, click on any button, ...).
I tried to replace underscorejs with lodash without success.

tui.editor 0.14.0 (and its dependencies loaded by bower)
jquery 2.2.4
underscorejs 1.8.3
Tested on gnu/linux debian with firefox 52 and chrome 60

Any hint ?

No syntax highlighting in WYSIWYG mode

Version

1.0.2

Test Environment

Mozilla Firefox Dev Edition (latest), nw.js (latest webkit)

Current Behavior

Open https://nhnent.github.io/tui.editor/

Write some code, like

```css
 .tui-editor-defaultUI .te-tab button {
    box-sizing: border-box;
    line-height: 100%;
    position: relative;
    cursor: pointer;
    z-index: 1;
}
```

While in Markdown mode, the preview code is colored. While in WUSIWYG, it is not.

Expected Behavior

Code should be colored in both views.

should show image not base64 code

tui.editor를 이용하여 QnA 게시판을 만들었습니다.

왼쪽에 질의사항을 보이고 오른쪽에 답변사항을 편집하는데,

답변사항에서 이미지 붙여넣기한 후에 저장하고,

다시 열면 이미지가 byte 문자열로 보입니다.

확인 부탁드립니다.

how to get text value? how to convert MD to plain text or html text?

관리자에서 에디터를 통하여 게시글을 작성하여 DB에 등록하고
프론트에서 DB에 등록된 게시글을 조회하여 전시하는 구조의 프로그램 개발중입니다.
프로트 모듈 작성 시 질문사항 생겨서 문의 드립니다.

1. 게시글을 전시하려면 어떻게 해야하나요?
2. 마크다운 텍스트를 일반 텍스트(plain text) 로 변환할 수 없나요?
3. 마크다운 텍스트를 html 텍스트(plain text) 로 변환할 수 없나요?

확인 부탁드립니다. 감사합니다.

Step missing from installation instructions

Version

1.0.1

Test Environment

OSX Chrome 63.0.3239.132

Current Behavior

The README isn't very clear as to what CSS files are required to be loaded for the component to function correctly. Additional to the two more obvious editor CSS files within tui-editor, the codemirror/lib/codemirror.css file was required. This could be more explicit in the installation instructions.

Expected Behavior

Following the README installation instructions results in a fully functional component.

docs: need docs for npm + bundler usage

Version

tui-editor v1.0.1

Test Environment

chrome win10*64

Current Behavior

// html
<div id="editSection">
    </div>
    <script src="./index.js"></script>

// js
var Editor = require('tui-editor');
require('tui-editor/dist/tui-editor-extScrollSync.js');
//require('tui-editor/dist/tui-editor.css');
//require('tui-editor/dist/tui-editor-contents.css');
//require('codemirror/lib/codemirror.css')
//require('highlight.js/styles/github.css');
var editor = new Editor({
    el: document.querySelector('#editSection'),
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px',
    exts: ['scrollSync'],
    useCommandShortcut: true,
});

Expected Behavior

docs example Basic
When I don't use this.

require('tui-editor/dist/tui-editor.css');
require('tui-editor/dist/tui-editor-contents.css');
require('codemirror/lib/codemirror.css')

I cant use online edit markdown editor and ui style is disordered

setting i-beam pointer on empty space in markdown will make better UX

Version

v1.0.1

Test Environment

Chrome 63, Firefox developer edition 58

Current Behavior

텍스트 박스 상에서 텍스트를 작성한 행 위에 커서를 올리면 ibeam 커서가 나타나지만, 텍스트를 작성하지 않은 빈 공간에 커서를 올리면 기본 arrow 커서가 나타납니다.

Expected Behavior

대부분의 에디터가 편집 섹션에는 기본적으로 ibeam 커서를 나타나게 하고 있는 만큼, 사용자 경험 측면에서 빈 공간에도 ibeam 커서를 나타나게 하는 게 더 낫지 않을까 생각합니다.

Suggestion: use Blob + Window.URL instead of base64

Very appreciate your work with such amazing editor.

I've noticed TUI editor supports IE10+, which means it can use blob and window.URL instead of base64 when uploading images. It will reduce those verbose and unreadable base64 data when users switch to Markdown mode. Also, the performance of parsing content would be better.

How do you think about it?

Suggestion: Plugin for Visual Studio Code

The WYSIWYG editor is really great. This helps a lot of people who are used to creating texts visually.

For exactly this reason, it would be great if there was a plugin for Visual Studio code for this editor. Since this is also completely written in type and JavaScript, this should not be a big act. But I think this would help a lot of people to create Markdown documents in the future.

HTML mode

Is there a way to have HTML mode?

Thx.

Add CONTRIBUTING.md file

Awesome project. I'm interested in making some PR but I'm curious the best branch to open pull requests to?

I'd like suggest for future contributions to this project, to create a CONTRIBUTING.md file with some guidelines on contributing, the Pull Request process, and code of conduct that the maintainers of this project would like.

Thanks!

How do I enter media link?

Version

Test Environment

Current Behavior

How do I enter media link?

동영상 링크를 입력할려면 어떻게 해야하나요?

Expected Behavior

Markdown code formatting is different from output formatting

Version

1.0.2

Test Environment

Firefox Developer Edition (latest), nw.js (webkit latest).

Current Behavior

Go to https://nhnent.github.io/tui.editor/
Write

****text****
**text**

First 'text' is not bold in a code view but is rendered as bold. The second 'text' is ok. So the markdown syntax highlighting in code view is buggy.

The same affects four underscores (____text____).

Expected Behavior

Text formatting should be correct for both views (****text**** should be shown as a bold text).

need to review docs

I think a lot of sentences can be better as English is not my first language.
Please feel free to make a PR and become a contributor!
Translation is also welcomed.

readme
getting started
getting started with bower
using extensions

move wiki docs to docs directory

i18n for your language wanted

Hello TOAST UI Editor users.

If you found your language is not supported yet.

You can help us and become a contributor. This is a good first issue.

A PR #33 made by @elamperti is a good example. Please check it out.

Publish to npm

Hi.
Do you have in plan to publish your package to npm? bower is a little outdated for now and It would be great if I can get it from npm as all other packages.

review readme

Because English is not my first language, I need someone who can do it smoother.
Make a PR and be a committer.

feature reqeust youtube codeblock extention

show only part of long content at first rendering in markdown editor

Version

1.0.2

Test Environment

All

Current Behavior

Editor initialized with long contents appears with some content cut off.

Giving focus on editor will show the lest of content.

Expected Behavior

It should show all content at first render

Everything is based on 'px', is unscalable and doesn't respect the current color scheme. Preprocessors?

Version

1.0.2

Test Environment

Firefox Developer Edition (latest), nw.js (webkit latest).

Current Behavior

It is extremely hard to blend the editor with a real environment (I mean web page design), as it has inconsistent use of inline PNGs and SVGs, hard-coded 'px' units and all the other unfancy stuff. Honestly, the code smells. Like, stinks. It's a pity that such great FOSS project has ugly insides 😢

There are no CSS variables or preprocessor codes to compile, and no way to style the editor except by manual editing of CSS files. I have a dark app with large typography and existing button & input styles, and I had to wipe out literally a half of all the CSS code of ToastUI editor. The other half is tweaked till now and is converted to stylus.

Expected Behavior

There are several ways to solve this problem:

• use preprocessor with variables so users can config editor to their size, color, style requirements;
• create multiple themes, at least dark one (this will be much easier with preprocessors, though);
• allow to config colors and scale via js (hard to do and seems to be irrational 😐)

Besides that, I believe that no one should use px in 2018, but rem`em` instead of that. You could also add source icons in SVG to the repo.

Please forgive me if I sound rude, I have a really tough time with ToastUI editor :/

Add the ability to move toolbar & hide mode switch

Would really like to be able to position the toolbar to the bottom while retaining the menu popup functionality, like: table, right click on table etc.

Additionally would like to be able to remove the toolbar containing the markdown/wysiwyg toggle button.

I've been able to do these things with css but it seems to break some of the hover effects and causes some side effects.

Make git branching model simple

many ppl confused on default branch was production branch,
which is just for compiling distribution files before it is published.

This was because many people still want to download distribution files by green download button on main page on repo.

we will change default branch to master.

and develop branch has been removed because we now can't rebase develop branch as forked repo increases.

marked xss vulnerabilities

dev dependency marked has xss vulnerabilities reported in

https://nvd.nist.gov/vuln/detail/CVE-2017-17461
https://nvd.nist.gov/vuln/detail/CVE-2017-1000427

Editor and it's demo will not be affected by these vulnerabilites as these on process making jsdoc documents.

But better be covered.

about es6 import support browser refresh

Version

tui-editor: v1.0.1 webpack: v2.6.1

Test Environment

chrome windows*64

Current Behavior

// Write example code
const Editor = require('tui-editor');
require('tui-editor/dist/tui-editor.min.css');
require('tui-editor/dist/tui-editor-contents.min.css');
require('codemirror/lib/codemirror.css');
require('tui-editor/dist/tui-editor-extScrollSync.min.js');
require('tui-editor/dist/tui-editor-extColorSyntax.min.js');
require('tui-color-picker/dist/tui-color-picker.min.css');
require('tui-editor/dist/tui-editor-extTable.min.js');
require('tui-editor/dist/tui-editor-extUML.min.js');
require('plantuml-encoder/dist/plantuml-encoder.js');
require('raphael/raphael.js');
require('tui-chart/dist/tui-chart.min.js');
require('tui-editor/dist/tui-editor-extChart.min.js');
require('tui-chart/dist/tui-chart.min.css');
// or 
import Editor from 'tui-editor';
import('tui-editor/dist/tui-editor.min.css');
import('tui-editor/dist/tui-editor-contents.min.css');
import('codemirror/lib/codemirror.css');
import('tui-editor/dist/tui-editor-extScrollSync.min.js');
import('tui-editor/dist/tui-editor-extColorSyntax.min.js');
import('tui-color-picker/dist/tui-color-picker.min.css');
import('tui-editor/dist/tui-editor-extTable.min.js');
import('tui-editor/dist/tui-editor-extUML.min.js');
import('plantuml-encoder/dist/plantuml-encoder.js');
import('raphael/raphael.js');
import('tui-chart/dist/tui-chart.min.js');
import('tui-editor/dist/tui-editor-extChart.min.js');
import('tui-chart/dist/tui-chart.min.css');

//init
		const editor = new Editor({
				el: document.querySelector('#editSection'),
				initialEditType: 'markdown',
				initialValue: this.content || '',
				previewStyle: 'vertical',
				height: '300px',
				language: 'zh_CN',
				exts: ['scrollSync', 'colorSyntax', 'table', 'uml', 'chart'],
				useCommandShortcut: true
			});

Expected Behavior

this is first enter this page:

when I use es6 import , I refresh（F5） page then these Extensions: Scrolling ，Color picker，Table(merge) useless

But using CommonJS is valid. I didn't find out what caused it?

Retina (@2x) icons

It would be great if Retina/High-resolution icons were built in natively.

rawgit image

Question : Can we load a dictionnary (French one f.i.) ?

By looking the HTML of the editor, I see that you've already foresee a "spellcheck" attribute

<div contenteditable="true" class="tui-editor-contents" ....  spellcheck="false" ....>

Is it possible to specify the language for the spellcheck ? (french, dutch, english, ...)

Many thanks

Question : how to save ?

Hi !

Not an issue but a question : I've not yet installed tui.editor and I'm really interested too try it but ... how can we save the content on the server ?

I'm actually using Simple MDE, we can attach on the toolbar a "save" button, retrieve the content of the

and send it to the server with Ajax f.i.

Can we does something like that with tui.editor ? Can you provide tips or documentation ?

Many thanks !!!

Christophe

characters in selecting range disapears

Version

1.0.2

Test Environment

Win8 IE11

Current Behavior

markdown editor has the same issue reported in codemirror/codemirror5#5087
Steps:

1. write some korean words(may be multi type languages)
2. backspace, delete some characters
3. write korean characters again
4. try select a range using mouse
5. selected range deleted
6. later on, the characters in range will be gone continually

Expected Behavior

Text shouldn't be removed.

HTML lost in WYSIWYG mode

I've been looking for a solid WYSIWYG markdown editor for some time, and Toast looks very promising! I've just been testing with the demo and noticed an issue with HTML in markdown. As you know putting HTML code in markdown is perfectly valid, and often is the only way to achieve something beyond the capabilities of markdown (adding a class or id for example). in the Markdown mode, things look ok:

# markdown

<div class="html">HTML</div>

**more markdown**

and renders in the preview fine (even with class="html" intact):

However, switching to WYSIWYG mode and back to Markdown causes a loss of the HTML:

It would be great (and much safer for users) if this could be maintained between modes.

exception occurs on both setValue and imageBlobCallback

안녕하세요. 네무소프트 김지혜입니다.

Toast Cloud Blog 개발 관련하여 Dooray editor을 사용하고 있는데요.
다음과 같은 이슈가 발생하여 문의 드리오니 확인 부탁드립니다.

1. 값 셋팅시 null 처리
   null 값 셋팅시 오류가 발생하고 있습니다.
   단, 임의적으로 blank를 넣으면 정상작동합니다.
2. image 경로 callback시 특수문자 처리
   image 서버와 연동 후 이미지 경로를 에디터에 시팅시 특수문자가 들어가면
   console창에 404(Not Found) 오류가 발생합니다.
   물론 이미지도 보이지 않구요..

감사합니다.

Feature request: Allow typing markdown in WYSIWYG mode

It is very powerful to be able to type markdown directly in the WYSIWYG mode. Examples of such editors:

• http://typora.io/
• https://paper.dropbox.com/

Can't access markdown-it object, therefore can't add extra markdown-it plugins

First let me start with: awesome work on TUI editor!

I'm trying to add a markdown-it plugins (for example: https://github.com/nunof07/markdown-it-alerts), but don't have access to the markdown-it instance. I've loaded TUI editor through Webpack.

Any idea how I can accomplish this?

rawgit image

Code blocks causing issues when toggling modes

Like the previous issue I posted, switching between Markdown and WYSIWYG modes also causes issues for codeblocks. Take the example code:

Toggling to WYSIWYG and back to Markdown causes the code to be wrapped in backticks:

Repeating this process results in more backticks:

Live Preview Switching Bug: Adding auto code tags.

Version: v 1.0.2

Test Environment

Chrome: 63.0.3239.132, Windows 10

Current Behavior

Hi. I used tui.editor to try it on this link: https://nhnent.github.io/tui.editor/.

I added code tags like that:

 javascript
console.log(123); 

After I click WYSIWYG and then again I switched markdown tab tui.editor added extra ` tags and deleted programming language that I declared. For example:

console.log(123);  

Expected Behavior

It should stay without any data loss and when I navigate between tabs. I added this:

javascript
console.log(123); 

I expected this:

` ` ` javascript
console.log(123); 
` ` `

Is there any way to add an image or some other element to selected position?

Version

1.01

Test Environment

Chrome, Mac
React

Current Behavior

 editor.insertText('<img src='~~'/>')

Expected Behavior

Hi. Thanks for a wonderful editor! I'm trying to add an image to server and place it selected position. (not base 64 encoded image)
Since i'm using addImageBlobHook , execute above code after successfully uploading image.
I think it's not the right way.. Is there any possible way?

Can´t make the editor work

Version

Version 1.1 from "Production" Branch

Test Environment

Client: Chrome 63.0.3239.13, Windows 10 64 Bits
Server: Ubuntu 16.04 LTS, NGINX, PHP-FPM, PHP 7.2, Laravel 5.5

Current Behavior

I can´t load the editor, using the file "tui-editor-Editor-all.min.js": gives me this error:
Uncaught TypeError: Cannot read property 'WwCodeBlockManager' of undefined
With this file: "tui-editor-Editor.min.js" it gives me this error:
Uncaught TypeError: (0 , r.default) is not a function

Code example

<script src="{{ asset('/plugins/tui-editor/dist/tui-editor-Editor-all.min.js') }}" type="text/javascript"></script>    
    <link href="{{ asset('/plugins/tui-editor/dist/tui-editor.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('/plugins/tui-editor/dist/tui-editor-contents.min.css') }}" rel="stylesheet" type="text/css" />

<div id="editSection"></div>

<script>
        $('#editSection').tuiEditor({
            initialEditType: 'markdown',
            previewStyle: 'vertical',
            height: '300px'
          });
        });
</script>

Expected Behavior

Show the Editor in the div selected.

Disabling bold / italics with toolbar spawns more `*` if inner text is selected, not outer

Version

1.0.2

Test Environment

Firefox Developer Edition (latest), nw.js (webkit latest).

Current Behavior

1. Go to https://nhnent.github.io/tui.editor/ , find an editor with a code input.
2. Write **bold**
3. Double-click the bold. Note that only bold gets selected, not **bold**.
4. Click a Bold button on a toolbar.
5. Now you have ****bold****.

These __bolds__ are selected with underscores on double-clicking, and their formatting is removed correctly. But if exactly bolds are selected, it creates more symbols as well.

The same affects *italics*.

Expected Behavior

You should get bold on step 5. Code editor should check for surrounding asterisks.