wangeditor
一、简单用法
首先:npm install wangeditor --save
<div id="richText" style="height: 400px;background-color: #fff;" ></div>
import { ref, onMounted } from 'vue'
import E from 'wangeditor'
const phoneEditor = ref('')
onMounted(() => {
phoneEditor.value = new E('#richText')
// 上传图片到服务器,base64形式
phoneEditor.value.config.uploadImgShowBase64 = true
// 隐藏网络图片
phoneEditor.value.config.showLinkImg = false
// 创建一个富文本编辑器
phoneEditor.value.create()
// 富文本内容
phoneEditor.value.txt.html()
})
二、官网使用步骤
安装
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save
<template>
<div style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
components: { Editor, Toolbar },
setup () {
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('<p>hello</p>')
// 模拟 ajax 异步获取内容
onMounted(() => {
setTimeout(() => {
valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
}, 1500)
})
const toolbarConfig = { }
const editorConfig = { placeholder: '请输入内容...' }
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例,重要!
}
return {
editorRef,
valueHtml,
mode: 'default',
toolbarConfig,
editorConfig,
handleCreated
}
}
}
</script>
注意:如果需要自定义工具栏的配置,可以在toolbarConfig里面写入。如果想要添加指定菜单,使用toolbarKeys,如果需要排除某一些菜单,使用excludeKeys即可。如:
const toolbarConfig = {
toolbarKeys: [
'bold', // 加粗
'italic', // 斜体
'through', // 删除线
'underline', // 下划线
'bulletedList', // 无序列表
'numberedList', // 有序列表
'color', // 文字颜色
'insertLink', // 插入链接
'fontSize', // 字体大小
'lineHeight', // 行高
'uploadImage', // 上传图片
'delIndent', // 缩进
'indent', // 增进
'deleteImage',//删除图片
'divider', // 分割线
'insertImage', // 网络图片
'insertTable', // 插入表格
'justifyCenter', // 居中对齐
'justifyJustify', // 两端对齐
'justifyLeft', // 左对齐
'justifyRight', // 右对齐
'undo', // 撤销
'redo', // 重做
'clearStyle', // 清除格式
'fullScreen' // 全屏
]
}
const toolbarConfig = {
excludeKeys: [
'bgColor', // 背景色
'blockquote', // 引用
'codeBlock', // 代码段
'emotion', // 表情
'fontFamily', // 字体
'headerSelect' // 标题
]
}
传送门:wangEditor
更多推荐
vue3 富文本编辑器
发布评论