正文 

当前位置： 首页 > java > java教程

ueditor上传图片后自定义样式类名

行者无疆 行者无疆     2022-08-19     454

关键词：

Ueditor是百度的一个富文本插件，如果使用者会前端语言的话，那适用性就很好，特别是现在移动端纵横的情况。但往往使用者并不懂编程，要让他们使用前端语言的话是不可能的，这就需要我们在开发时就定义好整个样式。

正常情况下，我们上传后的图片是固定了宽高的，要想适用移动端，就必须使宽度定义为100%，或者加个类上去，我们可以自定义。这就是我们的思路。

下面是修改代码：

ueditor.all.js
UE.plugin.register(‘simpleupload‘, function (){
...
function initUploadBtn(){
...
domUtils.on(btnIframe, ‘load‘, function(){
...
domUtils.on(input, ‘change‘, function(){
...
me.execCommand(‘inserthtml‘, ‘<img class="loadingclass" id="‘ + loadingId + ‘" src="‘ + me.options.themePath + me.options.theme +‘/images/spacer.gif" title="‘ + (me.getLang(‘simpleupload.loading‘) || ‘‘) + ‘" >‘);//网上说法这里可以加自定义样式,试过会报错ueditor.all.js :  #24461  行
me.execCommand(‘inserthtml‘, ‘<img class="loadingclass" id="‘ + loadingId + ‘" src="‘ + me.options.themePath + me.options.theme +‘/images/spacer.gif" title="‘ + (me.getLang(‘simpleupload.loading‘) || ‘‘) +  width="291" height="164"+‘"style="width: 291px; height: 164px;">‘);
function callback(){
...
　　　　　　　　domUtils.setStyle(loader, ‘width‘, ‘100%‘);//设置控件样式style#24527
...
domUtils.addClass(loader, ‘自定义样式类名‘);//是自带方法,可以实现#24534
...
}
...
})
...
})
...
}
...
})
设置style时,要同时修改usditor.config.js
(function(){
...
window.UEDITOR_CONFIG = {
...
// xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
,whitList: {
...
img: [‘src‘, ‘alt‘, ‘title‘, ‘width‘, ‘height‘, ‘id‘, ‘_src‘, ‘loadingclass‘, ‘class‘, ‘data-latex‘, ‘style‘],//添加过滤白名单style#403
...
}
...
}
...
})

百度富文本编辑器ueditor自定义上传图片接口

如下图： 然后修改ueditor.all.js   查看详情

ueditor自定义图片视频尺寸校验(代码片段)

UEditor支持单图、多图以及视频上传，编辑器配置项支持文件格式、文件大小校验，对于文件宽高尺寸校验暂不支持。这里记录一下自定义图片、视频尺寸校验过程，内容核心主要是扩展校验逻辑和增加自定义提示文本。单图上... 查看详情

ueditor无法上传图片异常

1.ueditor->themes->iframe.css添加样式2.Scripts中加入net文件夹（主要是因为解压后的Ueditor没有net文件夹）3.修改ueditor.config.js（serverUrl:URL+"net/controller.ashx"）4.最新的ueditor1.4.3中注意修改net/config.json文件中imageUrlPrefix和imag 查看详情

ueditor编辑器，自定义图片上传

<div>      <h1>完整demo</h1>      <form method="post" name="form">      <di 查看详情

百度ueditor富文本上传图片(代码片段)

项目中使用UEditor发现设置图片自定义保存路径会出现《请求后台配置项http错误，上传功能将不能正常使用！错误》/*上传图片配置项*/"imageActionName":"uploadimage",/*执行上传图片的action名称*/"imageFieldName":"inputForm",/*提交的图片表单... 查看详情

ueditor改变上传图片的url，后台可使用自定义的程序接收

js中引入的版本:<scripttype="text/javascript"src="ueditor1_3_6-utf8-jsp/ueditor.config.js"></script><scripttype="text/javascript"src="ueditor1_3_6-u 查看详情

ueditor中上传图片的步骤

1.找到ueditor中ueditor.config.js修改serverUrl属性值，   serverUrl:URL+"jsp/controller.jsp"      toolbars定义的是编辑器里显示的button按钮组    2. 将ueditor 查看详情

ueditor之图片上传如何和真实项目结合

1.首先，我们定义一个名为GetConfigServlet的Servlet，真实项目应该是一个Controller，一样的，这个类就是加载后端配置文件类packagecom.ay.servlet;importjava.io.IOException;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServl 查看详情

ueditor图片上传配置

ueditor图片上传配置文件为ueditor/php/config.json/*上传图片配置项*/"imageActionName":"uploadimage",/*运行上传图片的action名称*/"imageFieldName":"upfile",/*提交的图片表单名称*/"imageMaxSize":2048000,/*上传限制大小，单位B*/"imageAllowFiles":[".pn 查看详情

百度ueditor--自定义上传文件路径及读取文件

jsp中替换掉上传和预览图片的URL注意第一句判断，注意要用项目的相对URL return‘/sirdifoa/kentra/file/uploadImage.do‘;if(UE.Editor.prototype._bkGetActionUrl == undefined)UE.Editor.prototype._bkGetActionUrl = U 查看详情

请问：百度ueditor编辑器为啥不能上传图片啊？在asp中，请求高手指教。

如图：Ueditor编辑器图片上传UEditor的图片上传采用了Flash上传的方式，在功能上支持批量、本地预览和实时进度提示，在界面上支持自定义背景、上传按钮和预览框等视觉元素的样式属性，基本能够满足各种用户的不同上传需求... 查看详情

ueditor1.5版本单独调用图片上传如何实现？

ueditor1.5版本单独调用图片上传如何实现，网上找的添加修改image.jsfunctioninsertImage(imgObjs)editor.fireEvent('beforeInsertImage',imgObjs);editor.execCommand("insertImage",imgObjs);这个代码只适合老版本，新版本1.5的无效。在页面中引入UEdi... 查看详情

ueditor后台上传图片大小限制

打开ueditor/php/config.json里面设置一目了然   /*上传图片配置项*/   "imageActionName":"uploadimage",/*执行上传图片的action名称*/   "imageFieldName":"upfile",/*提交的图片表单名称*/   查看详情

umeditor上传图片配置

  UMeditor是UEditor的简洁版，保留了UEditor中常用的功能，在代码量和加载速度上均有很大的提升。本文上传图片的执行后台基于jfinal框架。1、html加载调用的样式和脚本，为保证图片能上传到服务器，此处需要做几点配置：... 查看详情

ueditor上传图片到七牛云存储（formapi,java）

转：http://my.oschina.net/duoduo3369/blog/174655ueditor上传图片到七牛云存储ueditor结合七牛传图片七牛的试炼开发前的准备与注意事项说明Let‘srock与ueditor结合前的准备工作首先从表单开始生成token建立图片空间生成token上传流程集成ueditor... 查看详情

ueditor1.4.3上传图片提示上传失败

通过UEditor1.4.3上传图片附件时，提示上传错误。发现JS报错如下图：UEditor的asp目录下controller.asp?action=uploadimage文件报500错误。打开页面，具体错误内容为：ADODB.Stream 错误‘800a0bb9‘参数类型不正确，或不在可以接受的范围之... 查看详情

修改ueditor的图片上传地址

文件地址：ueditro/php/config.json/*前后端通信相关的配置,注释只允许使用多行方式*/{/*上传图片配置项*/"imageActionName":"uploadimage",/*执行上传图片的action名称*/"imageFieldName":"upfile",/*提交的图片表单名称*/"imageMaxSize":2048000,/*上传大小限... 查看详情

百度ueditor上传图片超过200k就上传错误

200k以下上传成功200k以上就失败！为什么在哪里修改啊？？？？参考技术A不是ueditor的问题而是你程序里面有限制你用的是什么语言 查看详情