vue +element 实现富文本编辑器

最新推荐文章于 2024-06-12 08:00:00 发布

想要飞翔的pig

最新推荐文章于 2024-06-12 08:00:00 发布

阅读量585

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_53587375/article/details/117029953

版权

vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

富文本编辑器

官网地址: https://www.wangeditor.com/

html代码

<el-form-item label="正文">
        <div class="normal" id="contect_text">
        </div>
      </el-form-item>

js代码在mounted里编写

	  mounted() {

const editor = new E(".normal");
editor.config.showFullScreen = false;
editor.config.pasteIgnoreImg = true;
editor.config.uploadFileName = 'file';
editor.config.uploadImgServer = ' http://192.168.1.1/upload/LABFILE/PORTAL/PortalAnnexFile';

editor.config.excludeMenus = ["emoticon", "video", "todo"];

editor.config.onblur = function (newHtml) {
  console.log("onblur", newHtml.replace(/<[^>]+>/g, "").replace(/(&nbsp;)/g, "")); // 获取最新的 html 内容
};
var _this = this;
editor.config.onchange = function (newHtml) {
  // _this.fuwenben = newHtml.replace(/<[^>]+>/g, "").replace(/(&nbsp;)/g, "");
  _this.fuwenben = newHtml;

  console.log(
    "change 之后最新的 html",
    newHtml.replace(/<[^>]+>/g, "").replace(/(&nbsp;)/g, "")
  );
};

editor.create();

**//到此结束**

 if (sessionStorage.getItem("edit_key") == null) {
      this.edit_list;
    }
     else {
      this.edit_list = JSON.parse(sessionStorage.getItem("edit_key"));
      console.log(this.edit_list);
      
      this.ruleForm.headline = this.edit_list.title
      this.ruleForm.author = this.edit_list.author
      
      // 点击编辑把数据带过来让用户编辑
      editor.txt.html(this.edit_list.sourceText) 
      
      this.imageUrl = this.edit_list.photoByteStream
      this.ruleForm.value = this.edit_list.noticeType
    }
     
  },

在这里插入图片描述

渲染问题

//标签也渲染v-text
<p @click="newwindow(item)" v-text="item.content">
        </p>
    /解析标签v-html

js

 // 拿到后端数据遍历
 res.data.root.forEach(function(e) {
 //下边重新赋一个变量备份一份
           e.sourceText = e.content
           //去掉标签和空格的正则
          e.content = e.content.replace(/<[^>]+>/g, "").replace(/(&nbsp;)/g, "")
          //this.$set 引起视图更新
          e = Object.assign([], e)
           console.log(e)
        })

增加一个小知识文字超过两行或三行就显示省略号

<div class="p1>  增加一个小知识文字超过两行或三行就显示省略号    </div>
.p1{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    }