富文本使用总结

多种富文本

一、Tinymce富文本

踩坑：disabled和readonly效果问题

解决方法：

【Tinymce富文本】如何实现disabled和readonly效果_tinymce disabled-CSDN博客

二、vue-quill-editor富文本

官方链接： vue-quill-editor · Quill官方中文文档 · 看云

vue-quill-editor 使用教程 （最全）！ - 灰信网（软件开发博客聚合）

踩坑：

上传图片时，图片路径会被默认转为base64编码格式，上传多个图片时路径过长数据库存储不下导致报错用富文本(vue-quill-editor)上传图片时，图片路径会被默认转为base64编码格式，上传多个图片时路径过长数据库存储不下导致报错 - 简书

解决方法：

插入图片不采用base64而是从服务器传图片再显示返回url。

搜索关键词：

vue使用vue-quill实现富文本编辑器上传图片

使用步骤：

1.安装依赖

2.全局注册

3.封装组件（注意这是antd工程）

CourseRichText.vue

4.页面使用组件

三、Monaco Editor

封装组件：MonacoEditor.vue

monaco-editor.js

const colType = { Object, Array }

export function getJsonPath(text, offSet) {
    let pos = 0
    let stack = []
    let isInKey = false

    while (pos < offSet) {
        const startPos = pos
        switch (text[pos]) {
            case '"':
                const { text: s, pos: newPos } = readString(text, pos)
                if (stack.length) {
                    const frame = stack[stack.length - 1]
                    if (frame.colType === colType.Object && isInKey) {
                        frame.key = s
                        isInKey = false
                    }
                }
                pos = newPos
                break
            case '{':
                stack.push({ colType: colType.Object })
                isInKey = true
                break
            case '[':
                stack.push({ colType: colType.Array, index: 0 })
                break
            case '}':
            case ']':
                stack.pop()
                break
            case ',':
                if (stack.length) {
                    const frame = stack[stack.length - 1]
                    if (frame.colType === colType.Object) {
                        isInKey = true
                    } else {
                        frame.index++
                    }
                }
                break
        }
        if (pos === startPos) {
            pos++
        }
    }
    return pathToString(stack);
}

function pathToString(path) {
    let s = '$'
    try {
        for (const frame of path) {
            if (frame.colType === colType.Object) {
                if (!frame.key.match(/^[a-zA-Z$_][a-zA-Z\d$_]*$/)) {
                    const key = frame.key.replace('"', '\\"')
                    s += `["${frame.key}"]`
                } else {
                    if (s.length) {
                        s += '.'
                    }
                    s += frame.key
                }
            } else {
                s += `[${frame.index}]`
            }
        }
        return s;
    } catch (ex) {
        return '';
    }
}

function isEven(n) {
    return n % 2 === 0;
}

function readString(text, pos) {
    let i = pos + 1
    i = findEndQuote(text, i)
    var textpos = {
        text: text.substring(pos + 1, i),
        pos: i + 1
    }
    return textpos
}

// Find the next end quote
function findEndQuote(text, i) {
    while (i < text.length) {
        // console.log('findEndQuote: ' + i + ' : ' + text[i])
        if (text[i] === '"') {
            var bt = i
            // Handle backtracking to find if this quote is escaped (or, if the escape is escaping a slash)
            while (0 <= bt && text[bt] == '\\') {
                bt--
            }
            if (isEven(i - bt)) {
                break;
            }
        }
        i++
    }
    return i
}

export function checkJsonCode(strJsonCode) {
    let res = '';
    try {
      for (let i = 0, j = 0, k = 0, ii, ele; i < strJsonCode.length; i++) {
        ele = strJsonCode.charAt(i);
        if (j % 2 === 0 && ele === '}') {
          // eslint-disable-next-line no-plusplus
          k--;
          for (ii = 0; ii < k; ii++) ele = `    ${ele}`;
          ele = `\n${ele}`;
        } else if (j % 2 === 0 && ele === '{') {
          ele += '\n';
          // eslint-disable-next-line no-plusplus
          k++;
          for (ii = 0; ii < k; ii++) ele += '    ';
        } else if (j % 2 === 0 && ele === ',') {
          ele += '\n';
          for (ii = 0; ii < k; ii++) ele += '    ';
          // eslint-disable-next-line no-plusplus
        } else if (ele === '"') j++;
        res += ele;
      }
    } catch (error) {
      res = strJsonCode;
    }
    return res;
  }

使用：

四、mavonEditor