赞
踩
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。
TinyMCE的优势:
开源可商用,基于LGPL2.1
插件丰富,自带插件基本涵盖日常所需功能(示例看下面的Demo-2)
接口丰富,可扩展性强,有能力可以无限拓展功能
界面好看,符合现代审美
提供经典、内联、沉浸无干扰三种模式(详见“介绍与入门”)
对标准支持优秀(自v5开始)
多语言支持,官网可下载几十种语言。
经典模式:基于表单,使用表单某字段填充内容,编辑器始终作为表单的一部分。
内联模式(inline):将编辑视图与阅读视图合二为一,当其被点击后,元素才会被编辑器替换,而不是编辑器始终可见。
沉浸无干扰模式(distraction-free):所谓‘沉浸模式’感觉就是TinyMCE强行将inline模式解释成了另一种风格。我们也不要揭穿它,假装不知道就好了。
重要的是,当使用内联模式时,TinyMCE没有使用iframe将编辑的内容与页面隔离,这样做的好处是内容可继承页面的CSS样式。编辑的内容将完全按照页面规定好的样式显示,从而提供真正的“所见即所得”的编辑体验。
要在Vue 3.3.4 + TypeScript项目中集成TinyMCE,可以按照以下步骤进行操作:
使用npm或yarn安装最新版本的TinyMCE:
pnpm add tinymce @tinymce/tinymce-vue
- <template>
- <div class="container">
- <div class="container-tinymce">
- <Editor ref="tinymceEle" id="tinymceEle" :init="{plugins: 'link image code table'}" v-model="content"></Editor>
- </div>
- </div>
- </template>
-
- <script setup lang="ts">
- import Editor from '@tinymce/tinymce-vue'
- let content:any = ref('')
- </script>
-
- <style scoped lang="less">
- </style>
看了好多资料,有的写的很复杂,实践下来,就是这么简单,更多tinymce插件集成待补充~
待补充
vue3 中 tinymce+tinymce-vue 富文本编辑器使用_vue富文本编辑器插件_MENGCAIXIU520的博客-CSDN博客
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。