UEditor的使用、配置以及解决二次不渲染的问题

乐之者java

于 2020-05-25 20:14:57 发布

阅读量1.5k

点赞数

分类专栏： java 文章标签： web

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/106311939

版权

java 专栏收录该内容

120 篇文章 0 订阅

订阅专栏

ueditor的使用－－－如何在页面展示它

UEditor是百度提供给我们的一款富文本插件，现在最新的版本是ueditor1_4_3_3，并且2016年都是这个版本了，也经历了那么多年了，应该bug都被消磨殆尽了吧。所谓富文本插件，简单来讲就是网页版的word，就是可以让你像编写word文档一样编写textarea输入域，其他比较常用的还有ckeditor等。

去http://ueditor.baidu.com/website/download.html官网下载：

选择自己想要使用的，我使用的是jsp的utf-8版本。下载下来之后解压结构：

新建一个jsp页面引入吧：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
    <script type="text/javascript" src="rs/uedit/utf8-jsp/ueditor.config.js"></script>
    <script type="text/javascript" src="rs/uedit/utf8-jsp/ueditor.all.js"></script>
    <script type="text/javascript" src="rs/uedit/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
    <style>
     #wrap{
     width:800px;
    }
    </style>
</head>
<body>
<div id="wrap">
    <form method="post" id="ueditForm">
        <textarea id="container" name="content" ></textarea>
        <input type="button" id="submitBtn" value="提交">
    </form>
</div>
<script type="text/javascript">
var ue = UE.getEditor('container',{
    autoHeightEnabled: true,
    autoFloatEnabled: true
});
</script>
</body>
</html>

就这样就可以了，访问：

ueditor 的常用配置项

前边ueditor的快速入门部分我写了如何快速的在页面显示一个ueditor，但是这个ueditor还有很多配置项，有些配置项还是很常用的，比如你玩玩之后就会发下有个下面的情况：

微信截图_20180312171348.png

一会出来一个“本地保存成功”，我把页面关闭，也没见它再给我加载出来，网上也没找到保存到哪里去了，我想关闭它。

再比如：

我又该怎么去掉。

再比如我想给输入文本域一个初始化的高度怎么配置？当在文本域中输入的内容很多出现滚动条的时候，为了我能方便的操作工具栏，怎么让工具栏浮动起来，就像下面的效果：

这些详细的选项有很多很多，我也不能一个个的给大家说，大家可以到http://fex.baidu.com/ueditor/去查看ueditor的配置项手册。

<script type="text/javascript">
var ue = UE.getEditor('container',{
    autoHeightEnabled: true,//随着内容的增大输入域自动变高,默认true
    wordCount:false,//去掉字数统计
    elementPathEnabled:false,//去掉元素路径
    initialFrameHeight:300,//初始高度
    autoFloatEnabled: true,//自动浮动工具栏,默认true
    enableAutoSave:false,  //自动保存
    saveInterval:0 
});
</script>

Editor解决UEditor1.4.3二次不渲染的问题

问题描述：

使用$("#toAdd_extral").load('toAddExtral',{'channel_id':newValue});加载的页面extra.jsp里面有个ueditor，但是第二次打开的时候只有一个textarea,UEditor并没有渲染，需要重新刷新页面才可以。查看ueditor.all.js文件，在里面找依照getEditor()函数，如下：

这段可以看到，在调用UE.getEditor(‘_editor’)初始化UEditor时，先从一个名字叫做instances的变量中去获取，没有的话才实例化一个Editor，这就是引起问题的原因。
在第一次跳转到编辑器界面时，正常的实例化了一个新的编辑器对象，并放入instances，调用editor.render(id)渲染编辑器的DOM；
第二次初始化时却仅从容器中取到实例：var editor = instances[id]; 直接返回了editor对象，而编辑器的DOM并没有渲染。

解决上面的问题

发现问题比较难，发现了之后就简单多了：

$(function(){
	UE.delEditor("extraCols_xxx");
	toAddUe = UE.getEditor("extraCols_xxx",{
	    //匹配项
	});
});

即，先执行UE.delEditor("extraCols_xxx");删除掉原先instances中缓存的实例即可。

乐之者java

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
UEditor的使用、配置以及解决二次不渲染的问题

ueditor的使用－－－如何在页面展示它UEditor是百度提供给我们的一款富文本插件，现在最新的版本是ueditor1_4_3_3，并且2016年都是这个版本了，也经历了那么多年了，应该bug都被消磨殆尽了吧。所谓富文本插件，简单来讲就是网页版的word，就是可以让你像编写word文档一样编写textarea输入域，其他比较常用的还有ckeditor等。去http://ueditor.baidu.com/website/download.html官网下载：选择自己想要使...
复制链接

扫一扫

专栏目录