vue-quill-editor富文字外掛 · 解析網路.txt

vue外掛

• 用的是vue-quill-editor:

  github.com/surmon-chin…

npm install vue-quill-editor --save
複製程式碼

外掛用法

  <quill-editor
    ref="imgsTxtEditor"
    v-model="form.richText"
    :options="quillEditorOption"
    @change="onImgsTxtEditorChange($event)">
  </quill-editor>
複製程式碼

  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {quillEditor,Quill } from 'vue-quill-editor';
  
複製程式碼

   components: {quillEditor},
複製程式碼

form:{
    richText:'',
},
quillEditorOption: {
  modules: {
    toolbar: [
      // [{ 'size': ['small', false, 'large'] }],
      // ['bold', 'italic'],
      // [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      ['image']
    ],
    history: {
      delay: 1000,
      maxStack: 50,
      userOnly: false
    },
    // imageDrop: true,
    // imageResize: {
    //   displayStyles: {
    //     backgroundColor: 'black',
    //     border: 'none',
    //     color: 'white'
    //   },
    //   modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
    // }
  }
}, // 文字編輯器設定
複製程式碼

  onImgsTxtEditorChange({quill, html, text}) {
    this.form.richText = html;
    console.log(this.form.richText)
  },
複製程式碼

---

步驟

• 將富文字以字串的形式提交到後臺

• 後臺將富文字存入.txt檔案中

• 前端展示時接收後臺傳來的富文字連結richTextUrl：http://oss-....aliyuncs.com/......f6fe290fe5.txt

• 富文字連結的內容為:

  

• 前端解析.txt:

this.table.body.forEach(m => {
  if (m.richTextUrl) {
    $.ajax({
      url: m.richTextUrl,
      async: false,
      // xhrFields: {
      //   withCredentials: true // 攜帶跨域cookie
      // },
      success(res) {
        m.richText = res.substring(1, res.length - 1).replace(/\\"/g, '"');
      }
    });
  } else {
    m.richText = '';
  }
});
複製程式碼

其中：

• 去掉文字兩邊的雙引號：

m.richText = res.substring(1, res.length - 1);
複製程式碼

• 將\"改成"：

m.richText = m.richText.replace(/\\"/g, '"');
複製程式碼

完成