百度编辑器ueditor爬坑记-------ie下初始化报错

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量1.5k 收藏
点赞数
分类专栏： javascript ueditor 百度编辑器 文章标签： 百度编辑器 ueditor javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_34704593/article/details/83241629
版权

ueditor.all.js中有一个方法如下：


        /**
         * 渲染编辑器的DOM到指定容器
         * @method render
         * @param { Element } containerDom 直接指定容器对象
         * @remind 执行该方法,会触发ready事件
         * @warning 必须且只能调用一次
         */
        render: function (container) {
            var me = this,
                options = me.options,
                getStyleValue=function(attr){
                    return parseInt(domUtils.getComputedStyle(container,attr));
                };
            if (utils.isString(container)) {
                container = document.getElementById(container);
            }
            
            //.......

            //.......

       }

该方法是初始化编辑器的，但是。ie下这个方法中有一段就是这个方法中我打省略号的地方的这段，这段报错。具体不分析了，直接上解决办法。将该方法直接替换为如下即可：


        /**
         * 渲染编辑器的DOM到指定容器
         * @method render
         * @param { Element } containerDom 直接指定容器对象
         * @remind 执行该方法,会触发ready事件
         * @warning 必须且只能调用一次
         */
        render: function (container) {
            var me = this,
                options = me.options,
                getStyleValue=function(attr){
                    return parseInt(domUtils.getComputedStyle(container,attr));
                };
            if (utils.isString(container)) {
                container = document.getElementById(container);
            }
			if ( container ) {
				//获取默认语种
				var fontfamily = "宋体",isbreak="word-break:break-all";
				var useBodyAsViewport = ie && browser.version < 9,
						html = ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') +
								'<html xmlns=\'http://www.w3.org/1999/xhtml\'' + (!useBodyAsViewport ? ' class=\'view\'' : '') + '><head>' +
								( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml( options.iframeCssUrl ) + '\'/>' : '' ) +
								 '<link id="thecss" rel="stylesheet" type="text/css" href="about:blank">'+
								'<style type=\'text/css\'>' +
							//设置四周的留边
								'.view{padding:0;'+isbreak+';cursor:text;height:100%;}\n' +
							//设置默认字体和字号
							//font-family不能呢随便改，在safari下fillchar会有解析问题
								//'body{margin:8px;font-family:sans-serif;font-size:16px;}' +
								'body{margin-left:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;font-family:"'+fontfamily+'";font-size:14px;}' +
							//设置段落间距
								'p{margin:5px 0;}'
								+ ( options.initialStyle || '' ) +
								'</style></head><body style="height:100%;" ' + (useBodyAsViewport ? ' class="view"' : '')  + '></body>';
				if ( options.customDomain && document.domain != location.hostname ) {
					html += '<script>window.parent.UE.instants[\'ueditorInstant' + me.uid + '\']._setup(document);</script></html>';
					container.appendChild( domUtils.createElement( document, 'iframe', {
						id:'baidu_editor_' + me.uid,
						width:"100%",
						height:"100%",
						frameborder:"0",
						src:'javascript:void(function(){document.open();document.domain="' + document.domain + '";' +
								'document.write("' + html + '");document.close();}())'
					} ) );
				} else {
					  container.innerHTML = '<iframe name="ueditor_subcontent" id="' + 'baidu_editor_' + this.uid + '"' + ' style="width:100%;height:100%" class="mainiframe" scrolling="yes" frameborder="0"></iframe>';
					var doc = container.firstChild.contentWindow.document;
					//去掉了原来的判断!browser.webkit，因为会导致onload注册的事件不触发
					doc.open();
					doc.write( html + '</html>' );
					doc.close();
					me._setup( doc );
				}
				container.style.overflow = 'hidden';
				//注册编辑区切换监听
				//addEditorListener(container.firstChild.contentWindow.document);
				setTimeout(function(){
					if( /%$/.test(options.initialFrameWidth)){
						options.minFrameWidth = options.initialFrameWidth = container.offsetWidth;
						//如果这里给定宽度，会导致ie在拖动窗口大小时，编辑区域不随着变化
			//                        container.style.width = options.initialFrameWidth + 'px';
					}
					if(/%$/.test(options.initialFrameHeight)){
						options.minFrameHeight = options.initialFrameHeight = container.offsetHeight;
						container.style.height = options.initialFrameHeight + 'px';
					}
				})
			}

        },

 

doingSthing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
springboot集成ueditor，并修复查看在线文件路径出错的问题
weixin_39468112的博客
04-19 649
这里主要是记录一下自己集成ueditor的过程 1、下载ueditor,我下载的是jsp-utf-8版。 2、下载后解压，然后直接丢到项目里 3、添加jar包，解压后，在jsp-lib里面有需要用到的jar包 我是直接到maven仓库搜索这些包，用pom引入 4、编写一个controller,用来映射后端请求 //这里编写一个请求地址用来映射后端请求 @RequestMa...
使用百度ueditor编辑器中遇到的一些问题 分享给大家
oqq_gehuan的博客
07-20 3537
1.首先 去ueditor官网下载软件包http://ueditor.baidu.com/website/download.html#ueditor 2.我下载的是.net版本，可以根据自己开发的需要选择适合自己的版本。 3 解压缩后把他放到项目根目录下 4.  根目录下有demo文件，大家先看看效果 5接下来就是关键的配置阶段了，ueditor把配置信息都放在了相应的语言包文件夹下...
基于ueditor的兼容IE8的多图片上传+预览效果（JSP）
02-28
博主在网上找到了剥离出来的百度开发的ueditor中有多图片上传功能的例子（仅针对JSP），加上之前的适应IE8+的预览JS，二者结合，则既可以上传图片，又可以预览图片。 适应IE8+的预览JS： 下载网址为：http://download.csdn.net/download/death05/9765979 博客地址为：http://blog.csdn.net/death05/article/details/58587348 二者结合（即对应本项目资源） 博客地址为：http://blog.csdn.net/death05/article/details/58601392
ueditor百度编辑器常见报错的解决方法
热门推荐
xjun0812的博客
06-04 1万+
如果是第一次使用ueditor百度编辑器，或者对它不熟悉的情况下使用，会出现一些常见问题和报错。怎么使用建议参考ueditor官网，这里只谈一些常见错误。问题：‘UE’ is not defind我是在vue中调用UE里面的方法时遇到的这个问题。这是ESlint的代码风格警告，虽然不影响功能的使用，看上去非常不爽，解决方法是在前面用window调用，即：this.ue = window.UE.ge...
UE编辑器：配置文件初始化失败
weixin_43284245的博客
09-14 433
UE配置文件初始化失败
ueditor源代码重点难点分析
u013384469的博客
05-05 581
本文分析ueditor源码整体流程逻辑以及重点难点细节。
ueditor （百度文本编辑器）
yanpengfeil的博客
03-08 1051
不得不说 editor的功能感觉十分强大，而且界面美观，但是配置信息可能对于初学者（我也是）有点小困难，感觉文档上也不是很清晰 话不多说直接上图，有图有真相 左面为 ueditor 完整目录结构，圈上的部分为 两个配置文件，右面为需要引入的文件 &lt;script charset="utf-8" src="ueditor/ueditor.config.js"&gt;&lt;/scri...
百度编辑器ueditor-dev-1.5.0 utf8-php 编译版
06-13
**百度编辑器ueditor-dev-1.5.0 utf8-php编译版详解** 百度编辑器（UEditor）是一款由百度公司Web前端研发部精心打造的开源富文本Web编辑器。它以其轻量级、高度可定制以及优秀的用户体验而广受开发者喜爱。UEditor...
百度编辑器ueditor-dev-1.5.0 gbk-php 编译版
06-13
《百度编辑器ueditor-dev-1.5.0 gbk-php编译版：构建与应用详解》 在Web开发中，富文本编辑器是不可或缺的一部分，它为用户提供了一个方便、直观的界面，使得内容创作变得简单易行。其中，百度编辑器（UEditor）因...
百度编辑器UEditor PHP UTF-8版 v1.4.3.2
12-07
Ueditor是由百度web前端研发部开发所见即所得的编辑器，具有轻量，可定制，注重用户体验等特点。Ueditor基于BSD开源协议，除了具有代码精简、加载迅速的轻量级特质外，还采用了分层理念，使开发者可以根据实际应用和...
百度编辑器UEditor ASP UTF-8版 v1.4.3.2
12-07
Ueditor是由百度web前端研发部开发所见即所得的编辑器，具有轻量，可定制，注重用户体验等特点。Ueditor基于BSD开源协议，除了具有代码精简、加载迅速的轻量级特质外，还采用了分层理念，使开发者可以根据实际应用和...
百度编辑器ueditor-dev-1.5.0 gbk-asp 编译版
06-13
**百度编辑器ueditor-dev-1.5.0 gbk-asp 编译版详解** 百度编辑器（UEditor）是百度公司推出的一款强大的Web在线富文本编辑器，旨在为用户提供一个所见即所得（WYSIWYG）的编辑环境。它的主要特点是轻量级、高度可...
ueditor使用jar包无法读取config.json导致配置文件初始化失败问题
qq_35934210的博客
07-16 1738
在configManager文件中做如上修改即可
uedtior errorHandler is not defined 配置文件初始化失败
chedanquestion的博客
09-24 1110
uedtior errorhandler 配置文件加载失败 这个uedtior太扯淡了，在本地idea和tomcat上各种没问题，一上线就不能上传图片，我试过了网上说的各种方法都不管用。最后我用一个十分扯淡的方式解决了。 我的框架是springboot 在后端有ueditor包，包里有configmanager类。在这个类里面有一个initEnv ()方法，我直接做了如下修改 是的！你没有看错，我直接把容易出错的代码删掉然后把提示用日志输出出来的过滤后的字符串粘了过来！就是这么简单粗暴！如果以后改配
vue中ueditor初始化无法编辑报错“$EDITORUI is not defined“
union89的专栏
06-09 990
$EDITORUI is not defined
ueditor php跨域上传文件,GitHub - aleafo/ueditor: 修改百度UEditor 单文件上传七牛云等第三方云服务 导致的跨域问题...
weixin_26759093的博客
04-01 209
Get Started修改百度UEditor 单文件上传七牛云等第三方云服务 导致的跨域问题。由于官方文档中对于多文件和涂鸦上传使用的是 flash 和 h5的方式，但是对于单文件上传使用的是提交隐藏iframe方式。因此在跨域的时候，单纯的修改 document.domain 并不能解决问题。对该问题官方文档也没有给出详细的说明。本文主要针对该问题进行一个补丁修改。1. 修改配置文件修改 ued...
基于springboot与前后端分离使用Ueditor遇到的问题
Laiguanfu的博客
12-04 2156
 慢慢来比较快，虚心学技术 前言：前后端分离的项目，需要使用ueditor富文本编辑器，因为是未接触过的前后端分离，所以遇到了新的问题 问题：因为UEditor需要与后端代码结合，即将配置文件config.json放在服务器端访问，但是项目运行前端无法上传图片，报后端配置文件初始化失败的错误，config.json如下            问题分析：前后端分离的项目中前端无权直接访...
UEditor初步使用小结
brittany2009的博客
08-04 284
最近公司项目中需要做一个简易的BBS论坛，相应的就需要富文本编辑器，之前使用过CFeditor，但UI总感觉不适合个人喜爱，经过对比后选择了百度开源的UEditor。   UEditor官网地址：http://ueditor.baidu.com/website/   目前最新版本：1.4.3，以下使用及配置都是基于此版本。我们使用的是jsp版本，以下为默认目录：  进入jsp目录，我...
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 494
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
vue3+vite+ts 使用富文本编辑器vue-ueditor-wrap
11-15
以下是使用vue-ueditor-wrap富文本编辑器的步骤： 1.安装vue-ueditor-wrap ```shell npm install vue-ueditor-wrap --save ``` 2.在Vue组件中引入vue-ueditor-wrap ```vue <template> <div> <vue-ueditor-wrap v-model="content" :config="myConfig" editor-id="editor-demo-01" @ready="ready"></vue-ueditor-wrap> </div> </template> <script> import VueUeditorWrap from 'vue-ueditor-wrap' export default { components: { VueUeditorWrap }, data() { return { content: '', myConfig: { // 配置项 }, editorInstance: null } }, methods: { ready(editorInstance) { this.editorInstance = editorInstance } } } </script> ``` 3.在Vue组件中定义myConfig配置项 ```vue <script> export default { data() { return { myConfig: { // 配置项 UEDITOR_HOME_URL: '/static/UEditor/', // UEditor资源文件的根目录 serverUrl: '/api/ueditor/' // UEditor服务端接口地址 } } } } </script> ``` 4.在Vue组件中使用editorInstance获取编辑器实例 ```vue <script> export default { methods: { ready(editorInstance) { this.editorInstance = editorInstance }, getContent() { console.log(this.editorInstance.getContent()) // 获取编辑器内容 } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值