iview-admin中使用wangEditor（二）

本文针对的是iview-admin中使用wangEditor，iview-admin中已经有封装好的wangEditor组件，

只需要调用即可（仅为自己做记录）。

1.HTML代码

<FormItem label="详情:" prop="content" >
    <editor ref="myEditor" v-model="formValidate.content" @send="send" ></editor >
</FormItem >

//@send 是动态获取输入内容，更新到formValidate.content中。

2.JS代码

<script >
//引用文件
import Editor from '@/components/editor/editor.vue'

    export default {
        components: {
            Editor
    },


    watch: {
        rowData (val) {
          // 如果是编辑功能，数据库读取的内容赋值给文本编辑器
          // escape2Html 是因为我读取出来的数据文本编辑器无法解析HTML标签，我只能用这个方法转换
          // 如果有大神知道在哪里设置，请给我留言
          this.$nextTick(() => {
            this.$refs.myEditor.editor.txt.html(escape2Html(val.content))
          })
        }
    },

    methods: {
        send (val) {
          // 输出 @send  你就可以知道你写进去的内容有没有生效
          // console.log(val)
          // console.log(this.$refs.myEditor.editor);
        },
    }
}


// 这个方法是解析 HTML 标签的,我是编辑功能，数据库读取的数据 是html标签，没有转成html样式

function escape2Html (str) {
  var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
  return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {return arrEntities[t];});
}

3.参考链接

-参考链接-