WordPress支持ppt一键导入

WordPress⽀持ppt⼀键导⼊
项⽬需求可发布⽂章需求涉及到富⽂本编辑器经过查阅我选择了较为简便不需要后端⽀持可独⽴完成的tinymce框架官⽅⽂档也是相当完整虽然都是全英⽂但是有强⼤的⾕歌~ 没问题的
编辑器，tinymce 不需要后端配合只需要把最终编辑完的富⽂本传给后端就好很简单
下载tinymce
npm install tinymce
安装tinymce-vue
npm install @tinymce/tinymce-vue
下载完成后在node_modules 中找到 tinymce/skins⽬录，复制下来放置static
下载中⽂语⾔包
tinymce提供了很多的语⾔包，这⾥我们下载语⾔包全英⽂不懂⾃⼰⾕歌打开翻译⼀下选择下载zh_CN
初始化
页⾯引⼊⽂件
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
注意tinymce的路径
注册使⽤
<editor :init="init" v-model="content" class="issue-editor"></editor>
components:{ editor: Editor}
初始化配置项官⽅⽂档
有使⽤powerPaste 将⽂件powerPaste 复制下来放置static 引⼊即可使⽤
accept: "image/jpeg, image/png", //设置图⽚上传规则
maxSize: "2097152", //设置图⽚⼤⼩
height:'500',//设置编辑框⼤⼩
content:'',//编辑的内容可以设置监听查看编辑输⼊的值
init: {undefined
content_style: `
* { padding:0; margin:0; }
html, body { height:100%; }
img { max-width:100%; display:block;height:auto; }
a { text-decoration: none; }
iframe { width: 100%; }
p { line-height:1.6; margin: 0px; }
table { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
.mce-object-iframe { width:100%; box-sizing:border-box; margin:0; padding:0; }
ul,ol { list-style-position:inside; }
`,///设置富⽂本的样式初始化
skin_url: "/static/skins/ui/oxide", // tinymce UI引⼊
language_url: "/static/zh_CN.js", //转中⽂⽂件
language: "zh_CN",
browser_spellcheck: true, // 拼写检查
branding: false, // 去⽔印
elementpath: false, //禁⽤编辑器底部的状态栏
statusbar: false, // 隐藏编辑器底部的状态栏
paste_data_images: true, // 允许粘贴图像
menubar: false, // 隐藏最上⽅menu}
// plugins:
// "image wordcount ",
// toolbar: {undefined
// type: [String, Array],
// default:
// "undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat"
// },
plugins:
"advlist link image code textcolor paste textcolor colorpicker",
// plugins 配置必须有paste 否则图⽚⽆法黏贴成功或者改paste 为powerpaste 可不⽤引⼊paste
// paste只能实现⽂字或者图⽚单独黏贴
// powerpaste 可以实现⽂字和图⽚⼀起黏贴（本地图⽚会变成base64直接呈现）需要powerPaste⽂件的可私聊我要
toolbar_items_size: "small",
block_formats:
"Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;",
toolbar1:
"table |insertfile undo redo | formatselect | link unlink | uploadimg image media | name", // ⼯具栏1
toolbar2:
" fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent | removeformat ", // ⼯具栏2
// 引⼊powerpaste 注册改plugins配置中的 paste为powerpaste
external_plugins: {undefined
powerpaste: "/static/skins/powerpaste/plugin.js"
},
powerpaste_allow_local_images: true, //powerpaste允许黏贴
powerpaste_word_import: "clean", //powerpaste黏贴的样式获取⽅式
// setup: editor => { //⾃定义添加按钮
// editor.ui.registry.addButton("name", {undefined
// tooltip: "选择标签",
// text: "选择标签",
// onAction: res => {undefined
// console.log(res);
// belDialogShow=true;
// },
// });
// },
//粘贴事件数据官⽅⽂档
//黏贴内容时触发获取元素可⾃定义添加内容
paste_postprocess: function(pluginApi, data) {undefined
// console.log(data);
// // Apply custom filtering by mutating data.node
// const additionalNode = document.createElement("div");
// console.log(additionalNode);
// additionalNode.innerHTML =
// "<p>This will go before the pasted content.</p>";
// data.node.insertBefore(additionalNode, data.node.firstElementChild);
},
//只要涉及上传图⽚就会触发⽅法 toolbar1 ：uploadimg image media ⼯具栏呈现调⽤图⽚按钮 plugins:"image wordcount " 最上⽅呈现图⽚调⽤按钮 menubar 本地图⽚黏贴也是触发这个⽅法
images_upload_handler: (blobInfo, success, failure) => {undefined
// console.log(blobInfo, success, failure);
if (blobInfo.blob().size > self.maxSize) {undefined
failure("⽂件体积过⼤");
}
if (self.accept.indexOf(blobInfo.blob().type) >= 0) {undefined
//上传图⽚符合规则调⽤图⽚上传上传成功回调传⼊success ⾃⼰的上传图⽚接⼝
self.handleImgUpload(blobInfo, success, failure);
} else {undefined
failure("图⽚格式错误");
}
// const img = "data:image/jpeg;base64," + blobInfo.base64();
// success(img);
}
}
上传图⽚接⼝
//图⽚上传
handleImgUpload(blobInfo, success, failure) {undefined
//继承编辑器⽅法 blobInfo, success, failure
console.log(blobInfo.blob());
let formdata = new FormData();
formdata.set("upload_file", blobInfo.blob());
axios
.post("https:///file/apletUpload", formdata) .then(res => {undefined
console.log(res);
// 上传成功回调传给编辑器
success(
"http://taioientcde.os-cn-senzhen.aiuncscom/image/" + res.data.data
);
})
.catch(res => {undefined
//失败通知
failure("error");
});
},
扩展插件
引⼊
import 'tinymce/plugins/image'// 插⼊上传图⽚插件import 'tinymce/plugins/media'// 插⼊视频插件
import 'tinymce/plugins/table'// 插⼊表格插件
import 'tinymce/plugins/link' //超链接插件
import 'tinymce/plugins/code' //代码块插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/contextmenu' //右键菜单插件import 'tinymce/plugins/wordcount' // 字数统计插件import 'tinymce/plugins/colorpicker' //选择颜⾊插件import 'tinymce/plugins/textcolor' //⽂本颜⾊插件import 'tinymce/plugins/fullscreen' //全屏
import "tinymce/plugins/preview"; //预览插件
import "tinymce/plugins/code";//代码块插件
// import "tinymce/plugins/paste";//图⽚黏贴插件
关于发布的⽂章在⼿机上图⽚过⼤处理
//在提交数据的时候对img便签进⾏筛选替换
save(status) {undefined
// 处理图⽚过⼤问题
this.content = this.content.replace(
/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
(mactch, capture) => {undefined
if(mactch.indexOf('max-width:')!=-1){undefined
}else if(mactch.indexOf('style=')!=-1){undefined
mactch = mactch.replace('style="','<img style="max-width:100%;') }else{undefined
mactch = mactch.replace('<img','<img style="max-width:100%;" ') }
let current = "";
this.newImgUrl.forEach(item => {undefined
if (capture == item.oriUrl) {undefined
current = item.filePath;
}
});
current = current ? current : capture;
return mactch.replace(
/src=[\'\"]?([^\'\"]*)[\'\"]?/i,
"src=" + current
);
}
);
//处理powerPaste div align="center" ⽆法达到⽂字居中效果this.content = this.content.replace(
/align="center"/gi,
(mactch, capture) => {undefined
return mactch.replace('align="center"', 'style="text-align:center"'); }
);
// // 匹配并替换任意html元素中 url 路径
// this.content = this.content.replace(
// /url[′"](.+)[′"][′"](.+)[′"]/gi,
// (mactch, capture) => {undefined
// let current = "";
// this.newImgUrl.forEach(item => {undefined
// if (capture == item.oriUrl) {undefined
// current = item.filePath;
// }
// });
// current = current ? current : capture;
// return mactch.replace(
// /url([′"])(.+)([′"])([′"])(.+)([′"])/i,
// `url($1${current}$3) `
// );
// }
// );
}
整理说明图⽚黏贴上传
图⽚黏贴上传 tinymce 的 paste插件就可以⽀持了有个⼩问题就是本地图⽚黏贴编辑器上传不能与图⽂⼀起复制
0. 引⼊插件 import "tinymce/plugins/paste"
1. 基础设置 paste_data_images: true, // 允许粘贴图像
2.⼯具栏配置 uploadimg image media
3.通知使⽤插件 plugins: paste
3.上传图⽚触发⽅法实现图⽚⾃定义上传 handleImgUpload(blobInfo, success, failure) { } 返回成功的success(url)
处理图⽂⼀起复制也就是Word 复制上传改paste 为powerpaste
0.下载powerpaste⽂件放置⾃⼰项⽬便于引⽤
1.改plugins内配置paste为 powerpaste
2.引⽤添加⾃定义插件 external_plugins：{powerpaste: "/static/skins/powerpastes/plugin.min.js" }, ( 注：引⽤⽂件版本要对不然报错⽆法正常上传图⽚)
3.基础配置 powerpaste_allow_local_images: true, //powerpaste允许黏贴 powerpaste_word_import: "clean", // 是否保留word粘贴样式clean | merge （具体可查看官⽅⽂档）
到此完整解决基本没有什么坑可以踩很简单
讨论群：223813913。