|
|
@@ -0,0 +1,129 @@
|
|
|
+<template lang="html">
|
|
|
+ <div class="editor" style="min-width:700px; padding-right:10px">
|
|
|
+ <div ref="toolbar" class="toolbar">
|
|
|
+ </div>
|
|
|
+ <div ref="editor" class="wtext">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import E from 'wangeditor'
|
|
|
+export default {
|
|
|
+ name: 'WangEditor',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ editor: null,
|
|
|
+ info_: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ model: {
|
|
|
+ prop: 'value',
|
|
|
+ event: 'change'
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ isClear: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isClear (val) {
|
|
|
+ // 触发清除文本域内容
|
|
|
+ if (val) {
|
|
|
+ this.editor.txt.clear()
|
|
|
+ this.info_ = null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.seteditor()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clear () {
|
|
|
+ this.editor.txt.clear()
|
|
|
+ },
|
|
|
+ init (val) {
|
|
|
+ // 使用 v-model 时，设置初始值
|
|
|
+ this.editor.txt.html(val)
|
|
|
+ },
|
|
|
+ seteditor () {
|
|
|
+ this.editor = new E(this.$refs.toolbar, this.$refs.editor)
|
|
|
+ this.editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片
|
|
|
+ this.editor.customConfig.uploadImgServer = ''// 配置服务器端地址
|
|
|
+ this.editor.customConfig.uploadImgHeaders = { }// 自定义 header
|
|
|
+ this.editor.customConfig.uploadFileName = '' // 后端接受上传文件的参数名
|
|
|
+ this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
|
|
|
+ this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片
|
|
|
+ this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
|
|
|
+ this.editor.customConfig.menus = [
|
|
|
+ // 'head', // 标题
|
|
|
+ // 'bold', // 粗体
|
|
|
+ // 'fontSize', // 字号
|
|
|
+ // 'fontName', // 字体
|
|
|
+ // 'italic', // 斜体
|
|
|
+ // 'underline', // 下划线
|
|
|
+ // 'strikeThrough', // 删除线
|
|
|
+ // 'foreColor', // 文字颜色
|
|
|
+ // 'backColor', // 背景颜色
|
|
|
+ // 'link', // 插入链接
|
|
|
+ // 'list', // 列表
|
|
|
+ // 'justify', // 对齐方式
|
|
|
+ // 'quote', // 引用
|
|
|
+ // 'emoticon', // 表情
|
|
|
+ // 'image', // 插入图片
|
|
|
+ // 'table', // 表格
|
|
|
+ // 'video', // 插入视频
|
|
|
+ // 'code', // 插入代码
|
|
|
+ // 'undo', // 撤销
|
|
|
+ // 'redo' // 重复
|
|
|
+ ]
|
|
|
+ this.editor.customConfig.uploadImgHooks = {
|
|
|
+ fail: (xhr, editor, result) => {
|
|
|
+ // 插入图片失败回调
|
|
|
+ },
|
|
|
+ success: (xhr, editor, result) => {
|
|
|
+ // 图片上传成功回调
|
|
|
+ },
|
|
|
+ timeout: (xhr, editor) => {
|
|
|
+ // 网络超时的回调
|
|
|
+ },
|
|
|
+ error: (xhr, editor) => {
|
|
|
+ // 图片上传错误的回调
|
|
|
+ },
|
|
|
+ customInsert: (insertImg, result, editor) => {
|
|
|
+ // 图片上传成功，插入图片的回调
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.editor.customConfig.onchange = (html) => {
|
|
|
+ this.info_ = html // 绑定当前逐渐地值
|
|
|
+ this.$emit('change', this.info_) // 将内容同步到父组件中
|
|
|
+ }
|
|
|
+ // 创建富文本编辑器
|
|
|
+ this.editor.create()
|
|
|
+ },
|
|
|
+ disable () {
|
|
|
+ // 禁用编辑功能
|
|
|
+ this.editor.$textElem.attr('contenteditable', false)
|
|
|
+ },
|
|
|
+ enable () {
|
|
|
+ // 开启编辑功能
|
|
|
+ this.editor.$textElem.attr('contenteditable', true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="css">
|
|
|
+.editor {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.toolbar {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+}
|
|
|
+.wtext {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ height: 500px;
|
|
|
+}
|
|
|
+</style>
|
lizhenhao