富文本上傳七牛，如何把html轉換爲json

富文本

vue-quill-editor

須要下載vue-quill-editor模塊，引入css和js
  npm i vue-quill-editor
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  import {quillEditor} from "vue-quill-editor";
  
   <quill-editor
              v-model="detailContent"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)"
            ></quill-editor>
            //綁定的富文本內容
            
    <el-upload
            class="avatar-uploader"
            :action="serverUrl"
            name="img"
            :headers="header"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload"
          ></el-upload>
          //elmentui 的插件
         /由於input file類型的特殊緣由這裏用elmentui 的插件來喚起上傳圖片 在beforeUpload鉤子函數裏傳遞file
         
     
    
複製代碼

###上傳回調

beforeUpload(e) {
             this.fileChanges(e);
        }
複製代碼

上傳七牛代碼

//qiniu 此對象須要 <script src="https://unpkg.com/qiniu-js@2.5.3/dist/qiniu.min.js"></script> 引入七牛

 fileChanges(e) {
      var _t = this;
      let url = 'uploadxxx'
        var ext = e.type.split("/")[1];
        var formData = new FormData();
        formData.append("ext", ext);
        $.ajax({
          type: "get",
          async: false,
          url: url,
          data: {
            ext: ext,
          },
          dataType: "json",
          xhrFields: {
            withCredentials: true
          },
          success: function(data) {
            if (data.code === 0) {
              var config = {
                useCdnDomain: true,
                region: qiniu.region.z1
              };

              var observable = qiniu.upload(
                e,
                data.info.keys[0],
                data.info.token,
                null,
                config
              );
              _t.subscription = observable.subscribe({
                next(res) {},
                error(err) {
                  // ...
                },
                complete(res) {
                  // ...
                  let quill = _t.editor;
                  // 若是上傳成功

                  // 獲取光標所在位置
                  let length = quill.getSelection().index;
                  // 插入圖片  res.info爲服務器返回的圖片地址
                  let str = quill.insertEmbed(
                    length,
                    "image",
                    data.info.bucketUrl + data.info.keys
                  );
                  // 調整光標到最後
                  quill.setSelection(length + 1);

                }
              });
            
            }
          },
          error: function(e) {
          }
        });
    
    }
    
複製代碼

數據格式整理

上傳完了富文本結構多是這樣，圖片地址顯示base64 是預覽，等到上傳完成返回就會替換成服務器地址，由於最近接口有問題，因此顯示的地址有問題，能夠忽略。 這時候移動端沒有富文本，移動端和pc都要顯示這段內容，這時候就要統一格式了。要把上面的html解構轉換爲json格式，這裏就要用到html2json了，他能夠吧dom節點轉換爲父子級節點的json，使用起來很方便，若是本身去轉換會有不少問題。至於轉換的原理我想應該是遞歸查詢節點，在生成樹結構。沒有認真去看碼哈哈。

移動端須要的格式
newsRichText: "[{"state":"textasdasd"},{"state":"imaghttps://post-static.maimaicc.com/post-static/2019-05-16/1570005744/WXLrk0c-0.jpeg"}]"
複製代碼

轉碼列子

npm install html2json
var html2json = require('html2json').html2json;
var json2html = require('html2json').json2html;
API
json === html2json(document.body.innerHTML);
html === json2html(json);

console.assert(json === html);
複製代碼

html

<div id="1" class="foo">
<h2>sample text with <code>inline tag</code></h2>
<pre id="demo" class="foo bar">foo</pre>
<pre id="output" class="goo">goo</pre>
<input id="execute" type="button" value="execute"/>
</div>
複製代碼

json

{
  node: 'root',
  child: [
    {
      node: 'element',
      tag: 'div',
      attr: { id: '1', class: 'foo' },
      child: [
        {
          node: 'element',
          tag: 'h2',
          child: [
            { node: 'text', text: 'sample text with ' },
            { node: 'element', tag: 'code', child: [{ node: 'text', text: 'inline tag' }] }
          ]
        },
        {
          node: 'element',
          tag: 'pre',
          attr: { id: 'demo', class: ['foo', 'bar'] },
          child: [{ node: 'text', text: 'foo' }]
        },
        {
          node: 'element',
          tag: 'pre',
          attr: { id: 'output', class: 'goo' },
          child: [{ node: 'text', text: 'goo' }]
        },
        {
          node: 'element',
          tag: 'input',
          attr: { id: 'execute', type: 'button', value: 'execute' }
        }
      ]
    }
  ]
}
複製代碼

轉換

//對插件生成的數據進行處理，處理成本身想要的格式  "[{"state":"textasdasd"},{"state":"imaghttps://xxxx.jpeg"}]"
 release(types, bol = true) {
      let json = html2json(this.detailContent);
      let arr = [];
      for (let i of json.child) {
        for (let j of i.child) {
          if (j.node == "text") {
            let obj = {};
            let tex = "text" + j.text;
            obj.state = tex;
            arr.push(obj);
          } else if (j.tag == "img") {
            let obj = {};
            let tex = "imag" + j.attr.src;
            obj.state = tex;
            arr.push(obj);
          }
        }
      }
複製代碼

var html2json = require("html2json").html2json;
複製代碼

這樣就完成了用elmentui在富文本中上傳圖片，而且將富文本轉換爲移動端可顯示的內容，理論上後臺應該保存兩份格式的代碼，一份是轉換後的用於移動端讀取，一份用來pc端顯示，這樣才能保證富文本的格式不變，樣式不會出問題。因此須要兩個字段，一個用於pc端讀取，一個用於移動端讀取。 感受都是很棒的插件省了不少力氣，尤爲是這個富文本組件和轉換格式插件，都很棒用起來，富文本是我用過最簡單省力的富文本編輯器，強烈推薦。