TinyMCE在Vue中的使用

185 阅读1分钟

TinyMCE

 TinyMCE是一个开源的所见即所得的HTML编辑器,界面相当清新,界面模拟本地软件的风格,顶部有菜单栏。支持图片在线处理,插件多,功能非常强大,易于集成,并且拥有可定制的主题。支持目前流行的各种浏览器,它可以达到微软Word类似的编辑体验。

今天就演示一下如何在vite搭建的vue3项目中进行导入并使用。

第一步肯定是先下载依赖

yarn add @packy-tang/vue-tinymce

npm install @packy-tang/vue-tinymce

富文本编辑器组件一般情况下,只会单个页面会用的到。所以就在需要的页面里引入即可。 这里就简单的哪App.vue文件举例。

<template>
  <div id="mytiny"></div>
</template>

<script setup>
import { onMounted } from "vue";
import tinymce from "tinymce"

onMounted(() => {
  tinymce.init({
    selector: '#mytiny'
  });
});
</script>

<style scoped>
#mytiny {
  width: 800px;
  height: 200px;
}
</style>