tinymce在vue中使用

最新推荐文章于 2025-04-23 23:06:01 发布

cxy_12345

最新推荐文章于 2025-04-23 23:06:01 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/cxy_12345/article/details/114834644

本文介绍了如何在Vue2.0环境下安装并使用TinyMCE编辑器，包括将tinymce文件夹复制到public/static下，以及代码实现和路径配置的注意事项，并提供了中文语言包的获取链接及最终成果的截图展示。

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

vue2.0环境

1、安装

npm install --save "@tinymce/tinymce-vue@^3"
npm install tinymce -S

2、将node_modules文件夹中tinymce文件夹复制到public/static 下

3、具体代码参考一下文件，注意路径参照自己的写，zh-CH文件见http://tinymce.ax-z.cn/static/tiny/langs/zh_CN.js

<template>
    <div class='tinymce'>
        <h1>tinymce</h1>
        <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
<!--        <div v-html='tinymceHtml'></div>-->
    </div>
</template>

<script>
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/silver/theme'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/plugins/image'
    import 'tinymce/plugins/link'