wangeditor富文本框

wangeditor富文本框

1.参考网址

2.简单使用

2.1创建数据库

2.2安装并引入wangeditor

安装·： npm i wangeditor --save

引入： import E from 'wangeditor'

2.3创建容器

<div id="div1"></div>

2.4控制显示文本框

add(){
                this.dialogVisible = true
                this.form={}
                this.$nextTick(()=>{
                    /*弹出富文本框*/
                    editor = new E('#div1')
                    editor.create()
                });
            },

2.5获取富文本框内容

点击编辑，或者是保存，必须先获取富文本框的内容，然后保存到data，最后提交到后端

editor.txt.html()

2.6显示保存到后端的富文本框内容渲染到页面

1.先定义一个方法：

2.定义一个弹窗

  <!--  查看详情的弹窗      -->
        <el-dialog title="详情" :visible.sync="vis" width="50%"><!--vis为弹窗的状态-->
            <el-card>
                <div v-html="datails.content" style="min-height: 100px"></div>
            </el-card>
        </el-dialog>

3.定义富文本框的内容和弹窗的状态与data中

datails:{},//后端查询的富文本框的内容
vis:false,//展示富文本框的内容的弹窗的状态

2.6点击详情，弹出框，并显示详情内容

 /*给详情按钮绑定的点击事件*/
            details(row){
                this.datails=row//将查询的数据（row）付给datails
                this.vis=true//显示文本框
            },

2.7编辑

  this.$nextTick(()=>{
                    if(!editor){//判断是否已经编辑过（判断是否创建过富文本框）
                        editor = new E('#div1')//获取容器的位置
                        editor.create()//创建富文本框
                    }
                    /*弹出富文本框*/
                    editor.txt.html(row.content)//编辑内容
                });

2.8点击确定再次获取富文本框中修改过得文本提交即可