Element-tiptap学习历程

element-tiptap 目前用过的富文本编辑器中, UI界面最简洁美观的;
tiptap 的使用;

Element-tiptap使用

npm install --save element-tiptap element-ui

import Vue from 'vue';
import ElementUI from 'element-ui';
import { ElementTiptapPlugin } from 'element-tiptap';
// import ElementUI's styles
import 'element-ui/lib/theme-chalk/index.css';
// import this package's styles
import 'element-tiptap/lib/index.css';

// use ElementUI's plugin
Vue.use(ElementUI);
// use this package's plugin
Vue.use(ElementTiptapPlugin, {
  /* plugin options */
});

<template>
  <div>
    <el-tiptap ...></el-tiptap>
  </div>
</template>

<script>
import { ElementTiptap } from 'element-tiptap';

export default {
  components: {
    'el-tiptap': ElementTiptap,
  },
};
</script>

效果

复制粘贴问题

html复制粘贴时,由于font-size单位非px而导致的报错(No value supplied for attribute px)的解决方式;

原因分析

是由于extensions中font-size.ts的中的schema方法在解析dom的attrs时, 返回的attrs是空对象;在toDOM中使用const { px } = node.attrs;报错;

解决方式: 利用extensions从写font-size.ts中的parseDOM方法;将放回attrs空对象改成const attrs = { px: '' };;

创建文件PxFontSize.js

import { FontSize } from 'element-tiptap';

const SIZE_PATTERN = /([\d.]+)px/i;

function convertToPX (styleValue) {
    const matches = styleValue.match(SIZE_PATTERN);
    if (!matches) return '';
    const value = matches[1];
    if (!value) return '';
    return value;
}

export default class PxFontSize extends FontSize {
    get schema() {
        return {
            attrs: {
                px: '',
            },
            inline: true,
            group: 'inline',
            parseDOM: [
                {
                    style: 'font-size',
                    getAttrs: (fontSize) => {
                        const attrs = { px: '' };
                        if (!fontSize) return attrs;
                        const px = convertToPX(fontSize);
                        if (!px) return attrs;
                        
                        return {
                            px,
                        };
                    },
                },
            ],
            toDOM(node) {
                const { px } = node.attrs;
                const attrs = { style: '' };
                if (px) {
                    attrs.style = `font-size: ${px}px`;
                }
                return ['span', attrs, 0];
            },
        };
    }
}

// 修改使用
import PxFontSize from "./PxFontSize"

// 创建对象FontSize修改
FontSize: new PxFontSize(), // new FontSize(),

DEMO

DEMO测试