目录
1、富文本wangeditor
官网:http://www.wangeditor.com/
2、安装依赖
根据自己使用镜像情况,用npm 或cnpm进行安装。
npm install wangeditor/editor
npm install wangeditor/editor-for-vue
安装后,package.json出现此依赖。
3、 封装组件
在项目组件路径下封装富文本组件components/wangeditor/index.vue ,方便其他页面引用。
<template lang="html">
<div >
<div ref="editor" style="height: 410px">
</div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'wang-editor',
data() {
return {
editor: null,
info_: null,
// 配置富文本编辑器的菜单栏
menu: [
'undo', // 撤销
'redo', // 重复
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'indent', // 缩进
'lineHeight', // 行高
'foreColor', // 文字颜色
//'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'todo', // 待办
'justify', // 对齐方式
'quote', // 引用
// 'emoticon', // 表情
'image', // 插入图片
// 'video', // 视频
'table', // 表格
'code', // 插入代码
'splitLine' // 分割线
]
}
},
model: {
prop: 'value', // v-model 接收的值=props的message属性接收的值
event: 'change' // v-model 发生变化时触发的方法
},
props: {
value: { // 富文本数据
type: String,
default: ''
},
isClear: {
type: Boolean,
default: false
},
placeholder: { // placeholder 提示文字
type: String,
default: '请输入...'
}
},
watch: {
isClear(val) {
// 触发清除文本域内容
if (val) {
this.editor.txt.clear()
this.info_ = null
}
},
value: function (value) {
// 如果值不相等再进行赋值,避免多次赋值造成闪烁
if (value !== this.editor.txt.html()) {
this.editor.txt.html(this.value)
}
}
// value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值
},
created() {
},
mounted() {
this.seteditor()
// 使用 editor.txt.html() 获取 html 。
this.editor.txt.html(this.value)
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时,及时销毁编辑器
},
methods: {
seteditor() {
// 创建编辑器
this.editor = new E(this.$refs.editor)
this.editor.config.uploadImgShowBase64 = true // 使用 base64 格式保存图片。即,可选择本地图片,编辑器用 base64 格式显示图片。
this.editor.config.uploadImgMaxSize = 1 * 1024 * 1024 // 将图片大小限制为 1MB
this.editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 1 张图片
// 自定义 onchange 触发的延迟时间,默认为 200 ms
this.editor.config.onchangeTimeout = 1000 // 单位 ms
this.editor.config.menus = this.menu // 自定义菜单
this.editor.config.placeholder = this.placeholder // placeholder 提示文字
this.editor.config.onchange = (html) => {
this.info_ = html // 绑定当前逐渐地值
this.$emit('change', this.info_) // 将内容同步到父组件中
}
// 创建富文本编辑器
this.editor.create()
}
}
}
</script>
<style >
.editor {
width: 100%;
height: 410px;
margin: auto;
}
</style>
4、使用组件
主页面引用步骤3组件
使用组件
<!--新增表单-->
<el-dialog :title="titleName" center :visible.sync="dialogVisible" width="65%" top="10px">
<el-form style="height: 550px" :model="addData" label-width="80px" :rules="rules3" ref="addData">
<el-form-item label="名称:" prop="name">
<el-input v-model="addData.name"></el-input>
</el-form-item>
<el-form-item label="内容:" :required="true">
<wang-editor v-model="addData.content" @change="changeText">
</wang-editor>
</el-form-item>
</el-form>
<div align="center" style="margin-top: 30px">
<el-button @click="dialogVisible=false;addData.content ='';addData.name ='';addData.remark ='';">取消</el-button>
<el-button v-if="titleName=='新增'" type="primary" @click="insertData('addData','1')">确定</el-button>
<el-button v-if="titleName=='编辑'" type="primary" @click="insertData('addData','2')">确定</el-button>
</div>
</el-dialog>
名称、内容变量定义:
addData: { id:'', name: '', content: '', submitPerson:'', remark:'' },
例如上面代码逻辑是,点击新增弹出富文本编辑弹框,效果如下:
可进行富文本内容编写,编辑和新增一样页面逻辑,不做赘述。
5、详情展示
5.1 富文本只读展示
此方式会按照之前格式展示效果,通过属性设置成只读模式,对于表格效果很好。
<el-dialog title="详情" center :visible.sync="dialogVisible2" width="65%" top="10px">
<el-form :model="addData2" label-width="80px">
<el-form-item label="名称:">
<el-input :disabled="true" v-model="addData2.name"></el-input>
</el-form-item>
<el-form-item label="内容:">
<wang-editor class="readOnlyEditor" v-model="addData2.content"></wang-editor>
</el-form-item>
</el-form>
<div class="dialog-footer" align="center" style="margin-top: 5px">
<el-button type="primary" @click="dialogVisible2=false">关闭</el-button>
</div>
</el-dialog>
<style scoped>
.readOnlyEditor {
pointer-events: none; /* 阻止鼠标事件 */
}
</style>
5.2 只做内容展示
此方式适合文字描述类文本,对于表格效果不是很好,具体使用哪种看需求。
<el-dialog title="详情" center :visible.sync="dialogVisible2" width="65%" top="10px">
<el-form :model="addData2" label-width="80px">
<el-form-item label="名称:">
<el-input :disabled="true" v-model="addData2.name"></el-input>
</el-form-item>
<el-form-item label="内容:">
<div style="max-height:1500px;min-height: 500px;overflow-y:auto;font-size: 16px !important;font-weight: normal!important;"
v-html="addData2.content">
</div>
</el-form-item>
</el-form>
<div class="dialog-footer" align="center" style="margin-top: 5px">
<el-button type="primary" @click="dialogVisible2=false">关闭</el-button>
</div>
</el-dialog>
5.3 数据表
数据字段类型为text就可以。
`file_content` text COMMENT ' 文件内容',