前言

在vue3项目中，发现了这个开箱即用的vue3-tinymce，比之前vue2使用的 tinymce、@tinymce/tinymce-vue 少了繁琐的配置。

代码

1、npm 下载 vue3-tinymce

npm install vue3-tinymce -S

2、创建个RichText.vue组件进行封装

<template><div><vue3-tinymce v-model="myValue" :setting="setting" /></div>
</template><script lang="ts" setup>
// 引入组件
import Vue3Tinymce from '@jsdawn/vue3-tinymce';
import { reactive, toRefs, watch } from 'vue';const props = defineProps({value: {type: String,default: () => {return '';},},
});const emits = defineEmits({input: null,
});const { getters } = useStore();const { myValue, setting } = toRefs(reactive({myValue: props.value,// editor 配置项setting: {height: 400, // editor 高度language_url: '/tinymce/langs/zh_CN.js',language: 'zh_CN',plugins:'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help  autosave autoresize',toolbar:' fontselect fontsizeselect | forecolor backcolor bold italic underline strikethrough link | image media alignleft aligncenter alignright alignjustify  | \code undo redo restoredraft | cut copy paste pastetext  anchor | \outdent indent | styleselect formatselect  |  bullist numlist | \blockquote subscript superscript removeformat | table  charmap hr pagebreak insertdatetime print preview | fullscreen ',branding: false,paste_data_images: true, // 设置为“true”将允许粘贴图像，而将其设置为“false”将不允许粘贴图// plugin_preview_width: 375, // 预览宽度 plugin_preview_height: 668,content_style: `img {max-width:100%;height:auto}`,images_upload_handler: (blobInfo: any, success: any, failure: any) => {const img = 'data:image/jpeg;base64,' + blobInfo.base64();console.log('img', img);if (blobInfo.blob().size > 1000000) {failure("单张图片大小不能超过1000k");return;} else {success(img);}},...},})
);watch(() => props.value,(newValue) => {myValue.value = newValue;}
);watch(() => myValue.value,(newValue) => {emits('input', newValue);}
);</script>
<style lang="scss" scoped>
// 在使用过程中发现以上的setting下的height不生效，可以在这里深度的修改样式。
:deep(.tox-tinymce) {min-height: 400px;
}
</style>

3、在父组件进行调用

<template><RichText :value="richValue" @input="input" />
</template>
<script lang="ts" setup>
import { ref } from "vue";
const richValue = ref('我是初始化的数据...');const input = (emit)=>{richValue.value = emit;
}
</script>

中文参考文档：http://tinymce.qscoding.com/

vue3 如何使用 vue3-tinymce相关推荐

【Vue3.0】Vue3.0简介-指令-过滤器-案例D2.0
[Vue3.0]Vue3.0简介-指令-过滤器-案例一.Vue3.0简介 1.1.vue3.0与vue2.0对比 vue2.0中绝大多数的API与特性,在vue3.0中同样支持.但是vue3.0中新 ...
Vue3+vite，vue3基本使用文档
文章目录 1. vite 2. 创建vue3.x项目 2.1 使用vite创建的项目 2.2 使用vue-cli创建vue3.x项目 3. vue3.x 基本使用 3.1 响应式基础 3.1.1 re ...
html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...
/** * @Desc Vue3.0虚拟滚动条组件V3Scroll * @Time andy by 2021-01 * @About Q:282310962 wx:xy190310*/ props: ...
中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？
Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg:v-bind:class ...
【Vue3】搭建vue3项目以及环境
前言本来是打算结合vue3和spring boot出一期登录项目实战的,但是由于vue3没有我想象的简单,最后阉割了下,后面我们通过uniapp小程序出一期一.安装环境创建vue3项目确保你安装 ...
vue3.x +Cesium vue3.x中安装使用cesium
Vue3.x 项目中如何使用Cesium构建三维地图项目本文列举两种常用使用方法: 1.使用vue-cli-plugin-cesium 插件安装cesium(配置较为简单) 2.安装cesium 手 ...
vue3.2、vue3和vue2不同之处
缩写记忆: tv code2&tf spa tv code2: 其中d是0.object.defineproperty=> proxy 1.diff算法优化(添加标记,增量diff).2 ...
Vue3教程：Vue3 开源商城项目重构计划正式启动！
我打算用 Vue3 写一个商城项目,目前已经开始着手开发,测试完成后正式开源到 GitHub,让大家也可以用现成的 Vue3 大型商城项目源码来练练手. 1 Vue3 来了今年上半年,我用 Vue ...
手摸手带你玩转Vue3——Vue2升级Vue3
今年年初,尤大大公布了一个重磅消息,将Vue3作为Vue的默认版本. 这无疑不是对我们开发人员的内卷煽风点火! vue默认版本改动意味着,官方将会把Vue研发重心放到vue3上,vue2也开始走下坡路 ...
使用vite安装vue3项目，vue3安装router和vuex
目录安装vite/创建vue3项目安装router 安装vuex vite+vue3的axios配置及跨域安装vite/创建vue3项目推荐vite+vue3+elementplus教程,看这 ...

vue3 如何使用 vue3-tinymce

前言

代码

vue3 如何使用 vue3-tinymce相关推荐

最新文章

热门文章