Vue富文本

Vue富文本

1.wangEditor

感觉不是很美观，但是基本功能还是有的

官网：http://www.wangeditor.com/index.html

1.1如果使用了脚手架，安装了node,下载该插件

npm i wangeditor -S

1.2在页面引用,直接上代码了

<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left;"></div>
    <el-button @click="handleConsole">尝试</el-button>
     <div v-html="editorContent"></div>
  </div>
</template>

<script>
import E from "wangeditor";
export default {
  name: '',

   data() {
    return {
      editor: null,
      editorContent: ''
    };
  },
  
 
  methods: {
      
        handleConsole:function(){
          console.log(this.editorContent)
      }

  },
  mounted(){
     this.editor = new E(this.$refs.editorElem);
    // 编辑器的事件，每次改变会获取其html内容
      this.editor.customConfig.onchange = html => {
      this.editorContent = html;
     
    };  
    this.editor.customConfig.menus = [
      // 菜单配置
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'code', // 插入代码
      'undo', // 撤销
      'redo' // 重复
    ];
    this.editor.customConfig.uploadImgShowBase64 = true// 使用 base64 保存图片
    // this.editor.customConfig.uploadImgServer = '/upload' 这是上传图片到服务器
    this.editor.create(); // 创建富文本实例  
    },
}
</script>

<style scoped>

</style>

效果图

1.3如果没有用脚手架

<div id="editor"></div>
 <script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
   <script type="text/javascript">
      var E = window.wangEditor
      var editor = new E('#editor')
  // 或者 var editor = new E( document.getElementById('editor') )
  editor.create()
</script>