vue tinymce安装及使用

最新推荐文章于 2024-09-20 14:39:27 发布

、刷刷

最新推荐文章于 2024-09-20 14:39:27 发布

阅读量4.9k

点赞数 4

分类专栏： tinymce 文章标签： vue.js javascript 前端编辑器

本文链接：https://blog.csdn.net/qq_20111965/article/details/123548478

版权

tinymce 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何在Vue项目中安装和使用vuetinymce编辑器。步骤包括通过npm安装、拷贝tinymce文件到public目录、设置本地化、全局引入并配置插件，以及在页面中使用和配置编辑器。特别提到了中文本地化处理和插件的详细配置选项，可供开发者参考tinymce的官方文档进行详细配置。

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

vue tinymce安装及使用

vue tinymce安装及使用

vue tinymce安装及使用

参考

参考 vue-tinymce-example

第一步，安装

npm i tinymce @packy-tang/vue-tinymce

第二步，搬运tinymce

复制node_modules/tinymce目录下所有文件至public/目录下

cp node_modules/tinymce/ public/

复制后在根目录下public里

public/tinymce

第三步，全局引入的本地化处理

中文包或其他语言下载地址：官方语言包地址
将zh_CN.js文件直接放到public/tinymce/langs/目录下就可以了，配置时加上{language: ‘zh_CN’}的设置就能实现。
tinymce语言包位置

第四步，引入并挂载插件

main.js 增加代码

import tinymce from 'tinymce'

import VueTinymce from '@packy-tang/vue-tinymce'

Vue.prototype.$tinymce = tinymce // 将全局tinymce对象指向给Vue作用域下

Vue.use(VueTinymce) // 安装vue的tinymce组件

第五步，使用插件

在所需页面html里增加

<VueTinymce id="tinymce"  v-model="content" :setting="setting"></VueTinymce>

在js里增加

<script>

export default {

    name: 'app',

    data(){

        return {

            content: '123123123',

            setting: {

                menubar: false,

                toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",

                toolbar_drawer: "sliding",

                quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",

                plugins: "link image media table lists fullscreen quickbars",

                language: 'zh_CN', //本地化设置

                height: 350

            }

        }

    }

}</script>