1. 程式人生 > 其它 >elementui 之富文字編輯器vue-quill-editor 清空html 標籤

elementui 之富文字編輯器vue-quill-editor 清空html 標籤

技術標籤:vue

問題描述:富文字編輯器vue-quill-editor 點選內容提交,發現提交的內容都攜帶html 標籤(<p>富文字編輯內容</p>)。目的:清空提交內容的html 標籤

解決思路: 定義一個方法:採用正則表示式的方式,將所有html 內容進行替換。

method 定義:

  // 移除文字內容中的HTML 標籤
        delHtmlTag(str) {
          return str.replace(/<[^>]+>/g,"");
        },

在表單提交時,呼叫上述定義的方法:

 // 新增通知
        add(){
            // 請求html 標籤方法呼叫
            this.notice.content = this.delHtmlTag(this.notice.content)
            this.$axios({
            method:'post',
            url:'/api/notice/insert',
            data:{'title': this.notice.title, 'content':this.notice.content, 'adminId': '1'},
            headers:{
                'Content-Type':'application/json;charset=utf-8'      //改這裡就好了
            }
        }).then(res => {
          this.$message.success('新增成功')
          this.dialogFormAdd = false
          this.init()
        })
          .catch(function (error) {
            console.log(error)
          })
        },

效果展示: