UEditor介绍
http://fex.baidu.com/ueditor/ ——官网
重要文件:
注意:
1、jsp/lib包下的jar一定要copy到web-inf/lib下,不然controler.jsp是会报错的
2、所有的配置在config.json和ueditor.config.js两个文件中改动
ueditor实现表情本地化、图片上传及视频上传
ueditor的样例代码如下
<head>
<title>完整demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/utf8-jsp/ueditor.all.min.js"> </script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/utf8-jsp/third-party/jquery-1.10.2.min.js"></script>
<!-- 视屏上传(注:如果无法显示 以下代码可以让Html 识别标签 支持IE,谷歌浏览器) -->
<!-- 播放影音所需插件 -->
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/utf8-jsp/third-party/video-js/video-js.css"/>
<script language="javascript" type="text/javascript" src="${pageContext.request.contextPath }/utf8-jsp/third-party/video-js/video.js"></script>
</head>
<body>
<input type="hidden" value="${pageContext.request.contextPath}" id="contextPath">
<div align="left" style="float: left;">
<form action="" method="post" id="form1" name="form1">
<script id="editor" type="text/plain" name="content"
style="width: 600px; height: 400px;"></script>
<input type="submit" value="提交">
</form>
</div>
<div align="center" style="float:left;margin-left: 20px;">
<div style="float:left;width:600px;height:400px;" id="mmm">
</div>
</div>
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var editor = UE.getEditor('editor',{
//这里可以选择自己需要的工具按钮名称,
toolbars:[ [
'source', //源代码
'anchor', //锚点
'undo', //撤销
'redo', //重做
'bold', //加粗
'indent', //首行缩进
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'blockquote', //引用
'pasteplain', //纯文本粘贴模式
'selectall', //全选
'print', //打印
'preview', //预览
'horizontal', //分隔线
'removeformat', //清除格式
'time', //时间
'date', //日期
'unlink', //取消链接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'cleardoc', //清空文档
'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'simpleupload', //单图上传
'insertimage', //多图上传
'edittable', //表格属性
'edittd', //单元格属性
'link', //超链接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
'map', //Baidu地图
'gmap', //Google地图
'insertvideo', //视频
'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分页
'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'attachment', //附件
'imagecenter', //居中
'wordimage', //图片转存
'lineheight', //行间距
'edittip ', //编辑提示
'customstyle', //自定义标题
'autotypeset', //自动排版
'webapp', //百度应用
'touppercase', //字母大写
'tolowercase', //字母小写
'background', //背景
'template', //模板
'scrawl', //涂鸦
'inserttable', //插入表格
'drafts', // 从草稿箱加载
'charts', // 图表
]],
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//关闭字数统计
wordCount:false,
//关闭elementPath
elementPathEnabled:false,
//图片本地化
emotionLocalization:true,
//关闭本地自动保存
autosave:false,
//默认的编辑区域高度
initialFrameHeight:300,
// 设置成true,div标签会自动转换成p标签
allowDivTransToP: false ,
//更多其他参数,请参考ueditor.config.js中的配置项
});
UE.getEditor("editor").addListener('blur',function(editor){$("#mmm").html(UE.getEditor("editor").getAllHtml())});// 失去焦点事件
$("#form1").submit(function (){
var contextPath=$("#contextPath").val();
$.ajax({
type: "post",
dataType: "html",
url: contextPath+'/index.do',
data: $('#form1').serializeArray(),
success: function (data) {
alert("提交成功>>>");
},
error: function(data) {
alert("error:提交失败");
}
})
})
</script>
</body>
页面效果如下
前台展示代码show.jsp
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/utf8-jsp/third-party/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(display);
function display(){
var contextPath=$("#contextPath").val();
$.post(contextPath + "/testSelect.do", {
}, function(data) {
var sp=eval(data);
var sb="<select id='sss' style='width:150px '>";
for(var i=0;i<sp.length;i++){
sb+="<option value='"+sp[i].uid+"'>"+sp[i].uid+"</option>";
}
sb+="</select>";
$("#head").html(sb);
$('#sss').val('1');
$('#sss').change(function () {
for(var i=0;i<sp.length;i++){
var value=$('#sss option:selected').val();
if(value==sp[i].uid){
$("#part").html(sp[i].ucontent);
}
}
});
});
}
</script>
</head>
<body >
<input type="hidden" id="contextPath" value="${pageContext.request.contextPath }">
<div align="center" id="head">
</div>
<div align="center">
<div align="center" id="part" style="width: 600px">
</div>
</div>
</body>
展示效果
数据库脚本
CREATE TABLE `t_ueditor_test` (
`uid` int(10) NOT NULL AUTO_INCREMENT,
`ucontent` varchar(20000) DEFAULT NULL,
PRIMARY KEY (`uid`)
) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8;
参考博客
https://blog.csdn.net/ystyaoshengting/article/details/46362869