ant design vue2.X 使用tinymce

alan_ji198573

已于 2023-03-05 22:48:27 修改

阅读量546

点赞数 1

文章标签： vue.js javascript 前端

于 2023-02-25 17:19:04 首次发布

本文链接：https://blog.csdn.net/alan_ji198573/article/details/129217101

版权

该文指导如何在Vue项目中安装和配置TinyMCE富文本编辑器，包括从npm安装，将插件移动到public目录，设置中文语言包，以及自定义配置如工具栏、字体和上传图片处理。此外，还展示了如何创建和使用组件以及监听内容变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

去官网下载中文文件包 zh_CN.js

安装tinymce：

 npm install tinymce -S --registry=https://registry.npm.taobao.org --legacy-peer-deps

将node_modules/tinymce目录下所有文件至public/目录下：\public\static\tinymce\

完成后删除tinymce包：

npm uninstall tinymce -S

添加npm包tinymce/tinymce-vue引用[由于采用全局index.html引入js文件，因此忽略此步]

--vue2.0版本
npm install @tinymce/tinymce-vue@3.0.1 -S --registry=https://registry.npm.taobao.org --legacy-peer-deps
--vue3.0版本
npm install @tinymce/tinymce-vue -S --registry=https://registry.npm.taobao.org --legacy-peer-deps

静态引用js：打开\public\index.html，添加如下代码

<script src="<%= BASE_URL %>static/tinymce/tinymce.min.js"></script>

新建组件，在项目新建页面：components\Tinymce\imcoder-tinymce.vue

<!-- 富文本 -->
<template>
    <div class="tinymce-class">
        <editor v-model="content" :init="init" :disabled="disabled"></editor>
    </div>
</template>

<script>
import Editor from "@tinymce/tinymce-vue";

export default {
    components: {
        Editor
    },
    props: {
        value: {
            type: String,
            default: ""
        },
        disabled: {
            type: Boolean,
            default: false
        },
        plugins: {
            type: [String, Array],
            default:
                "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave autoresize"
        },
        toolbar: {
            type: [String, Array],
            default:
                "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent formatpainter | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap hr pagebreak insertdatetime | fullscreen preview"
        }
    },
    data() {
        return {
            //初始化配置
            init: {},
            content: this.value
        };
    },
    created() {
        let that = this
        this.init = {
            //selector: '#mytextarea',
            //menubar: true, // 菜单栏显隐
            language_url: "../static/tinymce/langs/zh_CN.js",
            language: "zh_CN",
            skin_url: "../static/tinymce/skins/ui/oxide",
            //skin_url: '../../static/tinymce/skins/ui/oxide', // vue-cli2.x
            //content_css: '../../static/tinymce/skins/content/default/content.css',// vue-cli2.x
            height: '620',
            // min_height: '620',
            // max_height: '620',
            toolbar_mode: "wrap",//是否折叠工具栏
            plugins: this.plugins,
            toolbar: this.toolbar,
            content_style: "p {margin: 5px 0;}",
            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;",
            branding: false,
            resize: false,//禁止拖拽改变大小
            // 对话框支持拖动
            draggable_modal: true,
            // 开启拖入功能，true：禁止拖入
            paste_block_drop: true,
            block_unsupported_drop: false,
            // 允许粘贴图片
            paste_data_images: true,
            images_file_types: '*.*',
            // // 是否开启自动保存，退出页面或刷新时提示
            // autosave_ask_before_unload: true,
            // // 自动保存时间间隔 秒
            // autosave_interval: '30s',
            // // 本地保存数据的有效期 分
            // autosave_retention: "5m",
            // 图片上传
            images_upload_handler: (blobInfo, success, failure) => {
                // const img = 'data:image/jpeg;base64,' + blobInfo.base64()
                // success(img)

                const formData = new FormData()
                formData.append('file', blobInfo.blob())
                reserveTableFoodDescribe(formData).then(res => {
                    if (res.code === '10000') {
                        const file = res.data
                        success(file.url)
                        return
                    }
                    failure('上传失败')
                }).catch(() => {
                    failure('上传出错')
                })
            },
            init_instance_callback: function (editor) {
                //5.0版本所有组件事件，均在此添加（keyup\keydown\Change……）
                editor.on('Change', function (e) {
                })
            },
        }
    },
    mounted() {
    },
    methods: {

    },
    watch: {
        value(newValue) {
            this.content = newValue;
        },
        content(newValue) {
            this.$emit("input", newValue);
        }
    }
};
</script>
<!-- <style scoped lang="scss"> -->
<style>
.tinymce-class{
  margin:0px;
  padding:0px;
  position:absolute;
  width: calc(100% - 0px);
  height:82vh;
  left: 0px;
  top: 56px;
  bottom:0px;
}
</style>

vue页面使用imcoder-tinymce.vue组件

import Editor from "@/components/Tinymce/imcoder-tinymce.vue";
components: {
        Editor
    }
<editor v-model="content"></editor>

最终效果：