vue-element-admin使用tinymce富文本编辑器

最新推荐文章于 2024-08-02 13:58:17 发布

45519021

最新推荐文章于 2024-08-02 13:58:17 发布

阅读量8.4k

点赞数 8

文章标签： vue.js java vue upload

本文链接：https://blog.csdn.net/qq_20649143/article/details/106031212

版权

本文档详细介绍了在vue-element-admin中集成tinymce富文本编辑器的步骤，包括安装tinymce-vue，复制skins目录，下载语言包，创建组件，引用模版，以及展示了如何在Spring Boot后端实现文件上传和图片路径映射，为新手提供了参考。

摘要由CSDN通过智能技术生成

vue-element-admin使用tinymce富文本编辑器

- 新手使用tinymace富文本编辑器的历程

新手使用tinymace富文本编辑器的历程

环境：vue-element-admin
1、安装tinymce-vue

npm install @tinymce/tinymce-vue -S

2、下载tinymce

npm install tinymce -S

3、下载完可以先在public下面建个目录tinymce，下载tinymce完成后在node_modules 中找到 tinymce/skins目录，将其复制到public\tinymce目录下面
在这里插入图片描述
4、下载语言包下载地址

5、在componets下面新建目录（目录名：tinymce）

6、在刚刚新建的目录下面新建index.vue文件，并把下面的代码复制进去

<template>
    <div>
        <editor id="tinymce" v-model="value" :init="init"></editor>
    </div>
</template>

<script>
//引入基础文件：
    import tinymce from 'tinymce/tinymce'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/silver'
    import 'tinymce/plugins/image'// 插入上传图片插件
    import 'tinymce/plugins/link'// 插入链接
    import 'tinymce/plugins/code'// 插入代码
    import 'tinymce/plugins/preview'// 插入预览
    import axios from 'axios'
    export default {
   
        name: "tinymce",
        components:{
   
            Editor
        },
        props:{
   
            curValue:{
   
                type:String,
                default:''
            }
        },
        data(){
   
            return{
   
                init:{
   
                    language_url: '/tinymce/langs/zh_CN.js',// 语言包的路径
                    language: 'zh_CN',//语言
                    skin_url: '/tinymce/skins/ui/oxide',// skin路径
                    height: 500,//编辑器高度
                    branding: false,//是否禁用“Powered by TinyMCE”
                    menubar: false,//顶部菜单栏显示
                    elementpath: false,