UEditor介绍

最新推荐文章于 2023-10-08 22:36:33 发布

岁月忐忑如歌

最新推荐文章于 2023-10-08 22:36:33 发布

阅读量7.7k

点赞数 3

分类专栏：前端框架

本文链接：https://blog.csdn.net/weixin_40393061/article/details/82924638

版权

前端框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

岁月忐忑如歌

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
UEditor介绍

http://fex.baidu.com/ueditor/ ——官网重要文件：注意：1、jsp/lib包下的jar一定要copy到web-inf/lib下，不然controler.jsp是会报错的2、所有的配置在config.json和ueditor.config.js两个文件中改动ueditor实现表情本地化、图片上传及视频上传ueditor的样例代码如下&lt;hea...
复制链接

扫一扫

专栏目录