UEDITOR自定义默认宽度高度

合集下载

百度Ueditor配置步骤

百度Ueditor配置步骤一、官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示：_examples：编辑器完整版的示例页面dialogs：弹出对话框对应的资源和JS文件themes：样式图片和样式文件php/jsp/.net：涉及到服务器端操作的后台文件，根据你选择的不同后台版本，这里也会不同，这里应该是jsp,php,.netthird-party：第三方插件(包括代码高亮，源码编辑等组件）editor_all.js：_src目录下所有文件的打包文件editor_all_min.js：editor_all.js文件的压缩版，建议在正式部署时才采用editor_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录二、部署UEditor到实际项目（UETest）中的步骤:第一步：在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录，此处在项目根目录下建立，起名为ueditor。

第二步：拷贝源码包中的dialogs 、themes 、third-party 、editor_all.js 和editor_config.js 到ueditor 文夹中。

其中，除了ueditor 目录之外的其余文件均为具体项目文件，此处所列仅供示例。

第三步：为简单起见，此处将以根目录下的index.aspx 页面作为编辑器的实例化页面，用来展示UEditor 的完整版效果。

在index.aspx 文件中，首先导入编辑器需要的三个入口文件，示例代码如下：1 2 3 <title>编辑器完整版实例</title><script type="text/javascript" src="ueditor/editor_config.js"></script> <script type="text/javascript" src="ueditor/editor_all.js"></script>第四步：然后在index.aspx 文件中创建编辑器实例及其DOM 容器。

UEditor控制上传图片的显示尺寸大小

UEditor控制上传图片的显示尺寸大小
UEditor版本：1.4.3的jsp版本
我们在使用UEditor的编辑框插入图片的时候，按照默认的设置，如果图片尺寸比较大，则图片会超出编辑器边框，特别不方便，而在UEditor的配置文件中也没有这一项的配置信息，但是它给提供了一个样式文件，即themes下的iframe.css文件，可以让我们在这里添加自己的css。

下面我们就写自己的css，代码如下：
[css] view plain copy <span style="font-size:14px;">/*可以在这里添加你自己的css*/ img { max-width: 100%; /*图片自适应宽度*/ } body { overflow-y:
scroll !important; } .view { word-break:
break-all; } .vote_area { display:
block; } .vote_iframe { background-color: transparent; border: 0 none; height: 100%; }
#edui1_imagescale{display:none !important;} /*去除点击图片后出现的拉伸边框*/</span> 添加上述css后，再用UEditor编辑器添加文件的时候，图片最大只能到编辑框的边界。

如下：。

百度编辑器去掉图片间空隙,图片宽度自适应

增加一个普通按钮（上）让百度编辑器上传的图片无空行（空隙），在手机端展示的图片之间无空隙下面就让我们从最简单的功能开始UEditor的二次开发之旅：在工具栏上增加一个按钮，点击按钮的时候把编辑器中的所有图片设置为左浮动，宽度设为100%。

第一步：找到ueditor.config.js文件中的toolbars参数，增加一个“fixedpic”字符串，对应着添例如：下图为自定义了一个fixedpic的按钮第二步：找到ui/editorui.js文件中的btnCmds数组，在其中同样增加一个“fixedpic”字符串。

例如：1.4.3版的在ueditor.all.js中添加第三步：清空缓存刷新下页面吧！工具栏的对应位置是否出现了一个自己定义的按钮呢？如下图所示：由于此时未设置对应按钮的图片样式，所以会显示默认的“B”字符。

要想让其显示成自己需要的图标样式，接着按照下面的步骤动手吧。

第四步：找到themes/default/css/ueditor.css文件，增加一条样式定义:完成后刷新浏览器，可以看到此时图标已经显示为如下图所示：此处的样式定义了showmsg图标在UEditor默认的精灵Icon图片（themes/default/images/icons.png）中的位置偏移。

如需更改成另外图标，只需添加图标到该图片文件中，然后设置偏移值即可。

第五步：到此为止，在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑，但是我们发现点击按钮之后毫无反应。

那是必然的，我们还必须为该按钮绑定属于它自己的事件处理方法。

实质上，此时一个默认的事件处理方法已经被UEditor绑定到按钮上了，只不过由于我们还没有定义该方法的具体内容，所以点击之后无任何变化。

下面我们就来定义该方法的具体内容：效果如下：再次刷新页面点击一下按钮吧！点击按钮前点击后，图片间的空隙没了，且图片的宽度100%，去掉了高，这样图片就能在手机端自适应宽度和高度了！源码很简单，自己试试吧！本例子参考官网的/website/document.html文档制作本例子使用的jar包，请到官网/website/download.htmlueditor1_4_3-utf8-jsp.zip。

ueditor catchremoteimage默认值

ueditor catchremoteimage默认值【原创版】目录1.Ueditor 概述2.Ueditor 的 catchremoteimage 功能介绍3.Ueditor 的 catchremoteimage 默认值详解4.catchremoteimage 默认值的作用和应用场景5.总结正文【Ueditor 概述】Ueditor 是由百度推出的一款开源的 HTML 可视化编辑器，其基于Web 技术开发，具有体积小、功能强大、操作简单等特点，被广泛应用于各种网站和应用中。

Ueditor 支持多种文本格式和图片上传方式，为用户提供了便捷的编辑体验。

【Ueditor 的 catchremoteimage 功能介绍】在 Ueditor 中，catchremoteimage 是一项非常重要的功能，它允许用户在编辑器中直接点击图片链接，并将图片插入到编辑器中。

这一功能极大地提高了用户的工作效率，避免了图片上传和插入的繁琐操作。

【Ueditor 的 catchremoteimage 默认值详解】在 Ueditor 中，catchremoteimage 功能有一个默认值，这个默认值决定了当用户点击图片链接时，编辑器会采取何种行为。

这个默认值可以在 Ueditor 的配置文件中进行修改，如果没有进行修改，那么 Ueditor 会使用默认的值。

【catchremoteimage 默认值的作用和应用场景】catchremoteimage 默认值的作用主要体现在以下几个方面：1.决定是否启用 catchremoteimage 功能：如果默认值为 true，则表示启用该功能，用户可以点击图片链接进行图片插入；如果默认值为false，则表示禁用该功能，用户需要通过上传图片的方式进行图片插入。

2.决定插入图片的尺寸：默认值还可以决定插入图片的尺寸，例如，如果默认值为“width=500,height=300”，则表示插入的图片宽度为 500，高度为 300。

百度UEditor编辑器!合入PHP网站!

一、富文本内容交互1、编辑器内容初始化（即往编辑器中设置富文本）场景一：写新文章，编辑器中预置提示、问候等内容。

在editor_config.js文件中找到initialContent参数，设置其值为需要的提示或者问候语即可，如initialContent:’欢迎使用UEditor!’。

场景二：编辑旧文章，从数据库中取出富文本放置到编辑器中。

显然，编辑文章时需要从后台数据库中取出大段富文本，如果仍然采用场景一中的方式去设置初始值的话，必然会带来诸如引号匹配被截断等问题，因此需要采用另外一种方式去设置，此处采用了script标签作为编辑器容器对象，并设置了其类型是纯文本，从而在避免了标签内部JS代码执行的同时解决了部分同学在使用传统的textarea标签作为容器所带来的一次额外转码问题。

2、提交编辑器内容至后端场景一：在编辑器所在的Form中存在提交按钮，提交动作由点击此按钮完成。

该场景适用于最普通的场合，没有太大问题需要注意，仅三点说明：1) 默认情况下提交到后台的表单名称是“editorValue”，在editor_config.js中可以配置，参数名为textarea。

2) 可以在容器标签（即script标签）上设置name属性，以覆盖editor_config.js中的场景二：编辑器所在的Form中不存在提交按钮，提交动作由外部事件触发。

该场景适用于站点前端交互较多的场合，需要注意的事项主要是在触发form提交动作之前如果使用的是jquery validation可以参考如下代码此处editor是编辑器实例对象。

场景三：编辑器不在任何Form中，提交动作由外部事件触发。

该场景使用不多，但特殊时候可能需要。

UEditor也提供了对应的处理方案，基本逻辑跟场景二一样，只是在执行同步操作的时候需要传入提交form的id，如editor.sync(myFormID)即可。

其他同场景二。

二、图片上传交互1、传统图片上传传统图片上传涉及到的前后端交互主要涉及“上传提交路径”以及“图片保存路径”两个参数，后台保存路径以任何形式（绝对或者相对）、在任何页面展示跟前台无关。

document的几种高度及iframe自适应常用方法

document的几种高度及iframe自适应常用方法四种浏览器对document.body 的clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight大家对clientHeight 都没有什么异议，都认为是内容可视区域的高度（在后台调整iframe的大小时，通常不用这个，而是用scrollHeight ，即整个网页内容的高度），也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 认为offsetHeight 是网页内容实际高度，可以小于clientHeight。

scrollHeight（自适应时候经常用到）IE、Opera 认为scrollHeight 是网页内容实际高度，可以小于clientHeight。

NS、FF 认为scrollHeight 是网页内容高度，不过最小值是clientHeight。

简单地说clientHeight 就是透过浏览器看内容的这个区域高度。

NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。

scrollHeight 则是网页内容实际高度。

同理clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

avue-plugin-ueditor的使用方法

avue-plugin-ueditor的使用方法1. 引言1.1 什么是avue-plugin-ueditoravue-plugin-ueditor是一个基于Vue.js的富文本编辑器插件，它提供了丰富的编辑功能和良好的用户体验，使用户可以方便地进行文本编辑和格式化。

该插件支持多种编辑功能，如加粗、斜体、下划线、插入图片等，用户可以灵活地进行文本编辑和排版。

avue-plugin-ueditor还支持自定义配置，用户可以根据自己的需求进行编辑器的样式和功能调整。

通过avue-plugin-ueditor，用户可以轻松创建富文本内容，使页面内容更加生动、丰富。

avue-plugin-ueditor的易用性和功能强大是其吸引用户的主要原因之一。

用户无需编写复杂的代码，只需简单引入插件即可快速使用，大大提高了用户的工作效率。

avue-plugin-ueditor还提供了丰富的API和文档，用户可以方便地查找相关信息和进行二次开发。

avue-plugin-ueditor是一个功能强大、易用性好的富文本编辑器插件，适用于各种Web开发项目。

1.2 为什么选择avue-plugin-ueditor在选择avue-plugin-ueditor这个富文本编辑器插件时，有很多值得考虑的优点。

avue-plugin-ueditor是一个轻量级的插件，加载速度快，对网页性能影响较小。

avue-plugin-ueditor支持多种格式的文本编辑，包括文字、图片、视频等，用户可以方便地进行多媒体编辑。

avue-plugin-ueditor提供了丰富的编辑功能，包括字体样式、颜色、插入表格等，满足了用户在编辑文本时的各种需求。

avue-plugin-ueditor还支持自定义配置，用户可以根据自己的需求进行个性化设置，使编辑器更符合用户的使用习惯。

选择avue-plugin-ueditor作为富文本编辑器插件，可以提高用户的编辑效率，同时保证编辑质量，是一种明智的选择。

UEditor编辑器的使用教程

UEditor编辑器的使用教程
咱们在开发的时候经常会用到一些所见即所得的编辑器，今天给大家介绍一款由百度开发的UEditor，这个编辑器效果不错，用得起来也很方便简单，大家在开发的时候可以用到这款编辑器。

首先，咱们需要在网上下载这款编辑器：
/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp
我这里下载的是支持jsp的最新版本，它还有支持php,.net的其它版本。

一、完成基本配置：
1.将下载的文件解压到咱们的JavaWeb项目中(如下图)：
2.把相应的jar包导入到项目中(如下)
这几个jar包可以在/ueditor/jsp/lib中找到
最后展示的效果如下：
大家可以看到，这里可以完成各种设置(包含字体，表格，表情，图片等东西)，整体看来，效果还是非常不错的。

二、参数配置效果
完成基本的配置之，咱们又要学习一下，看怎么来进行一些常用参数的配置。

三、上传图片功能
接下来咱们简单说一下插件的上传图片功能，上传功能是自带的，如果你是jsp+servlet 非常简单，直接使用就可以了，但是我们可以去设计上传的路径与名称。

大家可以在
文件的位置：文件中修改的位置(设置到自己需要的位置)
下面是上传了图片后的效果：
四、Struts2的上传功能
下面做一个扩展，如果咱们的项目是使用的Struts2，那么Struts2的核心过滤器会导致咱们的上传失效。

html中图片自适应浏览器和屏幕，宽度高度自适应

html中图⽚⾃适应浏览器和屏幕，宽度⾼度⾃适应1、(宽度⾃适应)：在⽹页代码的头部，加⼊⼀⾏viewport元标签。

2、(字体⾃适应)：字体也不能使⽤绝对⼤⼩（px），⽽只能使⽤相对⼤⼩（em）。

body {font: normal 100% Helvetica, Arial,sans-serif;}3、(流动布局)：各个区块的位置都是浮动的，不是固定不变的。

.main {float: right;width: 70%; }.leftBar {float: left;width: 25%;}float的好处是，如果宽度太⼩，放不下两个元素，后⾯的元素会⾃动滚动到前⾯元素的下⽅，不会在⽔平⽅向overflow（溢出），避免了⽔平滚动条的出现。

4、(⾃适应⽹页设计)：的核⼼，就是CSS3引⼊的MediaQuery模块。

它的意思就是，⾃动探测屏幕宽度，然后加载相应的CSS⽂件。

ueditor sourceeditor参数

ueditor sourceeditor参数摘要：一、引言1.了解ueditor 和sourceeditor2.介绍本文主题：探讨ueditor 和sourceeditor 的参数设置二、ueditor 参数设置1.概述ueditor 参数2.常用参数及其作用a.设置编辑器宽度b.设置编辑器高度c.设置默认字体d.设置字体大小e.设置字体样式f.设置背景颜色g.设置前景颜色h.设置行间距i.设置段落格式三、sourceeditor 参数设置1.概述sourceeditor 参数2.常用参数及其作用a.设置编辑器宽度b.设置编辑器高度c.设置默认字体d.设置字体大小e.设置字体样式f.设置背景颜色g.设置前景颜色h.设置行间距i.设置段落格式四、参数设置实例对比1.ueditor 参数设置实例2.sourceeditor 参数设置实例3.对比分析两者参数设置的异同五、结论1.总结本文内容2.强调参数设置的重要性3.建议根据需求灵活调整参数正文：一、引言UEditor 和SourceEditor 是我国较为常用的两款在线文本编辑器，为广大网友提供了便捷的在线编辑体验。

本文将重点探讨这两款编辑器的参数设置，以帮助大家更好地了解和掌握它们的使用方法。

二、ueditor 参数设置UEditor 是一款基于浏览器的富文本编辑器，提供了丰富的参数设置，以满足不同场景下的需求。

以下是一些常用的ueditor 参数及其作用：1.设置编辑器宽度：通过设置宽度可以控制编辑器在页面中的大小。

2.设置编辑器高度：通过设置高度可以控制编辑器内文本框的高度。

3.设置默认字体：可以设置编辑器中默认显示的字体。

4.设置字体大小：可以设置编辑器中显示的字体大小。

5.设置字体样式：可以设置编辑器中显示的字体样式，如粗体、斜体等。

6.设置背景颜色：可以设置编辑器内部的背景颜色。

7.设置前景颜色：可以设置编辑器内部文本框的前景色颜色。

8.设置行间距：可以设置编辑器中文本的行间距。

ueditor 文本框默认高度

ueditor 文本框默认高度文明的虽然出发点让人伤感。

这有何安排答敏思?继国强，变革于当代充满着不安定的气氛。

优秀者现代化思想，近代已经延续数百年。

尽管我们在进步，但在世界各地依然存在许多问题和挑战。

本文将探讨人与自然的关系、社会问题和人类进步的希望。

人类与自然的关系对于我们的生存和发展至关重要。

自然是我们的母亲，给予我们生命和资源。

然而，人类对自然的过度开发和破坏已经造成了诸多问题，如气候变化、生物灭绝、水资源短缺等。

我们必须反思并采取积极措施来保护和恢复自然环境，以确保我们的子孙后代也能够享受清洁的空气、清澈的水和富饶的土地。

社会问题是我们必须面对和解决的挑战之一。

贫困、失业、犯罪等问题侵蚀着人们的幸福和社会稳定。

我们需要通过改善教育、加强社会福利、完善法律制度等手段来解决这些问题。

只有确保每个人都有平等的机会和享受基本权利，我们才能实现社会的和谐与进步。

人类的进步离不开科技和文化的发展。

科技的发展为人类提供了更多的机会和便利。

然而，科技也带来了新的问题，如信息泄露、隐私保护等。

我们需要制定合适的法律和规章来保护人们的权益，并引导科技的发展朝着对人类有益的方向发展。

文化是人类的精神财富，是我们的根基和灵魂。

我们应该充分发扬和传承各个民族的文化，保护文化多样性。

文化的交流和融合有助于人类的相互理解和和平发展。

因此，人类需要正视各种问题和挑战，并积极采取措施来解决。

我们应该关注人与自然的关系，保护环境；解决社会问题，提高社会公平正义；促进科技创新，实现可持续发展；传承优秀文化，弘扬人类文明。

只有这样，人类才能迈向更加美好和幸福的未来。

Ueditor配置介绍

UEditor除了具有轻量、可定制等优点外，还始终将优化编辑操作、提升用户体验摆在了很重要的位置。

在这一点上，除了对编辑器功能、性能、实现细节等不断地改进和追求创新之外，众多灵活而人性化的自定义配置也充分地体现了这个特点，通过修改配置项的值，用户几乎可以完全地改变编辑器的外观和行为。

从配置本身的优先级来看，UEditor的配置可以分为系统默认配置和用户自定义配置两种类型。

系统默认配置是指editor_config.js中的所有配置，而用户自定义配置则是指用户在实例化编辑器的时候传入的JSON格式的配置。

用户自定义配置的优先级高于系统默认配置，若两者同名，则覆盖系统默认配置。

若未提供对应的用户自定义配置，则采用系统默认配置。

一般情况下，推荐用户在实例化的时候使用自定义配置来代替修改系统默认配置。

从配置对编辑器的作用来看，UEditor的配置又可以分为界面配置和功能配置两种类型。

界面配置主要集中在工具栏配置和初始化配置上；功能配置由于相对较多，下文将筛选一些同学们容易迷惑的配置项来进行讲解，而其他简单的则只要参考具体配置项对应的注释即可。

界面配置1、工具栏配置默认配置项中包含了编辑器的所有按钮，需要改变时，只要在初始化的时候传入对应参数即可。

示例代码如下：var editor = new baidu.editor.ui.Editor({toolbars:[['Paragraph','RowSpacing','FontFamily','FontSize']]});editor.render("myEditor");这个时候的编辑就只有四个工具按钮了。

关于工具栏的更多高级配置，比如改变布局结构，双栏和单栏混排等等2、初始化内容实例化的时候可以使用<textarea id="editor">初始内容</textarea>来为编辑器赋初始值。

百度UEditor编辑器使用教程与使用方法（图文）

百度UEditor编辑器使⽤教程与使⽤⽅法（图⽂）我们在做⽹站的时候，⽹站后台系统⼀般都会⽤到web编辑器，今天笔者就给⼤家推荐⼀款百度UEditor编辑器。

关于这款百度UEditor编辑器官⽹上也有简单的教程，不过看着⽐较费劲，今天笔者就跟⼤家分享⼀下百度UEditor编辑器使⽤教程与使⽤⽅法，希望对⼤家有所帮助。

第⼀：百度UEditor编辑器的官⽅下载地址第⼆：百度UEditor编辑器的功能版本选择当我们进⼊百度UEditor编辑器官⽹点击下载选项后，我们发现⼀共有两个版本供我们选择，⼀个是UBuilder,⼀个是开发版，通过下⾯注释的红⾊⼩字我们可以了解到UBuilder和开发版的区别。

⼀般情况下我们选择UBuilder版本即可。

跟我们以往下载软件的⽅式不同，UEditor采⽤选择性下载。

⾸先是可见功能的选择，共有基本，插⼊，格式化，表格四⼤组，每组下⾯都有若⼲功能按钮，我们可以根据⾃⼰的需求来进⾏选择，如果双击四⼤组则表⽰全选该组按钮。

如果对选择的按钮不满意还可以点击清空选择，有⼀点要提⽰的是如果点击清空选择会清楚掉你原先做过的所有选择。

接着就是隐藏功能，语⾔，服务端版本的选择，隐藏功能默认的是全选，如⾮必要还是不要更改为好。

语⾔选项共分为了中⽂和英⽂两种，默认的是只下载中⽂语⾔包，如果你有需要⽤到英⽂的话可以把英⽂包也加上。

服务端版本⽬前提供了三种，分别为PHP，.NET，JSP，选择完毕后我们就可以点击下载资源包了。

第三：百度UEditor编辑器的配置⽅法技巧1、从官⽹上下载完整源码包，解压到任意⽬录，解压后的源码⽬录结构如下所⽰：_examples：编辑器完整版的⽰例页⾯dialogs：弹出对话框对应的资源和JS⽂件themes：样式图⽚和样式⽂件 php/jsp/.net：涉及到服务器端操作的后台⽂件，根据你选择的不同后台版本，这⾥也会不同，这⾥我们选择phpthird-party：第三⽅插件(包括代码⾼亮，源码编辑等组件）editor_all.js：_src⽬录下所有⽂件的打包⽂件（⽤于发布版本）editor_api.js: API接⼝配置⽂件（开发版本）editor_all_min.js：editor_all.js⽂件的压缩版，建议在正式部署时才采⽤editor_config.js：编辑器的配置⽂件，建议和编辑器实例化页⾯置于同⼀⽬录2、编辑器的实例化页⾯，导⼊编辑器需要的三个⼊⼝⽂件，⽰例代码如下：<script type="text/javascript" charset="utf-8" src="../umeditor.config.js"></script><script type="text/javascript" charset="utf-8" src="editor_api.js"></script><script type="text/javascript" src="../lang/zh-cn/zh-cn.js"></script>3、然后在编辑器的实例化页⾯中创建编辑器实例及其DOM容器，⽰例代码如下：<textarea name="后台取值的key" id="myEditor">这⾥写你的初始化内容</textarea><script type="text/javascript">var editor = new UE.ui.Editor();editor.render("myEditor");//1.2.4以后可以使⽤⼀下代码实例化编辑器//UE.getEditor('myEditor')</script>4、在editor_config.js中查找URL变量配置编辑器在你项⽬中的路径。

ueditor设置默认字体、大小和颜色；回车事件捕获

ueditor设置默认字体、⼤⼩和颜⾊；回车事件捕获他们的API不好看，好⾟苦，百度搜了好久也没什么太多资料，最后还是去看源码，找到了⽐较好的修改⽅法：ueditor⽤iframe实现编辑框，设置body的样式即可，//default font and colorUE.dom.domUtils.setStyles(self.ue.body, {'color': '#868686','font-family' : "'Microsoft Yahei','Helvetica Neue', Helvetica, STHeiTi, Arial, sans-serif", 'font-size' : '14px'});顺便说⼀句：修改配置⽂件ueditor.config.js只是修改可选项，不能修改默认值，所以实例的时候给options，或者editor.setOpt(Object)这些都没⽤。

################ 下⾯是我的代码⽚段，我还实现了回车即发送的功能，希望对其他朋友有所帮助 #### code begin ############//实例化编辑器var self = this;self.ue = UE.getEditor('editor',{toolbars: []});self.ue.ready(function(){self.isloadedUE = true;//set Global.ueditorGlobal.ueditor = self.ue;self.ue.setDisabled();//default font and colorUE.dom.domUtils.setStyles(self.ue.body, {'color': '#868686','font-family' : "'Microsoft Yahei','Helvetica Neue', Helvetica, STHeiTi, Arial, sans-serif", 'font-size' : '14px'});//回车发送UE.dom.domUtils.on(self.ue.body, 'keyup', function(event){if(event.keyCode == 13){console.log('enter ok');event.preventDefault();event.stopPropagation();self.sendMsg();}});});################ code end ############。

ueditor1_4_3_3编辑器修改文章

ueditor1_4_3_3编辑器修改⽂章html的body中:<script id="editor" type="text/plain" ></script>js中://实例化编辑器//建议使⽤⼯⼚⽅法getEditor创建和引⽤编辑器实例，如果在某个闭包下引⽤该编辑器，直接调⽤UE.getEditor('editor')就能拿到相关的实例var ue = UE.getEditor('editor',{//initialFrameWidth :980,//设置编辑器宽度initialFrameHeight:500,//设置编辑器⾼度scaleEnabled:true});后台取出原本⽂章内容放⼊编辑器（ajax回调函数中）：var content = data.body;//判断ueditor 编辑器是否创建成功ue.addListener("ready", function () {// editor准备好之后才可以使⽤ue.setContent(content);});例⼦：html代码:<!doctype html><html><head><meta charset="UTF-8"><title>oneUser</title><link href="/css/blog_style.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="/js/jquery.min.js"></script><script type="text/javascript" src="/js/datepattern.js"></script><script type="text/javascript" src="/ueditor/ueditor.config.js"></script><script type="text/javascript" src="/ueditor/ueditor.all.js"></script><script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script><script type="text/javascript" src="/js/commons_head_foot.js"></script><script type="text/javascript" src="/js/modifyBlog.js"></script></head><body><div><div id="commons_head"></div><div class="navigation"><span>标题:</span><input id="essay_title" type="text" style="font-size:18px;font-weight:bold;"/><br><br>评论:<span id="evaluateCount"></span>点赞:<span id="admireCount"></span><br><span id="createTime"></span></div><div class="center_body" style="margin-top:5px;"><script id="editor" type="text/plain"></script><input type="button" id="modifyContent" value="提交修改" style="float:right;"/></div><div id="commons_foot"></div></div></body></html>js代码:$(function(){//实例化编辑器//建议使⽤⼯⼚⽅法getEditor创建和引⽤编辑器实例，如果在某个闭包下引⽤该编辑器，直接调⽤UE.getEditor('editor')就能拿到相关的实例var ue = UE.getEditor('editor',{//initialFrameWidth :980,//设置编辑器宽度initialFrameHeight:500,//设置编辑器⾼度scaleEnabled:true});var ur = window.location.search;var essayId = ur.substring(9,ur.length);$.ajax({url:"/frame/myEssayDetails/"+essayId,type:"get",contentType:"application/json;charset=utf-8",dataType:"json",success:function(data){$("#essay_title").val(data.title);var essayId = data.id;$("#createTime").html(new Date(data.createTime).pattern("yyyy-MM-dd hh:mm:ss")); $("#evaluateCount").html(data.evaluateCount);$("#admireCount").html(data.admireCount);var content = data.body;//判断ueditor 编辑器是否创建成功ue.addListener("ready", function () {// editor准备好之后才可以使⽤ue.setContent(content);});},error:function(){alert("error");}});$("#modifyContent").click(function(){var allHtml = UE.getEditor('editor').getContent();var title = $("#essay_title").val().trim();$.ajax({url:"/frame/essay",type:"post",contentType:"application/json;charset=utf-8",data:JSON.stringify({"id":essayId,"title":title,"body":allHtml}),dataType:"json",success:function(data){if (data.success==true) {var url = "/index.html";window.location.href=url;} else {alert(data.message);}},error:function(){alert("出错了");}});});});。

UEditor控制上传图片的显示尺寸大小

下面我们就写自己的css，代码如下：
[css] view plain copy
1.<span style="font-size:14px;">/*可以在这里添加你自己的css*/
2.img {
3.max-width: 100%; /*图片自适应宽度*/
4.}
5.body {
6.overflow-y: scroll !important;
7.}
8..view {
9.word-break: break-all;
10.}
11..vote_area {
12.display: block;
13.}
14..vote_iframe {
15.background-color: transparent;
16.border: 0 none;
17.height: 100%;
18.}
19.#edui1_imagescale{display:none !important;} /*去除点
击图片后出现的拉伸边框*/</span>
添加上述css后，再用UEditor编辑器添加文件的时候，图片最大只能到编辑框的边界。

如下：。

React中使用UEditor百度富文本的方法

React中使⽤UEditor百度富⽂本的⽅法前⾔本⽂将介绍笔者在React的项⽬中使⽤百度的富⽂本编辑器Ueditor的过程。

注意本⽂不提供⼀条龙式的使⽤⽅法，只是将使⽤过程中的⼀些实现思路进⾏总结，供以参考。

react项⽬中导⼊ueditor，会存在各种不正交的问题，需要注意。

引⼊⾸先在ueditor官⽹下载最新安装包，然后在项⽬⼊⼝的html中导⼊（导⼊⽅式不⼀，可以采⽤import的⽅式，需要⾃⾏度娘。

但是⽆论哪种引⼊⽅式，只要想⾃定义功能，不正交问题就难以避免QAQ）。

不管三七⼆⼗⼀先跑起来再说。

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>ueditor demo</title></head><body><script type="text/javascript" src="path/ueditor.config.js"></script><script type="text/javascript" src="path/ueditor.all.js"></script>······</body></html>在React项⽬中使⽤ueditor要注意1. 导⼊的路径，笔者使⽤的是项⽬经webpack打包之后的相对路径。

2. 导⼊顺序，配置⽂件要先于源码。

3. 笔者这种引⼊⽅式存在缓存问题，所以修改ueditor.all.js后需要及时清理缓存，测试新的代码。

kindEditor4.1版修改上传图片宽高(图片自适应)

KindEditor 4.1上传图片宽高设置需求：需要将图片设置为自适应，让该图片在任何尺寸的页面中都能正常显示不拉伸，也就是平时使用的给宽度设置百分比，因此需要修改源码。

在网上看了很多文档，有人说要遍历得到的编辑器的内容，找到<img>标签，获取该图片的原始宽高，然后进行修改，我个人表示没有看懂，不清楚怎么实现的。

还有人说要修改kindEditor.js中第3168行附近，在下面代码：var html = '<img src="'+_escape(url)+'" data-ke-src="' + _escape(url) + '" '; 中添加width="'+width+'" height="'+height+'"，我也试了一下，不可用，经过半天时间的研究，基本上实现了图片自适应的效果，下面来分析一下kindEditor中图片部分的源码。

图片中图片相关的源码都封装在plugins/image/image.js中，该文件中主要包括了上传图片的界面，和后台处理，其他不多说，说一下图片上传之后路过的代码部分self.plugin.imageDialog({imageUrl : img ? img.attr('data-ke-src') : 'http://',imageWidth : img ? img.width() : '',imageHeight : img ? img.height() : '',imageTitle : img ? img.attr('title') : '',imageAlign : img ? img.attr('align') : '',showRemote : allowImageRemote,showLocal : allowImageUpload,tabIndex: img ? 0 : imageTabIndex,clickFn : function(url, title, width, height, border, align) { if (img) {img.attr('src', url);img.attr('data-ke-src', url);img.attr('width', width);img.attr('height', height);img.attr('title', title);img.attr('align', align);img.attr('alt', title);} else {self.exec('insertimage', url, title, width, height, border, align);}setTimeout(function() {self.hideDialog().focus();}, 0);}});},上面这段代码，在执行时，第一次上传的图片，获取不到宽和高，也就是clickFn : function(url, title, width, height, border, align) {这一行中width和height都是空值，图片上传后，右键点击图片属性，设置图片宽高，之后可以把宽和高加到HTML代码中，if (img)为图片获取到宽和高的时候，进入，获取不到的时候进入else。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

最近需要使用到网页后台富文本编辑器。

经过同学推荐，最后决定使用百度家的Ueditor. 官方提供了网页上非常方便的自定义工具栏的功能。

自定义之后直接下载对应的代码包并按照文档部署到项目中即可。

其中主要的问题是路径的配置。

首先是将下载好的代码包发布到我们项目的根目录下面。

然后在需要添加富文本编辑器的页面头部添加如下代码： 1. <script type="text/javascript" src="相对该文档的路径
/ueditor/ueditor.config.js"></script>
2. <script type="text/javascript" src="相对该文档的路径
/ueditor/ueditor.all.js"></script>
3. <script>
4. <span style="white-space:pre"> </span>window.UEDITOR_HOME_URL = "/项目相对网
址池绝对路径/ueditor"; 5. </script>
配置路径这一块是非常重要的。

特别是下面的Ueditor的路径，是相对我们整个代码库的目录的。

配置完成之后，直接在我们网页中的<textarea>标签下面添加ueditor的初始化代码：
1. <script type="text/javascript">
2. var editor = new UE.ui.Editor({initialFrameHeight:100,initialFrameWidth: 400 });
3. editor.render("actDescribe");
4. </script>
官方的文档并没有给出如何设置ueditor的宽度和高度的说明。

这是我在网上网友那里找到的解决方法。

在声明编辑器的变量的时候，在参数列表中添加对initialFrameHeight和initialFrameWidth的设置即可。

注意，数值后面不需要添加px。

可是，这种方法有时候奏效有时候也不奏效，因为我碰过一种情况就是无论如何调整initialHeight和initialWidth的数值，编辑器的大小都还是不会改变。

这个时候，我发现，可以通过调整editor所跟随的textarea的宽高来撑开editor的大小。

这也是一种方法，各位同学在官方说明文档出来之前可以两种方法都尝试一下。

当然，好用的文本编辑器还是有很多的，例如kindeditor，之前准备使用这个的，而其文档方面也比较齐全，同时，整个编辑器的size也比较小，对网页的加载速度比较有利。

百度的Ueditor还是有点庞大。

加载时会有卡顿的速度。

估计是我对底层代码的研究不够，多了很多不必要的内容。

慢慢研究或许可以使得Ueditor变小。