vue下本身開發富文本編輯器（一）帶你從入門到放棄

時間 2019-11-24

標籤 vue 本身開發文本編輯器入門放棄简体版

原文原文鏈接

title: vue下本身開發富文本編輯器（一）帶你從入門到放棄 date: 2019-07-16 11:47:56 tags: CSDN遷移

前言：

首先，我這個文章不會寫很是詳細的代碼，可是我會把我目前博客開發的富文本編輯遇到的問題羅列出來。而後一點點的說明如何解決。說實在目前遇到的問題，已經想讓我放棄本身開發富文本了，真的是非誠勿擾。這個坑沒那麼簡單。（捂臉哭）前端

開發環境：vueCli3.Xvue

1、HTML5的富文本

contentEditable="true"
複製代碼

這個屬性我不介紹了，不懂得本身百度node

2、編寫頁面遇到的坑（點擊事件失去焦點）

網上大多數富文本編輯器都是iframe,不少成熟的富文本編輯器也是用的iframe。我我的不知道好壞，因此我直接用的div。也許後期會遇到沒法解決的坑再換吧。git

我不知道是否是我不是用的iframe的問題，可是每當我須要操做文字加粗都失敗，緣由在於失去選區。github

解決：a標籤和img標籤不會失去選區，改代碼。後端

上我的代碼：bash

<div class="dht-editor-operation">
      <template v-for="(item, index) in operationList">
        <a :key="index" @click="item.event" :title="item.title">
          <img :src="item.iconUrl" :style="item.backgroundImg" alt="" />
        </a>
      </template>
    </div>
複製代碼

3、個人文字不會加粗

我其實第一個寫的功能是顏色選擇器，沒寫很複雜就是用input的color屬性app

第二功能是文字加粗。可是不會加粗。最後檢查得知是由於，我本身有一個全局存在的樣式重置代碼。我把b標籤的默認樣式去除了。框架

到這個時候我都仍是用的富文本本身的操做函數

document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
複製代碼

文檔地址：developer.mozilla.org/zh-CN/docs/…

這裏開始就踩坑很嚴重了。由於樣式重置，我考慮到若是別人用個人東西，那麼也會這樣，那就是說我得避免這個狀況。因此我選擇了另外一條路，本身實現這些功能。固然不可能全部都本身實現，那就太累了，我也不是寫產品，給本身用的。

解決方式

使用： window.getSelection()和 Range()

參考教程：www.jianshu.com/p/5997a90aa…

MDN文檔：developer.mozilla.org/zh-CN/docs/…

這裏文檔得好好看看，否則我下面的代碼你看不懂。

第一次解決方式

我用的代碼是這樣的（不要在乎我這裏是改顏色，原理懂了就行）

代碼來自這篇博客：www.cnblogs.com/wyjs/articl…

我我的一開始就是按這位的博客來寫的，很詳細

var selection = document.getSelection();
//取得選擇的文本
var selectionText = selection.toString();
//取得表明選區的範圍
var range = selection.getRangeAt(0);
//突出顯示選擇的文本
var span = document.createElement("span");
span.style.backgroundColor = "yellow";
range.surroundContents(span);

這種方式用的是range.surroundContents，意思是將你選中的文檔放在一個新的標籤中。

可是問題很嚴重

缺點：

一、無限的加入標籤中，會無限嵌套html元素（本身開發中看f12就懂了）

二、沒法跨元素操做

好比這樣的，這種選擇是不能成功的，報錯。由於他沒法操做多個dom元素。

這時候已經巨坑了好吧。我本來覺得就和別人說的同樣，好簡單。你要是不考慮那麼多操做，不當初編輯器來操做確實簡單啊。

第二種解決方式（目前我測試沒什麼問題）

原理在於先刪後插，須要須要各位理解range選區（拖藍部分的代碼意思，仔細看文檔咯）

這裏仍是會產生無限嵌套問題，我再找找方式，可是解決了跨元素選擇問題

代碼：

CursorAcquisition() {
      let selection = window.getSelection();
      let range = selection.getRangeAt(0);
      return {
        selection,
        range
      };
    },
複製代碼

//取得表明選區的範圍
      let range = this.CursorAcquisition().range;
      //突出顯示選擇的文本
      //let rangeClone = range.cloneRange();
      //得到選中區域dom袁術
      let rangeText = range.extractContents();
      //建立新的dom而且結合
      let span = document.createElement("span");
      span.appendChild(rangeText);
      span.style.color = "red";
      //先移除選中節點
      range.deleteContents();
      //再插入節點
      range.insertNode(span);
複製代碼

這個代碼就能實現上述全部產生的問題。至少我暫時這麼認爲，大神則請指出。

好了第一篇踩坑到此結束，各位請先品嚐。後面我還會寫下一篇。由於下一個坑我已經踩完了。心累。不寫博客我都不知道哪裏去發泄。網上的教程即好又缺斤少兩，少關鍵啊。

最後附上，個人顏色選擇器，不須要添加html元素。可是須要支持input color

//顏色選擇器
    colorSelect() {
      let input = document.createElement("input");
      let that = this;
      input.type = "color";
      input.click();
      input.addEventListener("input", watchColorPicker, false);
      function watchColorPicker(event) {
        //console.log(event.target.value);
        let color = event.target.value;
        that.operationList[0].backgroundImg = {
          background: color
        };
        //移除監聽
        input.removeEventListener("input", watchColorPicker, false);
        input = "";
      }
    }
複製代碼