当前位置:主页 > JavsScript库 > 文本 >

全功能 WYSIWYG Markdown 编辑器 - tui.editor
栏目分类:文本   发布日期:2021-08-18   浏览次数:

这是tui.editor的 JavaScript 版本 ,可以更轻松地将强大的、可扩展的、功能齐全的多语言 WYSIWYG Markdown 编辑器嵌入到您的 Web 应用程序中。

更多功能:

  • CommonMark和 GitHub Flavored Markdown规范。

  • 有用的扩展:颜色选择器、图表、UML、表格合并。

  • 轻松创建自己的扩展。

  • 简单和所见即所得的模式。

  • 具有同步滚动支持的实时 HTML 预览。

  • 语法高亮。

  • 允许以编程方式设置内容。

安装和下载

# NPM
$ npm install tui-editor --save

基本用法

在网页上包含 tui.editor 的文件。

<link rel="stylesheet" href="dist/toastui-editor.css">
<link rel="stylesheet" href="dist/toastui-editor-viewer.css">
<script src="dist/toastui-editor.js"></script>
<script src="dist/toastui-editor-viewer.js"></script>

为 WYSIWYG Markdown Editor 创建一个占位符元素。

<div id="example"></div>

创建一个新的 WYSIWYG Markdown 编辑器并完成。

var editor = new Editor({
    el: document.querySelector('#example')
});

自定义 WYSIWYG Markdown 编辑器的所有可能选项和功能。

  • height : 编辑器的高度样式值。高度应用为边框框 ex) '300px', '100%', 'auto'

  • minHeight : 编辑器的最小高度样式值,以像素为单位,例如“300px”

  • initialValue : 编辑器的初始值

  • previewStyle : Markdown 编辑器的预览样式(tab,垂直)

  • previewHeight: 突出显示markdwon编辑器中光标位置对应的一个预览元素

  • initialEditType : 初始编辑器类型(降价,所见即所得)

  • events:事件列表事件列表

  • events.load : 编辑器完全加载时会发出

  • events.change : 内容改变时触发

  • events.stateChange : 当光标位置改变格式时会发出

  • events.focus : 当编辑器获得焦点时会发出

  • events.blur : 当编辑器失去焦点时会发出

  • hooks:钩子列表

  • hooks.previewBeforeHook : 在显示预览之前提交预览以挂钩 URL

  • hooks.addImageBlobHook : 图片上传挂钩。

  • language:语言

  • useCommandShortcut : 是否使用键盘快捷键执行命令

  • useDefaultHTMLSanitizer : 使用默认的 htmlSanitizer

  • codeBlockLanguages:要列出支持的代码块语言。默认是 highlight.js 支持的

  • usageStatistics:将主机名发送到谷歌分析

  • toolbarItems:工具栏项目。

  • hideModeSwitch : 隐藏模式切换标签栏

  • plugins: 扩展数组

  • extendedAutolinks: 使用 GFM 规范中指定的扩展自动链接

  • customConvertor: 转换器扩展

  • placeholder:  可编辑元素的占位符文本

  • linkAttribute:锚元素的属性应该是rel、target、contenteditable、hreflang、type

  • customHTMLRenderer:包含自定义渲染器功能的对象对应于降价节点

  • referenceDefinition:是否使用链接引用定义的规范

  • customHTMLSanitizer:自定义 HTML 消毒剂

  • frontMatter:是否使用前置材料

var editor = new Editor({
    previewStyle: 'tab',
    initialEditType: 'markdown',
    height: '300px',
    minHeight: '200px',
    language: 'en_US',
    useDefaultHTMLSanitizer: true,
    useCommandShortcut: true,
    codeBlockLanguages: _codeBlockManager.CodeBlockManager.getHighlightJSLanguages(),
    usageStatistics: true,
    toolbarItems: ['heading', 'bold', 'italic', 'strike', 'divider', 'hr', 'quote', 'divider', 'ul', 'ol', 'task', 'indent', 'outdent', 'divider', 'table', 'image', 'link', 'divider', 'code', 'codeblock'],
    hideModeSwitch: false
});


官方网站:https://github.com/nhn/tui.editor

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库