在vue3.0项目中使用tinymce富文本编辑器
目录
- 一、安装
- 二、完整代码
- 三、事项说明
- 四、参考文档
之前看了好几篇关于 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", //https://github.com/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-z.cn/configure/editor-appearance.php --搜索“自定义菜单”// images_upload_url: '/apib/api-upload/uploadimg', //后端处理程序的url,建议直接自定义上传函数image_upload_handler,这个就可以不用了// images_upload_base_path: '/demo', //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/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-z.cn/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>
三、事项说明
这里的apiKey
是在github
上面看到的,学习在vue
项目中安装tinymce
富文本编辑器,拿过来就直接用了,建议还是去官网(https://www.tiny.cloud/)免费申请一个,说不定哪天这个apiKey
就不能用了
图片、视频等文件的上传后,经过后端处理一般都会整理放到对应的文件夹里面.
因为没有后端接口(后台),图片、视频上传的功能就实现不了,所以这里将上传的文件都转成base64
文本,来完成上传功能以达到一个展示效果
这两个一起配置,会出现上传按钮(下图),没有配置就没有
代码已上传至github
仓库地址:https://github.com/mrjimin/tinymce-vue3
Demo:https://mrjimin.github.io/tinymce-vue3/
四、参考文档
tinymce官网及文档:https://www.tiny.cloud/
tinymce中文文档:http://tinymce.ax-z.cn/
tinymce-vue在github上的项目:https://github.com/tinymce/tinymce-vue
在vue3.0+中使用tinymce及实现多图上传,文件上传等功能:https://www.cnblogs.com/huihuihero/p/13877589.html
在vue3.0项目中使用tinymce富文本编辑器相关推荐
- Vue项目中使用 tinymce 富文本编辑器的方法,附完整源码
来源 | https://blog.csdn.net/xingmeiok/article/deta 1.tinymce相关参考资料 tinymce版资料: http://tinymce.ax-z.cn ...
- vue2.0项目中使用Ueditor富文本编辑器应用中出现的问题
1.如何设置config中的内容 readonly:true,//只读模式wordCount:false,//是否开启字数统计enableAutoSave: false,//自动保存功能 重点:ena ...
- Vue3中使用Tinymce富文本编辑器(版本最新)
使用目录 前言 一.安装方法一(npm.yarn下载) 二.安装方法二(下载官网压缩包方法)--推荐 总结 前言 最近使用了WangEditor编辑器和Tinymce编辑器,使用方法如下(采用的编辑器 ...
- vue管理后台项目中使用wangEditor富文本编辑器
背景 公司需要做一个后台文章管理的模块,通过富文本编辑器编辑文章,在前端显示.调研了很久,决定使用wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.一些编辑器的说明. 开始 ...
- 在Vue中使用Tinymce富文本编辑器+上传图片到七牛
公司官网后台需要做一个上传新闻.公告的功能,自然而然就需要用到了富文本编辑器. UEditor.Simditor.wangEditor.CKEditor.TinyMCE.Quill,这是当前比较热门的 ...
- django项目中使用KindEditor富文本编辑器
先从官网下载插件,放在static文件下 前端引入 学习python中有什么不懂的地方,小编这里推荐加小编的python学习群:895,817, 687 有任何不懂的都可以在里面交流,还有很好的视频教 ...
- Vue 中使用 Tinymce 富文本编辑器
参考链接:https://www.cnblogs.com/wisewrong/p/8985471.html Tinymce : 从 word 粘贴过来还能保持绝大部分格式的编辑器 一. 下载 npm ...
- TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的 语 ...
- tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
最新文章
- 批量替换_批量替换图框
- 计算机c语言循环作业,C语言计算机作业编程.doc
- 二十年来一直没搞清楚的一个问题
- 额!Java中用户线程和守护线程区别这么大?
- 信息学奥赛一本通 1958:【12NOIP普及组】寻宝 | OpenJudge NOI 1.12 06 | 洛谷 P1076 [NOIP2012 普及组] 寻宝
- CSS文件开头到底声明@charset utf-8
- LaTeX技巧005:定制自己炫酷的章节样式实例
- 编译ROS-Academy-for-Beginners
- Linux上配置Gaussian的方法
- matlab函数作图格式,Matlab绘制函数图像函数示例汇总
- pert计算公式期望值_计划评审技术(PERT)求工期、标准差、方差以及概率
- linux鼠标手势软件,在Deepin Linux系统使用Easystroke鼠标手势会更方便工作
- 西藏:失落的旅游天堂?
- 考研英语——长难句语法
- 辰皇怎么过鸿蒙,最新版 鸿蒙副本快速通关和爆神符攻略
- 002:Python爬虫Urllib库全面分析
- 造血干细胞扩增、转染以及基因编辑优化解决方案
- javascript学习笔记——Ajax、跨资源共享(CORS)、图像Ping、JSONP、Comet、Web Socket
- Django-登陆验证
- Android基本常识