javascript - wangEditor @mention提及插件 有没有vue3完整写法 demo？

Question

wangEditor @mention提及插件 有没有vue3完整写法 demo？

Answer 1

用的tinymce觉得还可以，网上案例也都一堆

<template>
    <editor v-model="myValue" :init="init" :disabled="disabled" :id="tinymceId"></editor>
</template>
<script lang="ts">
    export default {
        name: 'TEditor'
    };
</script>
<script setup lang="ts">
    //JS部分
    //在js中引入所需的主题和组件tinymce/skins/content/default/content.css
    import tinymce from 'tinymce/tinymce';
    import 'tinymce/skins/content/default/content.css';
    import Editor from '@tinymce/tinymce-vue';
    import 'tinymce/themes/silver';
    import 'tinymce/themes/silver/theme';
    import 'tinymce/icons/default'; //引入编辑器图标icon，不引入则不显示对应图标
    import 'tinymce/models/dom'; // 这里是个坑 一定要引入

    //在TinyMce.vue中接着引入相关插件
    import 'tinymce/plugins/link'; //超链接插件
    import 'tinymce/icons/default/icons';
    import 'tinymce/plugins/image'; // 插入上传图片插件
    import 'tinymce/plugins/media'; // 插入视频插件
    import 'tinymce/plugins/table'; // 插入表格插件
    import 'tinymce/plugins/lists'; // 列表插件
    import 'tinymce/plugins/wordcount'; // 字数统计插件
    import 'tinymce/plugins/code'; // 源码
    import 'tinymce/plugins/fullscreen'; //全屏

    //接下来定义编辑器所需要的插件数据
    import { reactive, ref } from 'vue';
    import { onMounted, defineEmits, watch } from '@vue/runtime-core';
    const emits = defineEmits(['getContent']);
    //这里我选择将数据定义在props里面，方便在不同的页面也可以配置出不同的编辑器，当然也可以直接在组件中直接定义
    const props = defineProps({
        value: {
            type: String,
            default: () => {
                return '';
            }
        },
        baseUrl: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        plugins: {
            type: [String, Array],
            default: 'table lists'
        }, //必填
        toolbar: {
            type: [String, Array],
            default:
                'codesampl  bold link italic underline alignleft aligncenter alignright alignjustify | undo redo | formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | removeformat | image media | fullscreen'
        } //必填
    });
    const plugins = ['table ', 'image ', 'link', 'fullscreen', 'lists', 'wordcount'];
    const toolbar = [
        'cancel searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample fontsize',
        'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime  table emoticons forecolor backcolor fontfamily styles fullscreen'
    ];
    //用于接收外部传递进来的富文本
    const myValue = ref(props.value);
    const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''));
    //定义一个对象 init初始化
    const init = reactive({
        // selector: '#' + tinymceId.value, //富文本编辑器的id,
        base_url: '/tinymce',
        language_url: '/tinymce/langs/zh-Hans.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
        language: 'zh-Hans', //语言
        skin_url: '/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
        height: 340, //编辑器高度
        branding: false, //是否禁用“Powered by TinyMCE”
        elementpath: false,
        menubar: false, //顶部菜单栏显示
        image_dimensions: false, //去除宽高属性
        plugins: plugins, //这里的数据是在props里面就定义好了的
        toolbar: toolbar, //这里的数据是在props里面就定义好了的
        images_reuse_filename: true, //  使用图片本身的名称
        font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
        fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小
        // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
        paste_webkit_styles: 'all',
        paste_merge_formats: true,
        paste_data_images: true, // 允许粘贴图像
        nonbreaking_force_tab: false,
        paste_auto_cleanup_on_paste: false,
        file_picker_types: 'file',
        content_css: '/tinymce/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
        style_formats: [
            {
                title: '首行缩进',
                block: 'p',
                styles: { 'text-indent': '2em' }
            },
            {
                title: 'Headings',
                items: [
                    { title: 'Heading 1', format: 'h1' },
                    { title: 'Heading 2', format: 'h2' },
                    { title: 'Heading 3', format: 'h3' },
                    { title: 'Heading 4', format: 'h4' },
                    { title: 'Heading 5', format: 'h5' },
                    { title: 'Heading 6', format: 'h6' }
                ]
            },
            {
                title: 'Inline',
                items: [
                    { title: 'Bold', format: 'bold' },
                    { title: 'Italic', format: 'italic' },
                    { title: 'Underline', format: 'underline' },
                    { title: 'Strikethrough', format: 'strikethrough' },
                    { title: 'Superscript', format: 'superscript' },
                    { title: 'Subscript', format: 'subscript' },
                    { title: 'Code', format: 'code' }
                ]
            },
            {
                title: 'Blocks',
                items: [
                    { title: 'Paragraph', format: 'p' },
                    { title: 'Blockquote', format: 'blockquote' },
                    { title: 'Div', format: 'div' },
                    { title: 'Pre', format: 'pre' }
                ]
            },
            {
                title: 'Align',
                items: [
                    { title: 'Left', format: 'alignleft' },
                    { title: 'Center', format: 'aligncenter' },
                    { title: 'Right', format: 'alignright' },
                    { title: 'Justify', format: 'alignjustify' }
                ]
            }
        ]
    });

    //监听外部传递进来的的数据变化
    watch(
        () => props.value,
        () => {
            myValue.value = props.value;
            emits('getContent', myValue.value);
        }
    );
    //监听富文本中的数据变化
    watch(
        () => myValue.value,
        () => {
            emits('getContent', myValue.value);
        }
    );
    //在onMounted中初始化编辑器
    onMounted(() => {
        tinymce.init({});
    });
</script>

//详细插件列表请参见https://www.tinymce.com/docs/plugins/
//自定义生成请参见https://www.tinymce.com/download/custom-builds/