vue3 使用富文本tinymce-vue

一、安装
npm install @tinymce/tinymce-vue -S

二、封装建一个组件

<template><div><Editorapi-key="xxxxx"tinymceScriptSrc="/tinymce/tinymce.min.js":init="{language: 'zh_CN',height: 500,paste_data_images: true, // 允许粘贴图像paste_webkit_styles: 'all',automatic_uploads: true,convert_urls: false,image_caption: true,content_style: `*{margin:0;padding:0;}body{font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB,Microsoft Yahei, sans-serif !important;}h1,h2,h3,h4,h5,h6,h7{font-size: 18px;}p,font{font-size: 16px;font-weight: 400;color: #262626;line-height: 24px;text-align: justify;word-break: break-all;letter-spacing: 1.5px;}p{text-indent:0;margin:0;}strong span{display: block;}div img,p img,img,span img{width:50% !important;height:auto;text-align:center;border-radius: 4px;display: block;margin: 15px auto 0 auto;}figcaption{text-align:center !important;margin: 20px 0 !important;}figure{margin: 0 auto !important;}`,toolbar: ['image media video bold fontsize forecolor backcolor italic underline strikethrough styleselect fontsizeselect alignleft aligncenter alignright alignjustify outdent indent lineheight cut copy outdent indent undo redo  blockquote table preview fullscreen',],menubar: false,branding: false,fontsize_formats: '11px 12px 14px 16px 17px 18px 24px 36px 48px',lineheight_formats: '10px 20px 30px 40px 50px 60px',imagetools_toolbar: 'imageoptions',file_picker_callback: file_picker_callback,paste_preprocess: paste_preprocess,init_instance_callback: init_instance_callback,images_upload_handler: example_image_upload_handle,urlconverter_callback: urlconverter_callback,}"v-model="content":plugins="['image', 'fullscreen', 'media', 'preview', 'paste']"@change="handleChange"></Editor></div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import Editor from "@tinymce/tinymce-vue";
import { uploadFiles } from "@/utils/funtional";
import axios from "axios";
import { message } from "ant-design-vue";let props = defineProps<{readOnly?: boolean;value: string;
}>();let emits = defineEmits(["handleChange"]);let content = ref<string>();
let editorRef: any;watch(() => props.value,(val) => {content.value = val;},{deep: true,immediate: true,}
);
// 图片直接粘贴
const paste_preprocess = (_: any, args: Record<string, any>) => {if (args.content.indexOf("xiumi") !== -1) {return args.content;}const styleTag = /\s+style="[^"]*"/gi;args.content = args.content.replace(styleTag, () => {return "";}).replace(/(&nbsp;)|(<br>)|(<br\/>)/gi, () => {return "";});
};// 文件上传
const file_picker_callback = (callback: (key: string) => void,value: string,meta: Record<string, string>
) => {if (meta.filetype === "image") {if (!value) return;axios({url: value,method: "get",responseType: "arraybuffer",}).then((res) => {let code = btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte),""));let a = document.createElement("a");a.setAttribute("href", "data:image/png;base64," + code);a.download = "image" + new Date().getTime();a.click();a.remove();});}if (meta.filetype === "media") {let fileInput = document.createElement("input");fileInput.setAttribute("type", "file");fileInput.setAttribute("accept", ".mp4");fileInput.click();fileInput.addEventListener("change", async (e: any) => {let url = await uploadFiles(e.target.files[0]);callback(url);fileInput.remove();});}
};
// 图片上传
const example_image_upload_handle = async (blobInfo: Record<string, any>,success: (url: string) => void,failFun: (mes: string) => void
) => {let maxSize = blobInfo.blob().size / 1024 / 1024;if (maxSize > 10) {return failFun("请上传10M以内的图片");}let url = await uploadFiles(blobInfo.blob());success(url);
};const urlconverter_callback = (url: string) => {return url;
};const init_instance_callback = (ref: any) => {editorRef = ref;if (props.readOnly) {editorRef.setMode("readonly");}
};const handleChange = () => {emits("handleChange", content.value);
};
</script>

三、页面引入使用

<editor :value="value"/>

完成

注意：
用的时候偶尔会出现以下报错，服务器上找不到富文本插件的js，导致富文本加载不出来

解决办法：
在

里面找到

复制到

到官网去下来中文包，建一个langs的文件夹，放在里面（需要中文的情况）

然后页面引入

tinymceScriptSrc="/tinymce/tinymce.min.js"

这样富文本加载会变快，也不会出现找不到js文件的情况了

vue3 使用富文本tinymce-vue相关推荐

vue使用富文本插件vue elemnt-tiptap和vue-quill-editor
这两天由于项目要实现新闻发布的功能,所以上github和gitee找了一些项目,发现都是用富文本插件编译成html来实现功能.经过尝试和寻找,我使用了vue elemnt-tiptap和vue-qui ...
Vue3使用富文本框（wangeditor）
毕业涉及中使用到了富文本框,所以学习使用了wangeditor富文本框,现进行总结 1.安装 npm install @wangeditor/editor --savenpm install @wan ...
vue3使用富文本编辑器wangEditor-v5（未使用composition api写法）
效果安装安装核心库和其vue组件库 yarn add @wangeditor/editor yarn add @wangeditor/editor-for-vue@next 使用v-model封装 ...
【wangEditor富文本编辑器】富文本三种使用方法，html使用富文本，html套vue脚手架使用富文本，vue使用富文本【简单易用，复制即用】
前言富文本编辑器功能是很多人都要使用的市面上有很多的编辑器可以供选择,但是很多编辑器会有点复杂,或者文档看起来难受. 我最近做了一个需求,是需要在html文件上写富文本编辑器. 但是我看了以前用的 ...
vue3使用富文本编辑器vueQuill
npm install @vueup/vue-quill@alpha --save 在main.js中引入 import { createApp } from 'vue' import { Quill ...
vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
学习日志day46（2021-09-10）（1、使用富文本编辑器simditor）
学习内容:学习JavaWeb(Day46) 1.使用富文本编辑器simditor 1.使用富文本编辑器simditor (1)常见的富文本编辑器有simditor.CKEditor.tinymce.k ...
Django 3.2.5博客开发教程:使用富文本编辑器添加数据
在Django admin后台添加数据的时候,文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码,这十分吃力,也没法上传图片和文件.这显然不是我等高大上程序猿想要的. 为提升效率,我们可以使 ...
Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...

vue3 使用富文本tinymce-vue

vue3 使用富文本tinymce-vue相关推荐

最新文章

热门文章