toast-ui/vue-editor

卫飞
2023-12-01

"@toast-ui/vue-editor": "^3.2.2"
富文本编辑器:最近在网上看到一个挺不错的富文本编辑器插件  toast-ui/vue-editor
在单文件组件中使用需要把 tui-editor.css,tui-editor-contents.css,codemirror.css 引人到文件中
假设现在创建了一个名叫 Editor 的公共Vue 组件
import '@toast-ui/editor/dist/toastui-editor.css'
import '@toast-ui/editor/dist/toastui-editor-viewer.css'
import '@toast-ui/editor/dist/i18n/zh-cn' // 引入语言文件
import 'codemirror/lib/codemirror.css';
import { Editor } from '@toast-ui/vue-editor'
export default {components: {'editor': Editor}}

使用v-model 的方式

在自己的组件中引用公共组件 Editor
<template>
    <editor v-model="editorText" />
</template>
import Editor from '@/components/Editor'

export default { components: { Editor } },
data() { return { editorText: '' } } }

Editor 的常用的属性:
value: String 如果使用了v-model 不要使用value的方式去控制Editor的内容
options: Object 初始化 Editor 实例
height: String 控制高度 默认 300px 
previewStyle:String 可以改变编辑器的预览风格 默认 tab
mode:String 改变编辑器的模式 默认为 markdown
html: String 如果你想要使用HTML的形式去改变这个编辑器的内容的话使用这个属性
visible: Boolean 控制编辑器是否可见 默认 true
Edirot 事件:
load: 在编辑器加载时触发
chang: 当内容改变时触发
stateChange:当光标位置更改时触发
focus: 编辑器聚焦时触发
blur: 编辑器失焦时触发
踩坑点:我安装的是最新的toast-ui/vue-editor 3.2.2 在GitHub上得说明文档应该是以前老版本的
现在的话文档中的样式文件的路径有所改动 ,options配置项里的toolbarItems 属性里的元素数据类型
应该是引用类型Array 应该是把功能相似的放到了一起。就是这个文档让我在网上找了一个小时的文章,
最后还是自己解决的。
解决的思路:最后才想起看控制台,最后看控制台提示是......itme.map()........出错,
item应该是options里的每一个属性,map又是数据的迭代方法。所以就定位到了出错的地方,之后看到去掉
了options选项里的toolbarItems,删掉果然报错没了,但GitHub上得文档就是这么写的,之后自己去
node_modules文件里找到了最新版本的文档,解决了这个问题.
反思: 解决问题方式应该先自己看控制台报错根据提示的错误信息分析,而不是第一时间去上百度

 类似资料: