首页 > 其他分享 >ueditor 富文本编辑器粘贴图片时让图片居中

ueditor 富文本编辑器粘贴图片时让图片居中

时间:2024-01-02 11:00:53浏览次数:40  
标签:node ueditor 文本编辑 false setAttr function style UE 图片

需求
今天碰到个需求,客户要求在把微信公众号中的文章粘贴到富文本框时将文字向左对齐,图片居中
作为一个已经几年没碰前端的我来说有点头大,百度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 ? ' ' : '<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('  '));
                                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-富文本编辑器粘贴图片时让图片居中/


标签:node,ueditor,文本编辑,false,setAttr,function,style,UE,图片
From: https://blog.51cto.com/u_14023400/9065113

相关文章

  • TinyMCE富文本编辑器粘贴图片自动上传问题解决
    TinyMCE编辑器支持粘贴图片,但是自动会将图片转换成base64编码,这样将内容提交到后台,数据会很大。  图|TinyMCE本文内容配置TinyMCE(版本:5.10.0)向编辑器中粘贴图片自动上传到后台,以下为配置代码:tinymce.init({selector:'#textarea',plugins:'previewautolinkdire......
  • 在Java HttpURLConnection库上编写一个下载程序下载美图秀秀的图片
    在JavaHttpURLConnection库上编写一个下载程序,该下载程序使用Kotlin下载https://xiuxiu.meitu.com/的内容,代码必须使用以下代码:代理主机:www.duoip.cn,代理端口:8000。importjava.io.BufferedReaderimportjava.io.InputStreamReaderimportjava.net.HttpURLConnectionimportjav......
  • 前端歌谣-第柒拾叁课-node操作mongodb实现增删改查(图片上传功能)
    前言大家好我是歌谣今天继续给大家带来node操作mongodb实现增删改查实现上传功能环境准备后端mongodb数据库+node前端ejs模板安装处理文件的依赖npmimulter后端启动.\mongod--dbpath.\data\db后台运行连接数据库清空数据前端部分前端目录controller层constUserService=r......
  • java 邮件图片
    如何在Java中发送带有图片的邮件引言在现代的软件开发中,电子邮件是我们最常见的沟通工具之一。有时候,我们需要在邮件中插入图片来更好地展示内容或者丰富邮件的形式。本文将介绍如何在Java中发送带有图片的邮件。整体流程发送带有图片的邮件可以分为以下几个步骤:准备SMTP服务......
  • JS 根据文件Magic Number判断文件是否是图片
    原理:检测文件的MagicNumber代码示例:varpngMagic=[0x89,0x50,0x4e,0x47,0x0d,0x0a,0x1a,0x0a];varjpeg_jfif=[0x4a,0x46,0x49,0x46];varjpeg_exif=[0x45,0x78,0x69,0x66];varjpegMagic=[0xFF,0xD8,0xFF,0xE0];var......
  • Java递归查询文件下所有的图片,移动到指定文件夹中,分批次建立子文件夹
    1.代码实例将/Users/shiheng/desktop/测试文件目录下的图片(包含子文件夹目录下的图片)移动到了/Users/shiheng/desktop/测试结果目录下,默认不分批次建立子文件夹,重名文件只保存一个,代码如下所示:packagecom.syrdbt.java.study;importjava.io.File;importjava.util.*;/**......
  • 大数据分析与可视化 之 百度图片爬虫
    大数据分析与可视化之百度图片爬虫importrequestsimportrefromurllibimportparseimportosimporttime#ImportthetimemoduleclassBaiduImageSpider(object):def__init__(self):self.url='https://image.baidu.com/search/flip?tn=baiduimag......
  • 11PCIE图片输出到HDMI显示器
    软件版本:vitis2021.1(vivado2021.1)操作系统:WIN1064bit硬件平台:适用XILINXA7/K7/Z7/ZU/KU系列FPGA登录"米联客"FPGA社区-www.uisrc.com视频课程、答疑解惑!11.1概述前面的例子相对来说使用了中断采集数据比较复杂一些,本方案实现把电脑上的图片发送给开发板,让开发板的HDMI输......
  • Python OpenCV 截取图片中的小图片
    1importcv22importnumpyasnp3importmatplotlib.pyplotasplt45#读取图像并转换为灰度图像6image=cv2.imread('./a.jpg')7gray=cv2.cvtColor(image,cv2.COLOR_BGR2GRAY)89#使用Canny边缘检测10edges=cv2.Canny(gray,0,200)#调......
  • Python OpenCV 去除截图中的所有图片
    1importcv22importnumpyasnp3importmatplotlib.pyplotasplt45#读取图像并转换为灰度图像6image=cv2.imread('./a.jpg')7gray=cv2.cvtColor(image,cv2.COLOR_BGR2GRAY)89#使用Canny边缘检测10edges=cv2.Canny(gray,0,200)#调......