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>