@gulibs/prosemirror-schema-color-span

prosemirror-schema-color-span

Prosemirror插件，增加颜色选择器功能.

Install

npm install --save @gulibs/prosemirror-schema-color-span

or

yarn add @gulibs/prosemirror-schema-color-span

Usage

menus.tsx

EditorToobar.ColorSelector内置颜色选择器

import { setColorMark } from '@gulibs/prosemirror-schema-color-span';
const menus = {
    colorSettings: {
        fontColor: {
            tooltips: {
                title: '字体颜色',
                placement: 'bottom'
            },
            color: Color.create({
                hex: ''
            }),
            storageKey: 'fontColor',
            runColor: (color) => {
                return setColorMark(schema.marks.colorSpan, { fontColor: color });
            },
            colors: createFromColors([
                { hex: "#222222", border: false, reset: true }, "#505050", "#666666", "#999999", "#CACACA", "#D8D8D8", "#E8E8E8", "#F2F2F2", "#F8F8F8", { hex: "#FFFFFF", border: true },
                "#F04142", "#EB28BD", "#8F2BFF", "#1A74FF", "#00ABAB", "#00AA54", "#70B500", "#FFBA12", "#FF7528", "#996D39",
                "#FFD1D1", "#FFBAEF", "#E0C4FF", "#C1E1F7", "#C7F2F2", "#C2EDD8", "#DEF7B5", "#FFEBBA", "#FFD8C2", "#F5D8B6",
                "#FF8585", "#FF87E3", "#C087FF", "#599AFF", "#5ED1D1", "#69CF9C", "#ACDE5B", "#FFD05E", "#FFA775", "#C79254",
                "#FF5E5E", "#F54CCD", "#AE66FF", "#3D89FF", "#39C4C4", "#3BBF7D", "#8ECC29", "#FFC740", "#FF8E4F", "#C0833B",
                "#B83232", "#B31E90", "#641EB3", "#1356BD", "#008585", "#008542", "#508200", "#CC950E", "#B3521C", "#815A2C",
                "#7A2122", "#75145E", "#4B1785", "#0E408C", "#005C5C", "#005E2F", "#314F00", "#856109", "#662F10", "#634119"
            ]),
            menuIconRender: (color) => <FontColorSVG color={color} />
        },
        bgColorSettings: {
            tooltips: {
                title: '背景颜色',
                placement: 'bottom'
            },
            storageKey: 'bgColor',
            color: Color.create({
                hex: ''
            }),
            runColor: (color) => {
                return setColorMark(schema.marks.backgroundColorSpan, { bgColor: color });
            },
            colors: createFromColors([
                "#222222", "#505050", "#666666", "#999999", "#CACACA", "#D8D8D8", "#E8E8E8", "#F2F2F2", "#F8F8F8", { hex: "#FFFFFF", border: true, reset: true },
                "#f04142", "#EB28BD", "#8F2BFF", "#1A74FF", "#00ABAB", "#00AA54", "#70B500", "#FFBA12", "#FF7528", "#996D39",
                "#FFD1D1", "#FFBAEF", "#E0C4FF", "#C1E1F7", "#C7F2F2", "#C2EDD8", "#DEF7B5", "#FFEBBA", "#FFD8C2", "#F5D8B6",
                "#FF8585", "#FF87E3", "#C087FF", "#599AFF", "#5ED1D1", "#69CF9C", "#ACDE5B", "#FFD05E", "#FFA775", "#C79254",
                "#FF5E5E", "#F54CCD", "#AE66FF", "#3D89FF", "#39C4C4", "#3BBF7D", "#8ECC29", "#FFC740", "#FF8E4F", "#C0833B",
                "#B83232", "#B31E90", "#641EB3", "#1356BD", "#008585", "#008542", "#508200", "#CC950E", "#B3521C", "#815A2C",
                "#7A2122", "#75145E", "#4B1785", "#0E408C", "#005C5C", "#005E2F", "#314F00", "#856109", "#662F10", "#634119"
            ]),
            menuIconRender: (color) => <MarkPenSVG color={color} />
        }
    },
}

marks.ts

import { marks } from 'prosemirror-schema-basic';
import { colorSpan, backgroundColorSpan } from '@gulibs/prosemirror-schema-color-span';
export default {
    ...marks,
    colorSpan,
    backgroundColorSpan,
    ...
}

License

MIT © AnizGu