海南网站建设公司哪家好,网站不备案支付宝接口,南宁哪里有网站建设培训班,平台网站做代理商引言
富文本编辑器有很多#xff0c;对比了一下#xff0c;还是决定用tinymce#xff08;号称宇宙最强#xff09;#xff0c;基础的插件确实好用#xff0c;但是一些更好用的插件#xff0c;比如格式刷等都是高级版#xff08;付费#xff09;#xff0c;当然也有人…引言
富文本编辑器有很多对比了一下还是决定用tinymce号称宇宙最强基础的插件确实好用但是一些更好用的插件比如格式刷等都是高级版付费当然也有人说去找不付费的富文本编辑器那就考虑替换成本了 传送门 tinymce中文文档 api英文版 本文项目的完整代码 基础概念优势 如何引入vue直接看文档就行 话不多说先看效果图 预览效果 完整配置代码放在传送门文末
一、如何使用免费格式刷
找到 tinymice 的配置文件分别在二维数组 plugins 、toolbar 安原有格式增加工具单词名 formatpainter 下载格式刷 js 文件 传送门 将格式刷文件 (包含下载的目录), 放到如下目录 项目 \public\vendor\dcat-admin\dcat\plugins\tinymce\plugins 大功告成
二、上传视频 图片 配置
先看效果:
图片上传 视频上传
代码展示 // 图片上传const example_image_upload_handler (blobInfo, progress) new Promise((resolve, reject) {const xhr new XMLHttpRequest();const url ${process.env.BASE_URL} api/upload/multipartFilexhr.withCredentials false;xhr.open(POST, url);xhr.upload.onprogress (e) {progress((e.loaded / e.total) * 100);};xhr.onload () {if (xhr.status 403) {reject({message: HTTP错误 xhr.status,remove: true});return;}if (xhr.status 200 || xhr.status 300) {reject(HTTP错误 xhr.status);return;}const json JSON.parse(xhr.responseText);if (!json || typeof json.location ! string) {reject(无效的JSON格式 xhr.responseText);return;}const location ${process.env.BASE_URL} api/static json.location// http: //192.168.10.231:8080/static// resolve(json.location);resolve(location);};xhr.onerror () {reject(由于XHR传输错误图像上传失败。错误代码 xhr.status);};const formData new FormData();formData.append(file, blobInfo.blob(), blobInfo.filename());xhr.send(formData);});const example_file_picker_callback (callback, value, meta) {if (meta.filetype media) {const input document.createElement(input);input.setAttribute(type, file);const that this;input.onchange async function () {const file this.files[0];const isValid await validateVideo(file);if (isValid) {var formData new FormData();formData.append(file, file); // 假设file变量是你的视频文件$.ajax({url: ${process.env.BASE_URL} api/upload/multipartFile,type: POST,data: formData,processData: false,contentType: false,success: function (response) {callback(${process.env.BASE_URL} api/static response.location);},error: function (xhr, status, error) {callback(error);}});} else {callback();}};input.click();}}三、自定义具体的菜单栏–格式
有一个需求是要去除默认是字体选项fontfamily 效果图如下 具体配置
menu: {format: {title: Format,// blocks fontfamilyitems: bold italic underline strikethrough superscript subscript codeformat | styles fontsize align lineheight | forecolor backcolor | language | removeformat},},四、完整的项目初始化配置
主要要展示 plugins 和 toolbar 、 menu tinyMCE.init({selector: #mytextarea, // 选择器要初始化的textarea的ID// 其他配置项auto_focus: true,branding: false,language_url: window.PPATH /libs/tinymce/langs/zh_CN.js,language: zh_CN,toolbar: true, //工具栏menubar: true, //菜单栏branding: false, //右下角技术支持inline: false, //开启内联模式elementpath: false,min_height: 400, //最小高度max_height: 500, //高度skin: oxide,toolbar_sticky: true,visualchars_default_state: true, //显示不可见字符image_caption: true,paste_data_images: true,relative_urls: false,// remove_script_host : false,removed_menuitems: newdocument, //清除“文件”菜单plugins: formatpainter,lists, advlist,autolink,autoresize,charmap,code,codesample,emoticons,fullscreen,image,media,pagebreak,preview,searchreplace,table,visualchars,wordcount, //依赖lists插件toolbar1: undo redo | blocks | bold italic indent outdent alignleft aligncenter alignright | bullist numlist ,toolbar2: formatpainter emoticons alignjustif fullscreen image insertdatetime media preview searchreplace textcolor wordcount,menu: {format: {title: Format,// blocks fontfamilyitems: bold italic underline strikethrough superscript subscript codeformat | styles fontsize align lineheight | forecolor backcolor | language | removeformat},},images_upload_handler: example_image_upload_handler,// 视频上传----file_picker_callback: example_file_picker_callback,setup: function (editor) {// 省略。。。。},});完整的项目代码:
本文项目的完整代码
综上所述TinyMCE是一个功能强大、易于集成和高度可定制的富文本编辑器适用于各种在线编辑场景如内容管理系统、论坛、博客和电子邮件客户端等。
