Vue使用富文本编辑器_ie vue富文本

最新推荐文章于 2024-07-31 10:06:40 发布

2301_82243626

最新推荐文章于 2024-07-31 10:06:40 发布

阅读量158

点赞数 2

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_82243626/article/details/138309278

版权

这篇博客介绍了如何在Vue.js项目中使用wangEditor这个轻量级的Web富文本编辑器，提供了前端Vue.js的实例代码。

摘要由CSDN通过智能技术生成

个人推荐wangEditor，官网wangEditor - 轻量级web富文本编辑器

二：实例代码

前端vue

html:
<div class="ArticleDetail">
  <div ref="editor" style="text-align:left"></div>
</div>

js:

<script>
  import axios from 'axios';
  import {Loading} from 'element-ui'
  import E from 'wangeditor'
  var editor;

  export default {
    name: "WriteArticle",
    data: function () {
      return {
        Title:'',
        Content:''
      }
    },
    mounted:function(){
      var That = this;
      editor = new E(this.$refs.editor);
      editor.customConfig = {
        onchange:function(html){
          That.Content = html
        },
        uploadImgServer: '/api/UploadImg', // 上传图片到服务器
        uploadFileName : 'Content', //后端使用这个字段获取图片信息
        uploadImgMaxLength : 1 , // 限制一次最多上传 1