vue中如何使用TinyMCE

原创

已于 2024-02-02 11:20:40 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #ecmascript #前端框架

于 2023-05-22 15:13:00 首次发布

本文介绍了如何在Vue项目中安装和初始化TinyMCE，包括选择合适的版本、删除无用组件、设置语言包、定制工具栏和菜单栏，以及添加插件和监听生命周期事件。此外，还讨论了异步加载TinyMCE以优化项目性能。

<教程:>(TinyMCE | Documentation)

安装tinyMce 并且初始化

首先需要新建一个vue项目

vue create tinymce-editor

按照下图选择即可

然后删除掉没有用的组件，保持代码整洁可扩展(比如logo，还有helloworld.vue)

然后访问官网Free WYSIWYG HTML Editor | Download TinyMCE or Get Cloud Version | TinyMCE
这里选择 here 选择 4.x的版本，因为6版本刚出肯定是不合适的，5的话和vue2.x 好像是有些小问题，所以这里我们选择4.x的版本。
然后点击下载即可
解压到我们目标文件中的publc下
然后再index.html目录下添加我们的tinymce.min.js的路径
然后在APP.vue目录下使用

<template>
  <div id="app">
    <textarea id="mytextarea"></textarea>
  </div>
</template>

<script>

export default {
  name: 'App',
  mounted() {
    tinymce.init({
      selector: '#mytextarea',
    });
  }
}
</script>

结果如下
这样就代表引入完成了。