asp.net 网站的编译,wordpress仿微信公众号模板,西安做网站培训,手绘风网站TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有#xff1a;UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 TinyMCE的优势#xff1a; 开源可商用#xff0c;基于LGPL2.1 插件丰富#xff0c;自带插件基本涵盖日常… TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 TinyMCE的优势 开源可商用基于LGPL2.1 插件丰富自带插件基本涵盖日常所需功能示例看下面的Demo-2 接口丰富可扩展性强有能力可以无限拓展功能 界面好看符合现代审美 提供经典、内联、沉浸无干扰三种模式详见“介绍与入门” 对标准支持优秀自v5开始 多语言支持官网可下载几十种语言。 客户对老系统提出一个要求能直接把word中的图片粘贴进编辑器中否则一张张上传太麻烦了。 网上找到这个插件tinymce-powerpaste-plugin可满足客户的要求。 下载
github插件地址https://github.com/qhx0807/tinymce-powerpaste-plugin 如果打不开请到这里下载https://download.csdn.net/download/snans/88111695
目录 将插件解压缩到tinymce目录下的plugins里。
代码
1. 简易展示 tinymce.init({selector: #tinymce, // css选择器和jquery的选择器一个道理建议直接用idlanguage: zh_CN, // 需要在官网自己下载一个全局的langs包。同时我提供的powerpaste本身自带一个langs包里面含中文所以可以100%支持中文。plugins: [powerpaste, // plugins中用powerpaste替换原来的paste//...],powerpaste_word_import: propmt,// 参数可以是propmt, merge, clear效果自行切换对比powerpaste_html_import: propmt,// propmt, merge, clearpowerpaste_allow_local_images: true,paste_data_images: true,images_upload_handler: function (blobInfo, success, failure) {// 这个函数主要处理word中的图片并自动完成上传// ajaxUpload是自己定义的一个函数在回调中记得调用success函数传入上传好的图片地址// blobInfo.blob() 得到图片的file对象ajaxUpload(blobInfo.blob()).then((data) {// 上传成功后调用success函数传入图片地址success(data.uploadedImageUrl)})},// tinymce的其他配置参数})2.与后台交互 tinymce.init({selector: #tinymce, // css选择器和jquery的选择器一个道理建议直接用idlanguage: zh_CN, // 需要在官网自己下载一个全局的langs包。同时我提供的powerpaste本身自带一个langs包里面含中文所以可以100%支持中文。plugins: [powerpaste, // plugins中用powerpaste替换原来的paste//...],powerpaste_word_import: propmt,// 参数可以是propmt, merge, clear效果自行切换对比powerpaste_html_import: propmt,// propmt, merge, clearpowerpaste_allow_local_images: true,paste_data_images: true,images_upload_handler: function (blobInfo, success, failure, progress) {var xhr, formData;xhr new XMLHttpRequest();xhr.withCredentials false;xhr.open(POST, postAcceptor.php);xhr.upload.onprogress function(e){progress(e.loaded / e.total * 100);}xhr.onload function() {var json;if (xhr.status 403) {failure(HTTP Error: xhr.status, { remove: true });return;}if (xhr.status 200 || xhr.status 300 ) {failure(HTTP Error: xhr.status);return;}json JSON.parse(xhr.responseText);if (!json || typeof json.location ! string) {failure(Invalid JSON: xhr.responseText);return;}success(json.location);};xhr.onerror function () {failure(Image upload failed due to a XHR Transport error. Code: xhr.status);}formData new FormData();formData.append(file, blobInfo.blob(), blobInfo.filename());formData.append(id, abc123);xhr.send(formData);}粘贴 无论移除格式还是保持格式图片都能正常显示主要是文字格式的清理。
其它
网上网友总结
3.3.3-308版本
升级内容
修复了第一次复制粘贴图片进入tinymce时images_upload_handler会调用2次的bugword中如有图片无法上传比如图片格式错误word中可以显示但是tinymce无法显示增加了错误提示体积更小大概小了30%猜测应该与高版本tinymce兼容的更好。因为2.1.10-115是2017年初时候的版本了那时候对应tinymce3.x现在是tinymce4.9
4.0.1-317版本
适用tinymce5.0以上用在5.0以下版本无效。
参考
tinymce实现从word直接粘贴并自动上传图片 powerpaste plugin source code TinyMCE是什么 TinyMCE简介与入门 \ 上传图片和文件 images_upload_handler图片上传自定义实现
