富文本编辑器新增特殊字符插入功能

src/components/vEditor/components/SpecharDialog.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-dialog
+    class="spechar-dialog"
+    :visible.sync="modalIsShow"
+    title="特殊字符"
+    top="10vh"
+    width="700px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+  >
+    <el-tabs tab-position="left">
+      <el-tab-pane v-for="item in speChars" :key="item.name" :label="item.name">
+        <ul class="sepchar-list">
+          <li
+            v-for="(char, index) in item.chars"
+            :key="index"
+            :class="{ 'is-active': selectChar === char }"
+            @click.stop="toSelect(char)"
+          >
+            <span>{{ char }}</span>
+          </li>
+        </ul>
+      </el-tab-pane>
+    </el-tabs>
+
+    <div slot="footer">
+      <el-button type="primary" @click="submit">确认</el-button>
+      <el-button type="danger" plain @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import speChars from "./speChars.json";
+
+export default {
+  name: "SpecharDialog",
+  data() {
+    return {
+      modalIsShow: false,
+      selectChar: "",
+      tabPosition: "",
+      speChars,
+    };
+  },
+  methods: {
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    toSelect(char) {
+      this.selectChar = char;
+    },
+    submit() {
+      this.$emit("confirm", this.selectChar);
+      this.cancel();
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.sepchar-list {
+  font-size: 0;
+  li {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+    width: 32px;
+    height: 32px;
+    padding: 5px;
+    line-height: 20px;
+    border: 1px solid #f0f2f6;
+    margin: 5px;
+    text-align: center;
+    cursor: pointer;
+
+    > span {
+      display: inline-block;
+      transition: transform 0.1s linear;
+    }
+
+    &:hover {
+      border-color: #705eff;
+      span {
+        transform: scale(1.3, 1.3);
+      }
+    }
+
+    &.is-active {
+      border-color: #705eff;
+      color: #705eff;
+    }
+  }
+}
+</style>

src/components/vEditor/components/VMenu.vue

@@ -63,6 +63,14 @@
         @change="addImage"
       />
     </div>
+    <div class="edit-menu-item">
+      <img
+        class="intLink"
+        title="特殊字符"
+        src="../../img/menu_spechar.png"
+        @mousedown="addSpechar"
+      />
+    </div>
     <div v-if="$parent.enableAudio" class="edit-menu-item">
       <img
         class="intLink"
@@ -99,6 +107,11 @@
       ref="FormulaDialog"
       @confirm="formulaConfirm"
     ></formula-dialog>
+    <!-- SpecharDialog -->
+    <spechar-dialog
+      ref="SpecharDialog"
+      @confirm="specharConfirm"
+    ></spechar-dialog>
   </div>
 </template>
 
@@ -108,10 +121,11 @@ import { audioHandle } from "./audio";
 import { imageHandle } from "./image";
 import { answerPointHandle } from "./answerPoint";
 import FormulaDialog from "./FormulaDialog";
+import SpecharDialog from "./SpecharDialog";
 
 export default {
   name: "VMenu",
-  components: { FormulaDialog },
+  components: { FormulaDialog, SpecharDialog },
   data() {
     return {
       curEditFocusRange: null,
@@ -174,6 +188,28 @@ export default {
       const selection = window.getSelection();
       return selection.focusNode && this.checkDomInEditor(selection.focusNode);
     },
+    // spechar
+    addSpechar(event) {
+      event.preventDefault();
+      if (!this.checkEditorFocus()) {
+        window.getSelection().removeAllRanges();
+        this.editorFocus();
+      }
+      this.curEditFocusRange = window.getSelection().getRangeAt(0);
+      this.$refs.SpecharDialog.open();
+    },
+    specharConfirm(result) {
+      console.log(result);
+      if (!this.curEditFocusRange) {
+        const selection = window.getSelection();
+        this.curEditFocusRange = selection.getRangeAt(0);
+      }
+      this.curEditFocusRange.deleteContents();
+      this.curEditFocusRange.insertNode(document.createTextNode(result));
+      this.curEditFocusRange.collapse();
+      this.$parent.emitJSON();
+    },
+    // formula
     /**
      * @param {Event} event
      */

src/components/vEditor/components/speChars.json

@@ -0,0 +1,748 @@
+[
+  {
+    "name": "符号图案",
+    "chars": [
+      "Ю",
+      "〓",
+      "§",
+      "♤",
+      "⊱",
+      "⋛",
+      "⋌",
+      "⋚",
+      "⊰",
+      "⊹",
+      "≈",
+      "۞",
+      "۩",
+      "๑",
+      "✲",
+      "❈",
+      "➹",
+      "~",
+      "-",
+      "【",
+      "】",
+      "┱",
+      "┲",
+      "❣",
+      "✚",
+      "✪",
+      "✣",
+      "✤",
+      "✥",
+      "✦",
+      "❉",
+      "❥",
+      "❦",
+      "❧",
+      "❃",
+      "❂",
+      "❁",
+      "❀",
+      "☭",
+      "ღ",
+      "▷",
+      "◀",
+      "◁",
+      "☁",
+      "☂",
+      "☃",
+      "☄",
+      "☇",
+      "☈",
+      "☊",
+      "☋",
+      "☌",
+      "☍",
+      "ⓛ",
+      "ⓞ",
+      "ⓥ",
+      "ⓔ",
+      "╬",
+      "『",
+      "』",
+      "∴",
+      "☀",
+      ".",
+      "∷",
+      "﹌",
+      "▶",
+      "↘",
+      "の",
+      "→",
+      "♧",
+      "ぃ",
+      "￡",
+      "‿",
+      "◕",
+      "｡",
+      "✎",
+      "✟",
+      "ஐ",
+      "❤",
+      "•",
+      "۰",
+      "●",
+      "○",
+      "①",
+      "⊕",
+      "Θ",
+      "★",
+      "☆",
+      "◆",
+      "◇",
+      "◣",
+      "◢",
+      "▲",
+      "▼",
+      "△",
+      "▽",
+      "⊿",
+      "◤",
+      "◥",
+      "✐",
+      "✌",
+      "✍",
+      "✡",
+      "✓",
+      "✔",
+      "✕",
+      "✖",
+      "♀",
+      "☜",
+      "☞",
+      "⊙",
+      "◎",
+      "☺",
+      "☻",
+      "►",
+      "◄",
+      "▧",
+      "▨",
+      "◐",
+      "◑",
+      "↔",
+      "↕",
+      "♡",
+      "▪",
+      "▫",
+      "▀",
+      "▄",
+      "█",
+      "▌",
+      "▐",
+      "░",
+      "▒",
+      "▬",
+      "♦",
+      "◊",
+      "◦",
+      "☼",
+      "♠",
+      "♣",
+      "▣",
+      "▤",
+      "▥",
+      "▦",
+      "▩",
+      "◈",
+      "✄",
+      "☣",
+      "☢",
+      "☠",
+      "♯",
+      "♩",
+      "♪",
+      "♫",
+      "♬",
+      "♭",
+      "♮",
+      "☎",
+      "☏",
+      "☪",
+      "♨",
+      "º",
+      "₪",
+      "¤",
+      "«",
+      "»",
+      "™",
+      "♂",
+      "✿",
+      "♥"
+    ]
+  },
+  {
+    "name": "箭头符号",
+    "chars": [
+      "↑",
+      "↓",
+      "←",
+      "→",
+      "↖",
+      "↗",
+      "↙",
+      "↘",
+      "↔",
+      "↕",
+      "➼",
+      "➽",
+      "➸",
+      "➳",
+      "➺",
+      "➻",
+      "➴",
+      "➵",
+      "➶",
+      "➷",
+      "➹",
+      "▶",
+      "➩",
+      "➪",
+      "➫",
+      "➬",
+      "➭",
+      "➮",
+      "➯",
+      "➱",
+      "➲",
+      "➾",
+      "➔",
+      "➘",
+      "➙",
+      "➚",
+      "➛",
+      "➜",
+      "➝",
+      "➞",
+      "➟",
+      "➠",
+      "➡",
+      "➢",
+      "➣",
+      "➤",
+      "➥",
+      "➦",
+      "➧",
+      "➨",
+      "↚",
+      "↛",
+      "↜",
+      "↝",
+      "↞",
+      "↟",
+      "↠",
+      "↡",
+      "↢",
+      "↣",
+      "↤",
+      "↥",
+      "↦",
+      "↧",
+      "↨",
+      "⇄",
+      "⇅",
+      "⇆",
+      "⇇",
+      "⇈",
+      "⇉",
+      "⇊",
+      "⇋",
+      "⇌",
+      "⇍",
+      "⇎",
+      "⇏",
+      "⇐",
+      "⇑",
+      "⇒",
+      "⇓",
+      "⇔",
+      "⇖",
+      "⇗",
+      "⇘",
+      "⇙",
+      "⇜",
+      "↩",
+      "↪",
+      "↫",
+      "↬",
+      "↭",
+      "↮",
+      "↯",
+      "↰",
+      "↱",
+      "↲",
+      "↳",
+      "↴",
+      "↵",
+      "↶",
+      "↷",
+      "↸",
+      "↹",
+      "↺",
+      "↻",
+      "↼",
+      "↽",
+      "↾",
+      "↿",
+      "⇀",
+      "⇁",
+      "⇂",
+      "⇃",
+      "⇞",
+      "⇟",
+      "⇠",
+      "⇡",
+      "⇢",
+      "⇣",
+      "⇤",
+      "⇥",
+      "⇦",
+      "⇧",
+      "⇨",
+      "⇩",
+      "⇪"
+    ]
+  },
+  {
+    "name": "数学符号",
+    "chars": [
+      "+",
+      "-",
+      "×",
+      "÷",
+      "±",
+      "/",
+      "≌",
+      "∽",
+      "≦",
+      "≧",
+      "≒",
+      "﹤",
+      "﹥",
+      "≈",
+      "≡",
+      "≠",
+      "=",
+      "≤",
+      "≥",
+      "<",
+      ">",
+      "≮",
+      "≯",
+      "∷",
+      "∶",
+      "∫",
+      "∮",
+      "∝",
+      "∞",
+      "∧",
+      "∨",
+      "∑",
+      "∏",
+      "∪",
+      "∩",
+      "∈",
+      "∵",
+      "∴",
+      "⊥",
+      "∥",
+      "∠",
+      "⌒",
+      "⊙",
+      "√",
+      "∟",
+      "⊿",
+      "㏒",
+      "㏑",
+      "%",
+      "‰"
+    ]
+  },
+  {
+    "name": "括号符号",
+    "chars": [
+      "〔",
+      "〕",
+      "〈",
+      "〉",
+      "《",
+      "》",
+      "「",
+      "」",
+      "『",
+      "』",
+      "〖",
+      "〗",
+      "【",
+      "】",
+      "(",
+      ")",
+      "[",
+      "]",
+      "{",
+      "｝",
+      "︻",
+      "︼",
+      "﹄",
+      "﹃"
+    ]
+  },
+  {
+    "name": "单位符号",
+    "chars": [
+      "㎎",
+      "㎏",
+      "㎜",
+      "㎝",
+      "㎞",
+      "㎡",
+      "㏄",
+      "㏎",
+      "㏑",
+      "㏒",
+      "㏕",
+      "℡",
+      "%",
+      "‰",
+      "℃",
+      "℉",
+      "°",
+      "′",
+      "″",
+      "$",
+      "￡",
+      "￥",
+      "￠",
+      "♂",
+      "♀",
+      "℅"
+    ]
+  },
+  {
+    "name": "拼音声调",
+    "chars": [
+      "ā",
+      "á",
+      "ǎ",
+      "à",
+      "ō",
+      "ó",
+      "ǒ",
+      "ò",
+      "ē",
+      "é",
+      "ě",
+      "è",
+      "ī",
+      "í",
+      "ǐ",
+      "ì",
+      "ū",
+      "ú",
+      "ǔ",
+      "ù",
+      "ǖ",
+      "ǘ",
+      "ǚ",
+      "ǜ",
+      "ü"
+    ]
+  },
+  {
+    "name": "希腊字母",
+    "chars": [
+      "Α",
+      "Β",
+      "Γ",
+      "Δ",
+      "Ε",
+      "Ζ",
+      "Η",
+      "Θ",
+      "Ι",
+      "Κ",
+      "Λ",
+      "Μ",
+      "Ν",
+      "Ξ",
+      "Ο",
+      "Π",
+      "Ρ",
+      "Σ",
+      "Τ",
+      "Υ",
+      "Φ",
+      "Χ",
+      "Ψ",
+      "Ω",
+      "α",
+      "β",
+      "γ",
+      "δ",
+      "ε",
+      "ζ",
+      "ν",
+      "ξ",
+      "ο",
+      "π",
+      "ρ",
+      "σ",
+      "η",
+      "θ",
+      "ι",
+      "κ",
+      "λ",
+      "μ",
+      "τ",
+      "υ",
+      "φ",
+      "χ",
+      "ψ",
+      "ω"
+    ]
+  },
+  {
+    "name": "编号&序号",
+    "chars": [
+      "№",
+      "①",
+      "②",
+      "③",
+      "④",
+      "⑤",
+      "⑥",
+      "⑦",
+      "⑧",
+      "⑨",
+      "⑩",
+      "㈠",
+      "㈡",
+      "㈢",
+      "㈣",
+      "㈤",
+      "㈥",
+      "㈦",
+      "㈧",
+      "㈨",
+      "㈩",
+      "⑴",
+      "⑵",
+      "⑶",
+      "⑷",
+      "⑸",
+      "⑹",
+      "⑺",
+      "⑻",
+      "⑼",
+      "⑽",
+      "⑾",
+      "⑿",
+      "⒀",
+      "⒁",
+      "⒂",
+      "⒃",
+      "⒄",
+      "⒅",
+      "⒆",
+      "⒇",
+      "⒈",
+      "⒉",
+      "⒊",
+      "⒋",
+      "⒌",
+      "⒍",
+      "⒎",
+      "⒏",
+      "⒐",
+      "⒑",
+      "⒒",
+      "⒓",
+      "⒔",
+      "⒕",
+      "⒖",
+      "⒗",
+      "⒘",
+      "⒙",
+      "⒚",
+      "⒛",
+      "Ⅰ",
+      "Ⅱ",
+      "Ⅲ",
+      "Ⅳ",
+      "Ⅴ",
+      "Ⅵ",
+      "Ⅶ",
+      "Ⅷ",
+      "Ⅸ",
+      "Ⅹ",
+      "Ⅺ",
+      "Ⅻ",
+      "ⅰ",
+      "ⅱ",
+      "ⅲ",
+      "ⅳ",
+      "ⅴ",
+      "ⅵ",
+      "ⅶ",
+      "ⅷ",
+      "ⅸ",
+      "ⅹ",
+      "⑪",
+      "⑫",
+      "⑬",
+      "⑭",
+      "⑮",
+      "⑯",
+      "⑰",
+      "⑱",
+      "⑲",
+      "⑳",
+      "ⓐ",
+      "ⓑ",
+      "ⓒ",
+      "ⓓ",
+      "ⓔ",
+      "ⓕ",
+      "ⓖ",
+      "ⓗ",
+      "ⓘ",
+      "ⓙ",
+      "ⓚ",
+      "ⓛ",
+      "ⓜ",
+      "ⓝ",
+      "ⓞ",
+      "ⓟ",
+      "ⓠ",
+      "ⓡ",
+      "ⓢ",
+      "ⓣ",
+      "ⓤ",
+      "ⓥ",
+      "ⓦ",
+      "ⓧ",
+      "ⓨ",
+      "ⓩ"
+    ]
+  },
+  {
+    "name": "绘表符号",
+    "chars": [
+      "─",
+      "━",
+      "│",
+      "┃",
+      "┄",
+      "┅",
+      "┆",
+      "┇",
+      "┈",
+      "┉",
+      "┊",
+      "┋",
+      "┍",
+      "┎",
+      "┐",
+      "┑",
+      "┒",
+      "└",
+      "┕",
+      "┖",
+      "┘",
+      "┙",
+      "┚",
+      "├",
+      "┝",
+      "┞",
+      "┟",
+      "┡",
+      "┢",
+      "┣",
+      "┤",
+      "┥",
+      "┦",
+      "┧",
+      "┩",
+      "┪",
+      "┫",
+      "┬",
+      "┭",
+      "┮",
+      "┰",
+      "┱",
+      "┲",
+      "┴",
+      "┵",
+      "┶",
+      "┸",
+      "┹",
+      "┺",
+      "┻",
+      "┼",
+      "┽",
+      "┾",
+      "┿",
+      "╀",
+      "╁",
+      "╂",
+      "╃",
+      "╄",
+      "╅",
+      "╆",
+      "╇",
+      "╈",
+      "╉",
+      "╊",
+      "╋",
+      "║",
+      "╒",
+      "╕",
+      "╖",
+      "╘",
+      "╙",
+      "╛",
+      "╜",
+      "╞",
+      "╟",
+      "╠",
+      "╡",
+      "╢",
+      "╣",
+      "╤",
+      "╥",
+      "╦",
+      "╧",
+      "╨",
+      "╪",
+      "╫",
+      "╳",
+      "╔",
+      "╗",
+      "╝",
+      "╚",
+      "╬",
+      "═",
+      "╓",
+      "╩",
+      "┠",
+      "┨",
+      "┯",
+      "┷",
+      "┏",
+      "┓",
+      "┗",
+      "┛",
+      "┳",
+      "⊥",
+      "﹃",
+      "﹄",
+      "┌",
+      "╭",
+      "╮",
+      "╯",
+      "╰"
+    ]
+  }
+]