在vue2.0脚手架中使用富文本wangEditor富文本编辑器

有好多都不靠谱的   

这是官方的

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。

官网：www.wangEditor.com

文档：www.wangeditor.com/doc

源码：github.com/wangeditor-team/wangEditor 

npm 安装 npm i wangeditor --save

安装后在vue主文件中先添加id为div1的div然后加上ref提交的时候可以获取到值

然后在js中先import 引入wangeditor

import E from 'wangeditor';

在vue生命周期mounted的时候 获取dom元素  然后还可以改变富文本内部的值 也可以不用

  mounted() {

    this.editor = new E('#div1');

    this.editor.create();

    // 改变富文本内部的值

    this.editor.txt.html("415123123")

    // 获取符文本内部的值

    console.log(this.editor.txt.html);

  },

然后我通过ref可以随时获取到内部的值

 methods:{

    onload(){

      console.log(this.editor.txt.html());

    }

  }

最后整个代码如下：

<template>

  <div id="app">

    <img alt="Vue logo" src="./assets/logo.png">

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

    <button @click="onload">提交</button>

  </div>

</template>

<script>

import E from 'wangeditor';

export default {

  name: 'App',

  components: {

  },

  data(){

     return {

        data:"",

        isClear: false,

        detail:"",

        editor:""

        }

  },

  mounted() {

    this.editor = new E('#div1');

    this.editor.create();

    // 改变富文本内部的值

    this.editor.txt.html("415123123")

    // 获取符文本内部的值

    console.log(this.editor.txt.html);

  },

  methods:{

    onload(){

      console.log(this.editor.txt.html());

    }

  }

}

</script>

<style lang="scss" scoped>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

  img{

    width: 100px;

    height: 100px;

  }

}

</style>