将百度编辑器ueditor用在easyui中
又一个自己想深爱却一直被拖着的对象——百度编辑器（ueditor）
但终究逃不过再次把它“供奉”起来的宿命，这不今天又得好好研究一下它的使用方法，以免自己今后再次使用时的各种不便……
百度编辑器官网：http://ueditor.baidu.com/website/index.html
使用情景：在easyui中使用ueditor
1.下载好最新的easyui包（https://files.cnblogs.com/files/zhengyeye/jquery-easyui-1.5.3.zip）以及ueditor包（https://files.cnblogs.com/files/zhengyeye/ueditor.zip）；
2.使用thinkjs新建好项目（thinkjs官网：https://thinkjs.org/zh-cn/doc/3.0/create_project.html）；
3.将easyui以及ueditor引入到该项目中；
4.正常运行完项目后：
居然有两个“小瑕疵”：列表没有铺满整个屏幕；操作栏不显示操作按钮；仔细看后原来是easyui的属性没写全：
<table id="dg" title="baidueditor" pagination="true" rownumbers="true" fitColumns="true"
fit="true" toolbar="#tb"
data-options="pageSize:25,pageList:[10,15,25,50,100],singleSelect:true,showFooter: true">
<thead>
<tr>
<th data-options="field:'id',width:80">编号</th>
<th data-options="field:'author',width:100">编辑人</th>
<th data-options="field:'state',width:100,align:'center',formatter:formatState">状态</th>
<th data-options="field:'createtime',width:150,align:'center',formatter:formatReg">创建时间</th>
<th data-options="field:'uptime',width:150,align:'center',formatter:formatReg">修改时间</th>
<th data-options="field:'retime',width:150,align:'center',formatter:formatReg">发布时间</th>
<th field="operate" align="center" data-options="formatter:formatOperate">操作</th>
</tr>
</thead>
</table>
fitColumns="true" ---->让列表铺满整个屏幕；
操作栏不显示图片，是因为在html中写的图片地址下没有图片；
完整的index_index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test baidueditor</title>
<link rel="stylesheet" type="text/css" href="/static/js/jquery-easyui-1.5.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/static/js/jquery-easyui-1.5.3/themes/icon.css">
<script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table id="dg" title="baidueditor" pagination="true" rownumbers="true" fitColumns="true"
fit="true" toolbar="#tb"
data-options="pageSize:25,pageList:[10,15,25,50,100],singleSelect:true,showFooter: true">
<thead>
<tr>
<th data-options="field:'id',width:80">编号</th>
<th data-options="field:'author',width:100">编辑人</th>
<th data-options="field:'state',width:100,align:'center',formatter:formatState">状态</th>
<th data-options="field:'createtime',width:150,align:'center',formatter:formatReg">创建时间</th>
<th data-options="field:'uptime',width:150,align:'center',formatter:formatReg">修改时间</th>
<th data-options="field:'retime',width:150,align:'center',formatter:formatReg">发布时间</th>
<th field="operate" align="center" width="110" data-options="formatter:formatOperate">操作</th>
</tr>
</thead>
</table> <!--查询导航开始-->
<div id="tb">
<div style="margin-top: 5px;margin-bottom: 5px;">
<a href="javascript:openAddDialog()" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-add'" plain="true">Add</a>
</div>
</div>
<!--查询导航结束--> <!--新增弹框开始-->
<div id="dlg" class="easyui-dialog" style="width:80%;height:90%;" closed="true" resizable="true" buttons="#dlg-buttons"
overflow-y="scroll">
<form id="fm">
<input type="hidden" id="id" name="id">
<table cellpadding="5px" >
<tr>
<td>编辑器：</td>
<td id="UEDiv">
<script id="container" name="content" style="width:98%;height:350px;" type="text/plain"></script>
</td>
</tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:save()" class="easyui-linkbutton" iconCls="icon-ok">提交</a>
<a href="javascript:cancel()" class="easyui-linkbutton" iconCls="icon-cancel">取消</a>
</div> <!-- 配置文件 -->
<script type="text/javascript" src="/static/js/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/js/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/js/ueditor/lang/zh-cn/zh-cn.js"> </script>
<script type="text/javascript" src="/static/js/plugin/moment.js"></script>
<script type="text/javascript">
//实例化编辑器
var ue = UE.getEditor('container', { //初始化编辑器
theme: "default", //皮肤
lang: 'zh-cn', //语言
allowDivTransToP: false
});
function formatState(value, row, index) {
if (value == -2) {
return '<font color="red">已删除</font>'
}
if (value == -1) {
return '<font color="blue">已保存</font>'
}
if (value == 1) {
return '<font color="green">已发布</font>'
}
}
function formatReg(value, row, index) {
if (value)return moment.unix(value).format("YYYY-MM-DD HH:mm");
}
function formatOperate(value, row, index) {
var edit = '<a onclick="openEditDialog(' + index + ')" href="javascript:void(0)" title="修改" class="linkbutton" data-options="plain:true,iconCls:\'icon-page_edit\'"></a>';
var del = '<a onclick="del(' + index + ')" href="javascript:void(0)" title="删除" class="linkbutton" data-options="plain:true,iconCls:\'icon-delete\'"></a>';
return edit + " "+del;
}
jQuery('#dg').datagrid({
url: '/home/index/list',
onLoadSuccess: function (data) {
jQuery('.linkbutton').linkbutton();
}
}); function openAddDialog(){
jQuery("#addForm").form("reset");
url="/article/circle/add";
jQuery("#dlg").dialog("open").dialog("setTitle", "添加");
}
</script>
</body>
</html>
接着就该在项目中引入ueditor了，可是接下来问题便来了：
在index_index.html中的紫色部分的代码就是用来显示弹框内容的，而其中的红色部分便是显示ueditor；只是ueditor需要前后端同时配置正确方可使用。
重要的部分来了，来了，来了
关于ueditor的配置（这里用自己实际项目举例）
而至于为什么要修改呢，过程真的很复杂，总之一句话：找到合适的对象，然后在原有的基础上改吧改吧就能使用了。
写在最后的：有兴趣的小伙伴可以下载代码运行起来瞧一瞧~
https://files.cnblogs.com/files/zhengyeye/baiduueditor-zyy.zip
将百度编辑器ueditor用在easyui中的更多相关文章
- 百度编辑器ueditor 在vs2008中的使用方法
个人觉得百度编辑器ueditor还是不错的,虽然出生的时间比较短,但某些方面相比其它富文本编辑器更优秀,免费.可定制等等. 由于在官方下载的ueditor包是在vs2012下开发的,可以在vs2010 ...
- 关于百度编辑器UEditor的一点说明
大家在使用的时候要特别注意editor_config.js中的“URL”这个参数 我的理解:1.这个参数是editor整个结构的总路径 2.首先要把这个路径配置好了.才能正常的显示, ...
- 百度编辑器ueditor插入表格没有边框颜色的解决方法
附:从word excel 中 复制的表格提交后无边框,参考这个同学的,写的很详细: http://blog.csdn.net/lovelyelfpop/article/details/51678 ...
- 百度编辑器ueditor插入表格没有边框,没有颜色的解决方法 2015-01-06 09:24 98人阅读 评论(0) 收藏
百度富文本编辑器..很强大.. - - ,不过有些BUG..真的很无解.. 最近用这个,发现上传的表格全部没有表框.. 解决办法如下: 转载的.. 百度编辑器ueditor插入一个表格后,在编辑过程中 ...
- 百度编辑器ueditor 异步加载时，初始化没办法赋值bug解决方法
百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法 金刚 前端 ueditor 初始化 因项目中使用了百度编辑器——ueditor.整体来说性能还不错. 发现问题 我在做一个编辑页面 ...
- 工具，如何去掉百度编辑器 ueditor 元素路径、字数统计等
去掉如下截图: 在百度编辑器 ueditor 根目录下: ueditor.config.js 文件中 搜索并将参数elementPathEnabled设置成false即可 常用功能开关如下: ,ele ...
- [转载]百度编辑器-Ueditor使用
前段时间发表过一篇关于“KindEditor在JSP中使用”的博文.这几天在沈阳东软进行JavaWeb方面的实习工作,在一个CMS系统的后台和博客板块中又要用到文本编辑器,突然发现了这个——百度编辑器 ...
- 百度编辑器 ueditor .net开发
ueditor1.4.3 下载地址:http://pan.baidu.com/s/1bnCQVtd <!--editor--> <script type="text/j ...
- 百度编辑器ueditor前台代码高亮无法自动换行解决方法
这两天本站成功安装整合了百度编辑器ueditor,用着还挺不错,但是遇到了点小问题 问题描述: 在内容里面插入代码高亮显示,后台编辑器中是可以自动换行的,但是发表后,在前台查看,发现代码不能自动换 ...
随机推荐
- RootKit
类型0:藏在人群中,干扰人工肉眼检查 类型1 2:篡改系统内部的数据结构和调用表,破坏自动化检测工具,这项数据结构和调用表是检测工具和KootKit共用的 类型3:跳出束缚,由rootkit实现本该宿 ...
- Eclipse导入到web项目没有run on server
由于以前的项目都是用myeclipse开发的,现在要换成eclipse来开发.但是项目导入到eclipse中发现该项目并不是web项目,也不能部署到tomcat里面去. 现在解决了这个问题了. ...
- DAO层，Service层，Controller层、View层
DAO层:DAO层主要是做数据持久层的工作,负责与数据库进行联络的一些任务都封装在此,DAO层的设计首先是设计DAO的接口,然后在Spring的配置文件中定义此接口的实现类,然后就可在模块中调用此接口 ...
- c++ 的类 和 类继承, 什么是c++中的基类和派生类？
闲云潭影日悠悠,物换星移几度秋 你既然已经做出了选择, 又何必去问为什么选择.鬼谷绝学的要义, 从来都不是回答, 而是抉与择 普通类 #ifndef TABTENN0_H_ #define TABTE ...
- SAP NUMBER RANGE维护配置object FBN1 Deletion only possible if status is initial
背景: 错误日志: SAP FBN1 Deletion only possible if status is initial 场景: 如果目标机已有NUMBER RANGE 不为0,需要删除配置年为9 ...
- 层层递进——宽度优先搜索（BFS）
问题引入 我们接着上次“解救小哈”的问题继续探索,不过这次是用宽度优先搜索(BFS). 注:问题来源可以点击这里 http://www.cnblogs.com/OctoptusLian/p/74296 ...
- Can't read [proguard.ClassPathEntry@1a0c10f] (No such file or directory)
//该错误无法识别,是因为你使用了旧版本的proguard,建议你下载新版本4.5以上的proguard来替代Android SDK中使用的旧版sdcard 这样你就可以知道错误所在.因为只有4.5版 ...
- C# 最小化到托盘，托盘右击菜单显示
添加notifyIcon控件,并添加Icon,否则托盘没有图标(托盘右键菜单也可直接在属性里添加): 主要的代码: public partial class Form1 : Form { #regio ...
- Android 下载zip压缩文件并解压
网上有很多介绍下载文件或者解压zip文件的文章,但是两者结合的不多,在此记录一下下载zip文件并直接解压的方法. 其实也很简单,就是把下载文件和解压zip文件结合到一起.下面即代码: URLConne ...
- Hopewell Project Sharing项目总结分享PPT
这篇随笔记录的是2013年底,Hopewell Project已经成功验收后,开项目分享会所编写的PPT. 由于此项目是本人带领Team成员一起开发,而且关键技术是自己把控,所以公司希望能开个项目分享 ...