惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

J
Java Code Geeks
L
LINUX DO - 最新话题
G
GRAHAM CLULEY
Know Your Adversary
Know Your Adversary
S
Schneier on Security
C
Cisco Blogs
Cisco Talos Blog
Cisco Talos Blog
P
Privacy & Cybersecurity Law Blog
S
Security Archives - TechRepublic
Scott Helme
Scott Helme
PCI Perspectives
PCI Perspectives
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Attack and Defense Labs
Attack and Defense Labs
Hacker News: Ask HN
Hacker News: Ask HN
S
Security @ Cisco Blogs
S
Secure Thoughts
C
CERT Recently Published Vulnerability Notes
www.infosecurity-magazine.com
www.infosecurity-magazine.com
C
Cybersecurity and Infrastructure Security Agency CISA
The Last Watchdog
The Last Watchdog
T
Tenable Blog
SecWiki News
SecWiki News
T
The Exploit Database - CXSecurity.com
Google Online Security Blog
Google Online Security Blog
N
News and Events Feed by Topic
E
Exploit-DB.com RSS Feed
H
Heimdal Security Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
L
LINUX DO - 热门话题
The Hacker News
The Hacker News
P
Privacy International News Feed
Project Zero
Project Zero
Engineering at Meta
Engineering at Meta
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
博客园 - 叶小钗
Cloudbric
Cloudbric
小众软件
小众软件
月光博客
月光博客
S
Securelist
V
V2EX - 技术
I
Intezer
M
MIT News - Artificial intelligence
aimingoo的专栏
aimingoo的专栏
S
Security Affairs
D
Darknet – Hacking Tools, Hacker News & Cyber Security
雷峰网
雷峰网
C
CXSECURITY Database RSS Feed - CXSecurity.com
F
Full Disclosure
A
About on SuperTechFans

博客园 - Xproer-松鼠

PHP实现视频文件上传完整实例 TinyMCE富文本编辑器粘贴图片自动上传问题解决 UEditor富文本编辑器图片粘贴和上传问题 vue项目中使用tinymce富文本编辑器实现图片上传/粘贴格式 富文本编辑器复制word文档中的图片 富文本编辑器:自己实现图片上传功能和图片粘贴上传(kindeditor) 前端上传文件或者上传文件夹 前端实现文件上传(点击+拖拽) HTML5应用之文件拖拽上传 使用HTML5实现多文件上传 HTML5 文件上传的2种方式 html5实现文件批量上传组件 HTML5文件上传操作 html5中怎么实现多文件上传功能 HTML5 进阶系列:文件上传下载 html实现上传 大文件分片上传 【前后台完整版】大文件分片上传 大文件、视频分片上传,断点续传
ueditor 富文本编辑器粘贴图片时让图片居中
Xproer-松鼠 · 2023-12-28 · via 博客园 - Xproer-松鼠

需求
今天碰到个需求,客户要求在把微信公众号中的文章粘贴到富文本框时将文字向左对齐,图片居中
作为一个已经几年没碰前端的我来说有点头大,百度google了一番未果,只好自己研究去了
花了2个多小时终于搞定

话不多说,直接上代码
主要是 retainOnlyLabelPasted 和 filterRules
retainOnlyLabelPasted 会删掉所有乱七八糟的格式
filterRules 配置很多标签粘贴时的过滤规则,其中我配置了

img:function(node){
console.log(node.getAttr("style"));
node.setAttr('style','display:block;margin:0 auto;');
console.log(node.getAttr("style"));
},

主要是重置一下style
其他的啥也没改
至于这个node怎么用可以去下面的API链接看

然后其他的配置都是官网默认的的

还有一个autotypeset 不知道做什么用的
设置的那些东西似乎没有生效
不过既然写好了就懒得改了

$(document).ready(function () {
postContent = UE.getEditor("content", {
autoHeightEnabled: false,
initialFrameHeight: $(document).height() - 300,
elementPathEnabled: false,
initialFrameWidth: '100%',
autoFloatEnabled: false,
retainOnlyLabelPasted: true,
filterRules: function () {
return{
img:function(node){
console.log(node.getAttr("style"));
node.setAttr('style','display:block;margin:0 auto;');
console.log(node.getAttr("style"));
},
p: function(node){
var listTag;
if(node.getAttr('class') == 'MsoListParagraph'){
listTag = 'MsoListParagraph'
}
node.setAttr();
if(listTag){
node.setAttr('class','MsoListParagraph')
}
if(!node.firstChild()){
node.innerHTML(UE.browser.ie ? '&nbsp;' : '<br>')
}
},
div: function (node) {
var tmpNode, p = UE.uNode.createElement('p');
while (tmpNode = node.firstChild()) {
if (tmpNode.type == 'text' || !UE.dom.dtd.$block[tmpNode.tagName]) {
p.appendChild(tmpNode);
} else {
if (p.firstChild()) {
node.parentNode.insertBefore(p, node);
p = UE.uNode.createElement('p');
} else {
node.parentNode.insertBefore(tmpNode, node);
}
}
}
if (p.firstChild()) {
node.parentNode.insertBefore(p, node);
}
node.parentNode.removeChild(node);
},
//$:{}表示不保留任何属性
br: {$: {}},
ol:{$: {}},
ul: {$: {}},

dl:function(node){
node.tagName = 'ul';
node.setAttr()
},
dt:function(node){
node.tagName = 'li';
node.setAttr()
},
dd:function(node){
node.tagName = 'li';
node.setAttr()
},
li: function (node) {

var className = node.getAttr('class');
if (!className || !/list\-/.test(className)) {
node.setAttr()
}
var tmpNodes = node.getNodesByTagName('ol ul');
UE.utils.each(tmpNodes,function(n){
node.parentNode.insertAfter(n,node);

})

},
table: function (node) {
UE.utils.each(node.getNodesByTagName('table'), function (t) {
UE.utils.each(t.getNodesByTagName('tr'), function (tr) {
var p = UE.uNode.createElement('p'), child, html = [];
while (child = tr.firstChild()) {
html.push(child.innerHTML());
tr.removeChild(child);
}
p.innerHTML(html.join('&nbsp;&nbsp;'));
t.parentNode.insertBefore(p, t);
})
t.parentNode.removeChild(t)
});
var val = node.getAttr('width');
node.setAttr();
if (val) {
node.setAttr('width', val);
}
},
tbody: {$: {}},
caption: {$: {}},
th: {$: {}},
td: {$: {valign: 1, align: 1,rowspan:1,colspan:1,width:1,height:1}},
tr: {$: {}},
h3: {$: {}},
h2: {$: {}},
//黑名单,以下标签及其子节点都会被过滤掉
'-': 'script style meta iframe embed object'
}
}(),

autotypeset: {
mergeEmptyline: true, //合并空行
removeClass: true, //去掉冗余的class
removeEmptyline: false, //去掉空行
textAlign: "left", //段落的排版方式,可以是 left,right,center,justify 去掉这个属性表示不执行排版
imageBlockLine: 'center', //图片的浮动方式,独占一行剧中,左右浮动,默认: center,left,right,none 去掉这个属性表示不执行排版
pasteFilter: true, //根据规则过滤没事粘贴进来的内容
clearFontSize: true, //去掉所有的内嵌字号,使用编辑器默认的字号
clearFontFamily: true, //去掉所有的内嵌字体,使用编辑器默认的字体
removeEmptyNode: false, // 去掉空节点
//可以去掉的标签
removeTagNames: {标签名字: 1
},
indent: false, // 行首缩进
indentValue: '2em', //行首缩进的大小
bdc2sb: false,
tobdc: false
}
});

参考文章:http://blog.ncmem.com/wordpress/2023/12/28/ueditor-%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e7%b2%98%e8%b4%b4%e5%9b%be%e7%89%87%e6%97%b6%e8%ae%a9%e5%9b%be%e7%89%87%e5%b1%85%e4%b8%ad/

欢迎入群一起讨论