@gulibs/prosemirror-plugin-media NPM

prosemirror-plugin-media

Prosemirror 插件，增加视频、图片、音频支持

Install

npm install --save @gulibs/prosemirror-plugin-media

yarn add @gulibs/prosemirror-plugin-media

Usage

如果不知道怎么添加插件可以查看官网文档。示例代码是根据

import React from 'react';
import { Card } from 'antd';
import { ProseMirrorEditor, EditorToolBar } from '@gulibs/react-prosemirror-editor-x';
import { images, videos, audios } from '@gulibs/prosemirror-plugin-media';

class Example extends React.Component {
    render() {
        return (
            <ProseMirrorEditor
                config={{
                    schema,
                    plugins: [
                        images('insert', {
                                modalOptions: {
                                    title: '添加图片',
                                    buttonText: '上传图片',
                                    description: '支持jpg、jpeg、png、gif等多种格式，单张图片最大支持20MB'
                                },
                                data: {
                                    tid: currentUser.id
                                },
                                action: '/api/yftc/top/files/upload',
                            }),
                            audios('insert', {
                                modalOptions: {
                                    title: '添加音频',
                                    buttonText: '上传音频',
                                    description: '支持mp3、ogg、wav等多种格式，单个音频最大支持20MB'
                                },
                                data: {
                                    tid: currentUser.id
                                },
                                action: '/api/yftc/top/files/upload',
                            }),
                            videos('insert', {
                                tooltip: {
                                    title: '插入视频',
                                    placement: 'bottom'
                                },
                                modalOptions: {
                                    title: '添加视频',
                                    buttonText: '上传视频',
                                    description: '支持mp4、webm、ogg等多种格式，单张图片最大支持100MB'
                                },
                                data: {
                                    tid: currentUser.id
                                },
                                action: '/api/yftc/top/files/upload',
                            })
                    ]
                }}
                autoFocus
                onRender={({ editor }) => (
                    <Card
                    type="inner"
                    bordered={false}
                    >
                    <EditorToolBar menus={menus} />
                    {editor}
                    </Card>
                )}
                >
            </ProseMirrorEditor>
        )
    }
}