tui-editor

GFM Markdown Wysiwyg Editor - Productive and Extensible

GFM Markdown WYSIWYG Editor - Productive and Extensible

🚩 Table of Contents

Collect Statistics on the Use of Open Source

TOAST UI Editor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Editor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatisticsoptions when creating editor.

const options = {
  // ...
  usageStatistics: false
}

const instance = new Editor(options);

Or, include tui-code-snippet(v1.5.0or later) and then immediately write the options as follows:

tui.usageStatistics = false;

📙 Documents

Standard and Extensible

CommonMark + GFM Specifications

Today CommonMarkis the de-facto Markdownstandard. GFM (GitHub Flavored Markdown)is another popular specification based on CommonMark- maintained by GitHub, which is the Markdownmostly used. TOAST UI Editor follows both CommonMarkand GFMspecifications. 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.

Powerful Extensions

CommonMarkand GFMare great, but we often need more abstraction. The TOAST UI Editor comes with powerful Extensionsin compliance with the Markdownsyntax. You also get the flexibility to develop your own extensions using simple APIs.

Here are some of the extensions you can start with:

  • Color Picker: ColorPickerprovides an easy way to color text with a GUI tool box.

  • Chart Code Block: A code block marked as a 'chart' will render charts.

  • UML Code Block: A code block marked as an 'uml' will render UML diagrams.

  • Table Merge: You can merge columns and rows in tables.

    To learn more about Extensionscheck the Using Extension.

🎨 Features

TOAST UI Editor provides Markdown modeand WYSIWYG mode.

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

Productive Markdown Mode

  • Live Preview: Edit Markdown while keeping an eye on the rendered HTML. Your edits will be applied immediately.
  • Scrolling Sync: Synchronous scrolling between Markdown and Preview. You don't need to scroll through each one separately.
  • Auto Indent: The cursor will always be where you want it to be.
  • Syntax Highlight: You can check broken Markdown syntax immediately.

Easy WYSIWYG Mode

  • Copy and Paste: Paste anything from browser, screenshot, excel, powerpoint, etc.
  • Codeblock Editor: Highlight 170+ languages with full size code editor.
  • Table: Hate the Markdown table? You can do everything with a mouse.

And More

  • i18n: English, Dutch, Korean, Japanese, Chinese, Spanish, German, Russian, French, Ukrainian, Turkish, Finnish, Czech, Arabic, Polish, Galician, Swedish, Italian + language you extend.
  • Viewer: Renders Markdown content with extensions

🐾 Examples

💾 Install

TOAST UI products can be used by using the package manager or downloading the source directly. However, we highly recommend using the package manager.

Via Package Manager

TOAST UI products are registered in two package managers, npmand bower. You can conveniently install it using the commands provided by the package manager. When using npm, be sure to use it in the environment Node.jsis installed.

npm

$ npm install --save tui-editor # Latest version
$ npm install --save tui-editor@<version> # Specific version

Via Contents Delivery Network (CDN)

TOAST UI products are available over the CDN powered by TOAST Cloud.

You can use the CDN as below.

<!-- Styles -->
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor.css"></link>
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor-contents.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css"></link>
<!-- Scripts -->
<script src="https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor-full.js"></script>

If you want to use a specific version, use the tag name instead of latestin the url's path.

The CDN directory has the following structure.

tui-editor/
├─ latest/
│  ├─ tui-editor-Editor.js
│  ├─ tui-editor-Editor.min.js
│  └─ ...
├─ v1.1.0/
│  ├─ ...

Download Source Files

🛍️ Wrappers

🔨 Usage

The code below shows an example of using ES6 in node environment. If you are using bowerplease see Getting Started with Bower.

Create Editor

HTML

Add the container element where TOAST UI Editor will be created.

<div id="editorSection"></div>

JavaScript

TOAST UI Editor can be used by creating an instance with the constructor function. To get the constructor function, you should import the module using one of the following ways depending on your environment.

const Editor = require('tui-editor'); /* CommonJS */
import Editor from 'tui-editor'; /* ES6 */

Then import styles of TOAST UI Editor and dependencies.

import 'tui-editor/dist/tui-editor.css'; // editor's ui
import 'tui-editor/dist/tui-editor-contents.css'; // editor's content
import 'codemirror/lib/codemirror.css'; // codemirror
import 'highlight.js/styles/github.css'; // code block highlight

Finally you can create an instance with options and call various API after creating an instance.

import 'codemirror/lib/codemirror.css';
import 'tui-editor/dist/tui-editor.css';
import 'tui-editor/dist/tui-editor-contents.css';
import 'highlight.js/styles/github.css';

import Editor from 'tui-editor';

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

instance.getHtml();

If you use jQuery plugin, you can use it as follows.

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

Default Options

  • height: Height in string or auto ex) 300px| auto
  • initialValue: Initial value. Set Markdown string
  • initialEditType: Initial type to show markdown| wysiwyg
  • previewType: Preview style of Markdown mode tab| vertical
  • usageStatistics: Let us know the hostname. We want to learn from you how you are using the Editor. You are free to disable it. true| false

Find out more options here

Create Viewer

TOAST UI Editor provides the Viewerin case you want to show Markdowncontent without loading the Editor. The Viewer is much lighterthan the Editor.

import 'tui-editor/dist/tui-editor-contents.css';
import 'highlight.js/styles/github.css';

import Viewer from 'tui-editor/dist/tui-editor-Viewer';

const instance = new Viewer({
  el: document.querySelector('#viewerSection'),
  height: '500px',
  initialValue: '# content to be rendered'
});

instance.getHtml();

Be careful not to load both the Editor and the Viewer at the same time because the Editor already contains the Viewer function, you can initialize editor Editor.factory()and set the vieweroption to value truein order to make the editor a viewer. You can also call getHtml()to render the HTML.

import Editor from 'tui-editor';

const instance = Editor.factory({
  el: document.querySelector('#viewerSection'),
  viewer: true,
  height: '500px',
  initialValue: '# content to be rendered'
});

TOAST UI Editor follows CommonMarkand GFM*. So any *Markdownrenderer including markdown-itcan handle the content made using TOAST UI Editor. You can also use any of these renderer in place of TOAST UI Editor Viewer.

🌏 Browser Support

ChromeInternet ExplorerEdgeSafariFirefox
Yes10+YesYesYes

🔧 Pull Request Steps

All TOAST UI products are open source. A Pull Request (PR) can be made upon fixing an issue or developing additional features to be implemented.

Install

To install, first fork the master branch to your own personal repository. Then, clone the forked repository to your local machine, and install the following node module. Prior to development, first, make sure that the modules are properly installed.

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

Develop

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

Run webpack-dev-server

$ npm run serve

Run karma

$ npm run test

Pull Request

Before creating a PR, test and check for any errors. If there are no errors, then commit and push.

For more information, please refer to the Contributing section.

💬 Contributing

🍞 TOAST UI Family

🚀 Used By

📜 License

This software is licensed under the MIT© NHN.

HomePage

https://github.com/nhn/tui.editor

Repository

https://github.com/nhn/tui.editor.git


上一篇:odata
下一篇:ux-react-grid-layout

相关推荐

  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前
  • 闲谈Monaco Editor-基本使用

    什么是Monaco Editor? 微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(下文简称monaco)就是从这个项目中成长出...

    2 年前
  • 通过SortableJS实现elementUItable拖动效果

    背景 目前elmenetUI的表格是不支持拖动的,但表格行拖动要求往往比较常见。通过引入sortableJS可以方便的让elementUI组件中的table支持拖动效果。

    2 个月前
  • 跨域编辑器的编码习惯editorConfig

    编辑器就是生产力,符合个人编程习惯和风格的编辑器能给开发带来轻松愉快的心情和生产力。前端开发中越来越多东西需要通过配置文件来进行配置,现在编辑器也使用了这一方法。 意义 存在的目的是项目代码在不...

    2 年前
  • 超详细 ElementUI 源码分析 —— Input

    最近在学习 Vue 框架,想深入了解一下组件化开发以及封装组件库的思想,而 ElementUI 作为这方面做的最好的也是最常用的组件库,它的源码一定有很多值得我们去学习的地方,所以去 ElementU...

    3 个月前
  • 试题公式解决方案--kindeditor集成jmeditor公式web编辑器

    最近在搞一套在线的考试系统,一直为即支持公式编辑又得支持各种附件上传、图片上传、视频音频上传、文字编辑 的web编辑器而犯愁。于是乎试着把 kindeditor和jmeditor集成一下,多了不说了直...

    2 年前
  • 记录Vue+elementUi的开发过程,小白一枚

    最近公司在用VueelementUi开发后台管理系统,因为新手,所以好多东西理解的不够透彻,上手野也慢,现在自己给自己做下开发的小记录,方便日后查看和纠错,欢迎大家指正。

    2 年前
  • 记一次webpack优化记录 主要优化monacoEditor编辑器

    先说一下monaco。什么、monaco?好吧,我们换个名字,vscode浏览器端的线上Ide。强大得代码提示,统一的编码风格,的确让我觉得很。把ide植入我开发的可视化搭建ide的时候,我吐了,整整...

    3 天前
  • 解决elementUI的穿梭框clearQuery方法无效

    2018125 原因很简单,2.2.0版本才有此清空功能; 如果在生产中的项目中不好升级到2.2.0版本有以下解决方法。 解决方法(对于2.2.0一下版本的): 离开transfer时: ...

    2 年前
  • 解决ElementUI进度条组件percentage超过100报错的问题

    由于format处理的只是进度条文本的展示效果, 而且该参数只接收一个函数, 所以可以通过以下方式保持超过100仍按100显示, 但文本可以显示实际值: ...

    7 个月前

官方社区

扫码加入 JavaScript 社区