700字范文 > 在vue3.0项目中使用tinymce富文本编辑器

在vue3.0项目中使用tinymce富文本编辑器

时间：2019-10-23 16:15:41

之前看了好几篇关于vue项目中使用tinymce的文章，import引入大量tinymce插件，/node_modules/tinymce下的部分文件搬运到public文件夹下（可能是以前只能用这种方法来实现吧），对于我来说，或者之前没用过tinymce，觉得这样操作起来就会麻烦，一不小心就可能会出错，后然直接看官方文档（英文），发现其实不需要什么其他的操作，简单粗暴直接搞定

一、安装

使用npm安装tinymce-vue包

npm install --save "@tinymce/tinymce-vue@^4"

会安装@tinymce和tinymce这两个包，不需要再单独安装tinymce包

注意：
tinymce-vue包的版本 4支持 Vue3.0版本，但不支持vue2.0版本。
对于 Vue2.0项目，就要安装tinymce-vue版本 3 （npm install --save “@tinymce/tinymce-vue@^3”）

二、完整代码

直接来写完后的代码,代码上都有注释,需要的直接复制拿走，那里要改动的可以看文档加以修改·

<template><p class="tipx">最开始引入tinymce时是这个页面写的，/src/components/Tinymce.vue是基于这里的内容封装分出去的</p><div class="tinymce-boxz"><Editor v-model="content" :api-key="apiKey" :init="init" /></div></template><script>import Editor from "@tinymce/tinymce-vue";import {reactive, ref, toRefs } from "@vue/reactivity";export default {name: "About",components: {Editor,},setup() {const content = ref("默认文字 hello word");const tiny = reactive({apiKey: "qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc", ///tinymce/tinymce-vue/blob/main/src/demo/views/Iframe.vueinit: {language: "zh_CN", //语言类型placeholder: "在这里输入文字", //textarea中的提示信息min_width: 320,min_height: 220,height: 500, //注：引入autoresize插件时，此属性失效resize: "both", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号branding: false, //tiny技术支持信息是否显示// statusbar: false, //最下方的元素路径和字数统计那一栏是否显示// elementpath: false, //元素路径是否显示font_formats:"微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", //字体样式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 textpattern autosave emoticons", //插件配置 axupimgs indent2emtoolbar: ["fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | blockquote subscript superscript removeformat ","styleselect formatselect fontselect fontsizeselect | table image axupimgs media emoticons charmap hr pagebreak insertdatetime selectall visualblocks searchreplace | code print preview | indent2em lineheight formatpainter",], //工具栏配置，设为false则隐藏// menubar: "file edit my1", //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-/configure/editor-appearance.php --搜索“自定义菜单”// images_upload_url: '/apib/api-upload/uploadimg', //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了// images_upload_base_path: '/demo', //相对基本路径--关于图片上传建议查看--http://tinymce.ax-/general/upload-images.phppaste_data_images: true, //图片是否可粘贴//此处为图片上传处理函数images_upload_handler: (blobInfo, success, failure) => {// 这里用base64的图片形式上传图片,let reader = new FileReader(); //本地预览reader.readAsDataURL(blobInfo.blob());reader.onloadend = function () {const imgbase64 = reader.result;success(imgbase64);};},file_picker_types: "file image media", //file image media分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。想屏蔽某个插件的上传就去掉对应的参数// 文件上传处理函数file_picker_callback: function (callback, value, meta) {// 使用案例http://tinymce.ax-/general/upload-images.php// meta.filetype //根据这个判断点击的是什么file image medialet filetype; //限制文件的上传类型,需要什么就添加什么的后缀if (meta.filetype == "image") {filetype = ".jpg, .jpeg, .png, .gif, .ico, .svg";} else if (meta.filetype == "media") {filetype = ".mp3, .mp4, .avi, .mov";} else {filetype =".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4, .jpg, .jpeg, .png, .gif, .ico, .svg";}let inputElem = document.createElement("input"); //创建文件选择inputElem.setAttribute("type", "file");inputElem.setAttribute("accept", filetype);inputElem.click();inputElem.onchange = () => {let file = inputElem.files[0]; //获取文件信息// 所有都转成base64文件流,来自官方文档https://www.tiny.cloud/docs/configure/file-image-upload/#file_picker_callbacklet reader = new FileReader();reader.readAsDataURL(file);reader.onload = function () {// Note: Now we need to register the blob in TinyMCEs image blob// registry. In the next release this part hopefully won't be// necessary, as we are looking to handle it internally.let id = "blobid" + new Date().getTime();let blobCache = tinymce.activeEditor.editorUpload.blobCache;let base64 = reader.result.split(",")[1];let blobInfo = blobCache.create(id, file, base64);blobCache.add(blobInfo);// call the callback and populate the Title field with the file namecallback(blobInfo.blobUri(), {title: file.name });};};},},});return {content,...toRefs(tiny),};},};</script><style scoped>.tinymce-boxz > textarea {display: none;}</style><style>/* 隐藏apikey没有绑定当前域名的提示 */.tox-notifications-container .tox-notification--warning {display: none !important;}.tox.tox-tinymce {max-width: 100%;}</style>