tinymce在vue3中的用法以及文本流式输出

左又

已于 2024-02-28 17:00:30 修改

阅读量593

点赞数 7

文章标签： vue.js javascript 前端

于 2024-02-28 16:03:58 首次发布

本文链接：https://blog.csdn.net/qq_29715077/article/details/136347170

版权

一、版本

"@tinymce/tinymce-vue": "4.0.5",
"tinymce": "5.10.2",

二、步骤

具体步骤可以参考tinymce在vue2中的用法中的步骤

三、在项目index.html-body中引入tinymcejs

<script src="tinymce/tinymce.min.js"></script>

四、tinymce引入自定义插件

在项目的public/tinymce文件夹下引入按需放置自定义插件文件，比如formatpainter和indent2em

在使用tinymce插件的vue中引入自定义插件

import '@PublicDir/tinymce/plugins/formatpainter';
import '@PublicDir/tinymce/plugins/indent2em';

五、具体代码

1、封装组件

把tinymce初始化以及文本流式输出封装成组件放到项目src/components文件夹下：

tinymce.vue

<template>
    <div class="tinymce-page">
        <Editor v-model="editorValue" class="tinymce-editor" :init="init" @focus="handleFocus">
        </Editor>
        <!-- AI生成modal  -->
        <FModal v-model:show="modalObj.showModal" :maskClosable="false" :closable="modalObj.state === '2'" :title="modalObj.title" vertical-center :width="860" contentClass="ai-modal-wrapper" @cancel="cancel">
            <div class="ai">
                <FScrollbar ref="scrollbarRef" :maxHeight="modalMaxHeight" style="width: 100%">
                    <div v-if="modalObj.state === '1'" class="ai-loading">
                        <EditOutlined />AI生成中
                    </div>
                    <FTooltip v-else mode="popover" trigger="click" placement="right-start" popperClass="popover-regular">
                        <div id="message" class="message">
                            <span v-html="modalObj.message"></span>
                            <LoadingOutlined v-if="modalObj.messageState === '2'" />
                        </div>
                        <template #content>
                            <div class="list">
                                <div class="title">编辑诉求或选择以下方式</div>
                                <div v-for="(item, index) in aiToolbarList"
                                     :key="index"
                                     class="item"
                                     :title="item.label"
                                     @click="handleClick(item.value)"
                                >
                                    <EditOutlined />{{item.label}}
                                </div>
                            </div>
                        </template>
                    </FTooltip>
                </FScrollbar>
            </div>
            <template #footer></template>
        </FModal>
    </div>
</template>
<script setup>
import {
    FInput, FMessage, FModal, FScrollbar,
} from '@fesjs/fes-design';
import {
    ref, defineEmits, defineProps, computed, nextTick, watch, onUnmounted,
} from 'vue';
import { EditOutlined, LoadingOutlined } from '@fesjs/fes-design/icon';
import { request } from '@fesjs/fes';
import tinymce from 'tinymce'; // tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue';// 编辑器引入;
import 'tinymce/icons/default/icons';
import 'tinymce/themes/silver/theme';// 编辑器主题
import 'tinymce/plugins/contextmenu'; // 上下文菜单
import 'tinymce/plugins/table';
import 'tinymce/plugins/image';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/paste';
import '@PublicDir/tinymce/plugins/formatpainter';
import '@PublicDir/tinymce/plugins/indent2em';

const props = defineProps({
    value: {
        type: String,
        default: '',
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    aiId: { // ai生成时所需ID
        type: String,
        default: '',
    },
    title: { // 文档标题
        type: String,
        default: '',
    },
    textTitle: { // 输入框标题，用来做校验错误信息提示
        type: String,
        default: '',
    },
    placeholder: { // placeholder
        type: String,
        default: '',
    },
});
const emits = defineEmits(['update:value', 'selectEditor']);

// 通过重写计算属性的set和get方法，将计算属性的结果绑定在文本框的model中
const editorValue = computed({
    get: () => props.value,
    set: (val) => {
        emits('update:value', val);
    },
});
const myEditor = ref(null);

const modalObj = ref({
    title: '',
    showModal: false,
    message: '',
    state: '1', // 1、AI生成中 2、生成成功
    messageState: '1', // 加载状态显示 1、生成成功或者未触发生成 2、文案生成中
});
const tinymceSelectText = ref('');// 文本框选中的文案

// const queryAIResult = sessionId => new Promise((resolve, reject) => {
//     request('/projectDoc/ai/write/result', { sessionId }, 'post')
//         .then((result) => {
//             if (result.status === 'PENDING') {
//                 reject('pending');
//             } else {
//                 resolve(result);
//             }
//         }).catch((error) => {
//             reject(error);
//         });
// });

// const queryAiResultCircle = (sessionId) => {
//     queryAIResult(sessionId).then((result) => {
//         if (result.status === 'FAIL') {
//             modalObj.value.message = '生成失败';
//         } else {
//             modalObj.value.message = result.output || '生成失败';
//         }
//         modalObj.value.state = '2';
//     }).catch((error) => {
//         setTimeout(() => queryAiResultCircle(sessionId), 5000);
//     });
// };

// const queryAiResultCircle = async (sessionId) => {
//     queryAIResult(sessionId).then((result) => {
//         if (result.status === 'FAIL') {
//             modalObj.value.message = '生成失败';
//         } else {
//             modalObj.value.message = result.output || '生成失败';
//         }
//         modalObj.value.state = '2';
//     }).catch((error) => {
//         setTimeout(() => queryAiResultCircle(sessionId), 5000);
//     });
//     const result = await request('/projectDoc/ai/write/body', {
//         sessionId,
//     }, {
//         method: 'post',
//     });
// };
const scrollbarRef = ref(null);
const modalMaxHeight = 800;
// EventSource文本流失输出
const eventSource = ref();
const setupEventSource = (sessionId) => {
    modalObj.value.message = '';
    eventSource.value = new EventSource(`${BASEURL}/projectDoc/ai/write/stream?sessionId=${sessionId}`); // 创建EventSource对象，参数为接口URL
    eventSource.value.addEventListener('message', (event) => {
        console.log('message:', event.data);
        modalObj.value.state = '2';
        modalObj.value.messageState = '2';
        modalObj.value.message = event.data;
        const messageDom = document.getElementById('message');
        // 文本框滚动条始终置于元素底部
        if (messageDom && messageDom.scrollHeight >= modalMaxHeight) {
            // console.log(messageDom.scrollHeight, scrollbarRef.value, scrollbarRef.value.height);
            scrollbarRef.value?.setScrollTop(messageDom.scrollHeight, 1000);
        }
    });
    eventSource.value.addEventListener('finish', (event) => {
        console.log('Finish:', event.data);
        modalObj.value.messageState = '1';
        eventSource.value.close(); // 关闭连接
    });
    eventSource.value.onerror = function (event) {
        console.error('EventSource failed.', event);
        modalObj.value.state = '2';
        modalObj.value.messageState = '1';
        modalObj.value.message = '生成失败';
        eventSource.value.close(); // 在发生错误时关闭连接
    };
};

const againAIId = ref(''); // 重新生成内容时的id
const againAIInput = ref(''); // 重新生成内容时的input
const getMessage = async ({
    id,
    input,
}) => {
    try {
        // 请求后台生成文案
        againAIId.value = id;
        againAIInput.value = input;
        const inputText = input.length > 4000 ? input.slice(input.length - 4000, input.length) : input;
        const result = await request('/projectDoc/ai/write/body', {
            id,
            input: inputText,
            title: props.title,
        }, {
            method: 'post',
        });
        const sessionId = result.sessionId;
        console.log(sessionId);
        setupEventSource(sessionId);
        // 每5s查询一次ai生成结果
        // queryAiResultCircle(sessionId);
    } catch (error) {
        console.log('getMessage error:', error);
        modalObj.value.message = '生成失败';
        modalObj.value.state = '2';
    }
};

// 上下文菜单items action
const tinymceAction = (modalTitle, text, aiId) => {
    if (!text) return FMessage.error('请选择文案');
    tinymceSelectText.value = text;
    modalObj.value.title = modalTitle;
    modalObj.value.showModal = true;
    getMessage({
        id: aiId,
        input: text,
    });
};
// fontsize获取
const getFontSize = (editor) => {
    const fontSize = editor.queryCommandValue('FontSize');
    return parseInt(fontSize.match(/(\S*)px/)[1]);
};

const tinymceId = `tinymce${new Date().getTime()}`;
// 富文本框初始化
const init = {
    selector: `${tinymceId}`, // 富文本编辑器的id,
    placeholder: props.placeholder,
    language_url: 'tinymce/langs/zh_CN.js', // 引入语言包文件
    language: 'zh_CN', // 语言类型
    menubar: false,
    skin_url: 'tinymce/skins/ui/oxide', // 皮肤：浅色
    content_css: 'tinymce/skins/content/default/content.css',
    plugins: 'formatpainter image lists table indent2em contextmenu paste',
    toolbar: [
        'formatpainter | styleselect | fontselect | fontsizeselect | customInsert | fontSizeA+ fontSizeA- | bold italic underline strikethrough forecolor backcolor | numlist bullist | indent2em outdent indent | alignleft aligncenter alignright | lineheight blockquote | undo redo',
    ],
    toolbar_groups: {
        customInsert: {
            text: '插入',
            tooltip: 'insert',
            items: 'table image',
        },
    },
    fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
    font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
    contextmenu: 'title | textGeneration expandWordCount extractKeyPoints changeLanguage',
    setup(editor) {
        myEditor.value = editor;
        editor.ui.registry.addIcon('file', '<svg width="14" height="14" viewBox="0 0 1024 1024"><path d="M533.419 96.555a21.333 21.333 0 0 1 21.333 21.333v21.333a21.333 21.333 0 0 1-17.493 20.992l-3.84.342-372.907-.043v702.933h702.933V533.333A21.333 21.333 0 0 1 884.78 512h21.333a21.333 21.333 0 0 1 21.333 21.333v342.443c0 26.752-20.309 48.768-46.378 51.413l-5.291.256H148.224a51.67 51.67 0 0 1-51.413-46.378l-.256-5.291V148.224c0-26.752 20.309-48.768 46.378-51.413l5.291-.256h385.195zm263.296 3.84L917.376 221.14a21.333 21.333 0 0 1 0 30.123l-371.627 371.67a21.333 21.333 0 0 1-13.184 6.143l-132.693 12.075a21.333 21.333 0 0 1-23.21-23.168l12.074-132.736a21.333 21.333 0 0 1 6.144-13.141l371.627-371.67a21.333 21.333 0 0 1 30.208 0zm-15.062 75.392L451.072 506.368l-6.059 66.39 66.39-6.06 330.581-330.58-60.33-60.331z"></path></svg>');
        editor.ui.registry.addIcon('a-', '<svg width="20" height="20" viewBox="0 0 1024 1024" p-id="1183" width="200" height="200"><path d="M631.1 266.9h345.4v41H631.1zM368.5 150.5L57.2 855.2h73.2l101.3-236.8h346.7l98.9 236.8h78.1L444.2 150.5h-75.7zM559 572H251.3l54.9-127.6c35.4-82.2 65.9-156.6 96.4-241.7h4.9c31.7 85.1 61 159.5 97.7 241.7L559 572z" fill="#000" p-id="1184"></path></svg>');
        editor.ui.registry.addIcon('a+', '<svg width="20" height="20" viewBox="0 0 1024 1024" p-id="902" width="200" height="200"><path d="M631.1 266.9h152.2v41H631.1zM824.3 266.9h152.2v41H824.3zM783.3 307.8h41V460h-41zM783.3 114.6h41v152.2h-41z" fill=" #000" p-id="903"></path><path d="M783.3 266.9h41v41h-41zM368.5 150.5L57.2 855.2h73.2l101.3-236.8h346.7l98.9 236.8h78.1L444.2 150.5h-75.7zM559 572H251.3l54.9-127.6c35.4-82.2 65.9-156.6 96.4-241.7h4.9c31.7 85.1 61 159.5 97.7 241.7L559 572z" fill=" #000" p-id="904"></path></svg>');
        editor.ui.registry.addButton('fontSizeA+', {
            icon: 'a+',
            tooltip: '字号放大',
            onAction() {
                const num = getFontSize(editor);
                if (num === 72) return;
                editor.execCommand('fontSize', false, `${num + 2}px`);
            },
        });
        editor.ui.registry.addButton('fontSizeA-', {
            icon: 'a-',
            tooltip: '字号缩小',
            onAction() {
                const num = getFontSize(editor);
                if (num === 12) return;
                editor.execCommand('fontSize', false, `${num - 2}px`);
            },
        });
        editor.ui.registry.addMenuItem('title', {
            text: '请选择以下方式使用AI',
        });
        editor.ui.registry.addMenuItem('textGeneration', {
            text: '文本生成',
            context: 'tools',
            icon: 'file',
            onAction(e) {
                console.log(e, '文本生成', editor.selection.getContent({ format: 'text' }));
                const text = editor.selection.getContent({ format: 'text' });
                tinymceAction('文本生成', text, `${props.aiId}-SC`);
            },
        });
        editor.ui.registry.addMenuItem('expandWordCount', {
            text: '扩充字数',
            context: 'tools',
            icon: 'file',
            onAction() {
                console.log('扩充字数');
                const text = editor.selection.getContent({ format: 'text' });
                tinymceAction('扩充字数', text, `${props.aiId}-KC`);
            },
        });
        editor.ui.registry.addMenuItem('extractKeyPoints', {
            text: '提炼要点',
            context: 'tools',
            icon: 'file',
            onAction() {
                console.log('提炼要点');
                const text = editor.selection.getContent({ format: 'text' });
                tinymceAction('提炼要点', text, `${props.aiId}-TL`);
            },
        });
        editor.ui.registry.addMenuItem('changeLanguage', {
            text: '转换语言风格',
            context: 'tools',
            icon: 'file',
            onAction() {
                console.log('转换语言风格');
                const text = editor.selection.getContent({ format: 'text' });
                tinymceAction('转换语言风格', text, `${props.aiId}-ZH`);
            },
        });
    },
    indentation: '2em',
    branding: false,
    elementpath: false,
    width: '100%',
    min_height: 600,
    paste_preprocess(plugin, args) {
        // 复制粘贴去掉原有样式
        console.log(args.content, plugin);
        args.content = args.content.replace(/(\sface=".*"\scolor)/g, ' color');
    },
    file_picker_callback(callback, value, meta) {
        // 上传需要处理
        console.log(callback, value, meta);
        // 文件分类
        let filetypeAccept = '.pdf, .png';
        const apiFileType = '1';
        // 后端接收上传文件的地址
        let upurl = 'file/upload';
        // 为不同插件指定文件类型及后端地址
        switch (meta.filetype) {
            case 'image':
                filetypeAccept = '.jpg, .jpeg, .png, .gif';
                upurl = '/oacgs-bms/commonFile/uploadFile';
                // apiFileType = '1';
                break;
            case 'file':
            default:
        }
        // 模拟出一个input用于添加本地文件
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', filetypeAccept);
        input.click();
        input.onchange = function () {
            const file = this.files[0];
            console.log(file.name);
            const xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', upurl);
            xhr.onload = function () {
                if (xhr.status !== 200) {
                    FMessage.error(`HTTP Error: ${xhr.status}`);
                    return;
                }
                const json = JSON.parse(xhr.responseText);
                console.log('json', json);
                if (!json || json.code !== '0') {
                    FMessage.error(json?.msg || '上传失败');
                    return;
                }
                console.log('json', json?.result);
                const recordId = json?.result?.recordId;
                const fileUrl = `${window.location.origin}/oacgs-bms/commonFile/image/download?recordId=${recordId}`;
                console.log('fileUrl', fileUrl);
                if (meta.filetype === 'file') return callback(fileUrl || '', { title: file.name, text: file.name });
                callback(fileUrl || '', {});
            };
            const formData = new FormData();
            formData.append('file', file, file.name);
            formData.append('fileType', apiFileType);
            xhr.send(formData);
        };
    },
};

const aiToolbarList = [
    { label: '替换选择区域', value: 'replace' },
    { label: '添加到所选区域之后', value: 'append' },
    { label: '将生成内容扩充字数', value: 'continueExpandWordCount' },
    { label: '重新生成', value: 'regenerate' },
    { label: '放弃文本', value: 'cancel' },
];
const again = ({
    id, input,
}) => {
    modalObj.value.state = '1';
    modalObj.value.message = '';
    getMessage({ id, input });
};

const cancel = () => {
    modalObj.value.state = '1';
    modalObj.value.message = '';
    modalObj.value.showModal = false;
    if (!eventSource.value) return;
    eventSource.value.close();
};

// 生成文案点击选择items
const handleClick = (type) => {
    const selectText = myEditor.value.selection.getContent();
    switch (type) {
        case 'replace':
            // 替换选择区域
            myEditor.value.insertContent(modalObj.value.message);
            cancel();
            break;
        case 'append':
            // 添加到所选区域之后
            myEditor.value.selection.setContent(`${selectText}${modalObj.value.message}`);
            cancel();
            break;
        case 'continueExpandWordCount':
            // 将生成内容扩充字数
            console.log('将生成内容扩充字数');
            again({
                id: `${props.aiId}-KC`,
                input: modalObj.value.message,
            });
            break;
        case 'regenerate':
            // 重新生成
            console.log('重新生成');
            again({
                id: againAIId.value,
                input: againAIInput.value,
            });
            break;
        case 'cancel':
            // 放弃文本
            cancel();
            break;
        default:
            break;
    }
};

const handleFocus = (event) => {
    // console.log('focus in', event)
    emits('selectEditor', props.aiId);
};

const openContextMenu = () => {
    if (!myEditor.value.selection.getContent().length) {
        myEditor.value.execCommand('selectAll');
    }
    console.log(myEditor.value.selection.getContent());
    myEditor.value.fire('contextMenu');
};

const validateLength = () => myEditor.value.getContent({ format: 'text' }).length < 10001;
// console.log(myEditor.value.getContent({format:'text'}), myEditor.value.getContent({format:'text'}).length)

watch(() => props.disabled, async () => {
    // console.log(props.disabled, myEditor.value)
    await nextTick();
    if (myEditor.value) {
        // console.log(myEditor.value);
        // 由于tinymce 5.x使用的setMode方式来控制文本框的disable态，查阅源码发现该函数内有异步事件，在连续调用时会出现后面的被前面覆盖的问题，故使用setTimeout解决该问题 （tinymce 5.10.2 Mode.ts line37-setMode）
        setTimeout(() => myEditor.value.setMode(props.disabled ? 'readonly' : 'design'), 300);
    }
}, { immediate: true });

// eslint-disable-next-line no-undef
defineExpose({
    openContextMenu, validateLength, textTitle: props.textTitle,
});

onUnmounted(() => {
    if (!eventSource.value) return;
    eventSource.value.close();
});
</script>

<style lang="less" >
.ai {
    .ai-loading {
        display: flex;
        align-items: center;
        .fes-design-icon {
            margin-right: 6px;
        }
    }
}
.message {
    cursor: pointer;
    line-height: 2;
    .fes-design-icon {
        line-height: 2;
        margin-left: 6px;
    }
}
.popover-regular {
    padding: 0!important;
    border-radius: 2px !important;
    overflow: hidden;
    border: 1px solid #ccc;
    .list {
        padding: 4px 0;
        .title,
        .item {
            display: flex;
            align-items: center;
            line-height: 32px;
            font-size: 14px;
            padding:  0 16px;
            color: #222f3e;
        }
        .title {
            border-bottom: 1px solid #ccc;
            padding-left: 20px;
            margin-bottom: 4px;
        }
        .item {
            cursor: pointer;
            .fes-design-icon {
                width: 24px;
                margin-right: 8px;
            }
            &:hover {
                background: #eee;
            }
        }
    }
    .fes-popper-arrow {
        display: none;
    }
}
.tox .tox-collection--list .tox-collection__item--active {
    background-color: #eee !important;
}
.tox-collection__item {
    cursor: pointer;
}
.tox .tox-collection--list .tox-collection__group:first-child {
    .tox-collection__item--active {
        background-color: transparent !important;
    }
    .tox-collection__item {
        cursor: default;
        &:hover {
            background: transparent;
        }
        .tox-collection__item-icon {
            display: none;
        }
    }
}
.ai-modal-wrapper {
    padding: 16px 0 !important;
    .fes-modal-header {
        margin: 16px;
    }
    .fes-modal-body {
        .fes-scrollbar {
            padding: 0 16px;
        }
    }
}

</style>

代码中的@PublicDir需要在alias设置

alias: {
    '@': path.resolve(__dirname, 'src'),
    '@PublicDir': path.resolve(__dirname, 'public')
},

说明: fesjs是基于最新 Vue3 + webpack5 的前端应用框架

2、调用组件

<template>
    <TEditor v-model:value="editorContent" />
</template>
<script setup>
import {ref} from 'vue';
import TEditor from '@/components/TEditor.vue';
const editorContent = ref('');
</script>

tinymce中文文档地址