PHPMyWind支持PDF粘贴

项目需求可发布文章需求涉及到富文本编辑器经过查阅我选择了较为简便不需要后端支持可独立完成的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:

// },

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:

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);

// self.labelDialogShow=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("图片格式错误");

}

// https://blog.taiorient.com/file/appletUpload

// 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://blogtiorent.com/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 （具体可查看官方文档）

到此完整解决基本没有什么坑可以踩很简单

这里分享另一种图片上传工具

效果如下：

详细思路及源码

示例下载：

wordpaster-vue3-cli-ueditor1.5，wordpaster-vue-ueditor1.5，wordpaster-asp.net-ueditor1.5x，wordpaster-php-ueditor1x，wordpaster-jsp-ueditor1x

PHPMyWind支持PDF粘贴相关推荐

PHPMyWind支持Word粘贴
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例: 打开umeditor.js,找 ...
同时绑定onpropertychange 和 oninput 事件，实时检测 input、textarea输入改变事件，支持低版本IE，支持复制粘贴...
实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...
用轻量服务器搭建自己的pdf在线工具箱（支持pdf压缩以及pdf OCR）
上篇文章中我们讲了怎么利用腾讯轻量云服务器搭建一个PDF在线压缩工具,今天我们来搭建一个更强大的工具,不仅支持PDF在线压缩,还支持PDF OCR文字识别前言前两天需要压缩一个pdf文件,由于pd ...
手机免费使用PDF编辑器一键支持PDF转Word，随时随地处理文档
PDF编辑器手机版已经问世啦,PDF编辑器不仅电脑端可以使用,手机也可以使用,PDF编辑功能基本可以涵盖大家的需求.特别要提到的是,手机版的PDF编辑器还支持一键将PDF转成Word文件,这样大家就根 ...
让小屏幕kindlePaperWhite2支持PDF
今天刚到手kpw2,购买前已知对pdf支持不佳,按耐不住,倒腾一番,完美支持pdf 使用小屏幕Kindle阅读PDF文档时,如果文档不是专门为小屏幕阅读器排版,就会经常出现显示字体太小的情况,造成阅读 ...
VS报表解决方案DevExpress报表控件—支持PDF导出
DevExpress Reporting是.NET Framework下功能完善的报表平台,它附带了易于使用的Visual Studio报表设计器和丰富的报表控件集,包括数据透视表.图表,因此您可以构 ...
手机版PDF编辑器支持PDF转Word、文档内容编辑合并与提取
PDF文档作为使用十分普遍的办公文档,其内容展示精美.设备兼容性好的特性十分受到用户们的喜爱.不过也有令人头疼的部分,修改PDF内容不易,需要专用的PDF编辑器,当然你也可以选择将PDF转成Word后 ...
【e悦读】支持PDF转WORD/PPT/Excel等
[e悦读更新]支持PDF转WORD/PPT/Excel等 [重磅信息]e悦读ON-LINE 研发出新功能,目前支持7种功能: 1. PDF转word 2. PDF转html(网页) ...
PHPMyWind编辑器支持pdf自动上传
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

PHPMyWind支持PDF粘贴

PHPMyWind支持PDF粘贴相关推荐

最新文章

热门文章