wangEditor（轻量级web富文本编辑器）学习[全面]

最新推荐文章于 2024-05-21 10:05:48 发布

Yvette_QIU

最新推荐文章于 2024-05-21 10:05:48 发布

阅读量3.5k

点赞数 1

分类专栏： # 杂学

本文链接：https://blog.csdn.net/qq_41042595/article/details/88413529

版权

杂学专栏收录该内容

9 篇文章 0 订阅

订阅专栏

了解：

我为什么要做富文本编辑器【wangEditor5个月总结】

轻量级富文本编辑器wangEditor源码结构介绍

wangEditor——介绍、使用手册

学习：

wangEditor包的下载 —— 轻量级web富文本框【试用：http://wangEditor.github.io/】

wangEditor上传本地视频

参考：

wangEditor的使用【主要讲脚本代码】

wangEditor - 轻量级web富文本编辑器（可带图片上传）【有对应的pojo、controller、jsp(含js)、导入依赖代码（若带图片上传，可以看看）】

使用wangEditor实现富文本编辑（后端为Java）【全面：有对应的pojo、controller、jsp(含js)、service、serviceImp代码（若带图片上传，可以看看）】

$.ajax() AJAX请求页面接收后台json数据显示[object Object]解决方法【JSON.stringify（）】

Bootstrap-table如何显示后台传过来的JSON数据？【$.getJSON（）】

-------------------------没有带图片上传，只是简单的通知公告---------------

(我只传三个控件值,notice、title、content)ajax传的值为“[object Object]”，导致传值不了给Javabean对象：

改：（对我的，没有用，或许在后台要做某些操作才能取ajax传过来的json值，我没继续处理了）

可是照样传值不了给NoticeDetailVo对象

改：（对我的，也没有用）

改：(成功的！！！)

编辑前：

编辑发布后：

多加了个id为content的隐藏控件,为了将editor.txt.html()获取的内容赋值于这个隐藏控件,然后通过ajax取form1表单数据并传至后台：（代码随着页面的完成,而更改了些许,成为正确的能正常使用的页面代码，还补充success属性！！！）

-------------------------jsp页面代码-----------------------------------
<head>
    <!-- 文本编辑器(src值错误,导致编辑器无用)    css文件控制这"toolbar"的工具效果   js文件控制这编辑框和toolbar的显示与编辑框的文本获取 -->
    <link rel="stylesheet" href="../editor/wangEditor.min.css">
    <script type="text/javascript" src="../editor/wangEditor.min.js"></script>
    <style>
		.text {
			border: 1px solid #ccc;
			height: 300px;
			/*width: 800px;*/
		}
		.toolbar {
			border: 1px solid #ccc;
			/*width: 800px;*/
		}
	    body {
	        padding-top: 10px;
	        /*background-color: aqua; */
	    }		
    </style>
</head>
<body>
	<div class="container">
		<form  role="form" method="post" id="form1" name="form1">
			<a class="btn btn-default" href="${pageContext.request.contextPath }/noticeDetail/index" method="post" >返回</a>
			<input type="hidden" id="noticeId" name="noticeId" value="${ndVo.noticeId }">
			<input type="hidden" id="content" name="content" >
			<div class="form-group">
				<label for="title"><h4 style="text-align:left;padding:10px;"><b>标题</b></h4></label>
				<input type="text" class="form-control" id="title" placeholder="请输入标题" name="title" value="${ndVo.title }"/>
				<span class="col-lg-8" id="editor"></span>
			</div>
		</form>
        <div class="form-group" >
                <button class="btn btn-primary" id="save">发布</button>
         </div>
	</div>
    <script>
    $(function(){
        var E = window.wangEditor;
        var editor = new E('#editor');

        
        //代码随着页面的完成,而更改了些许,成为正确的能正常使用的页面代码
        // 自定义菜单配置,没有这个,editor.create()自动加上menu(菜单和编辑框在一起的),若用div1和div2的,菜单和编辑框是分开的
        editor.customConfig.menus = [
			    'head',  // 标题
			    'bold',  // 粗体
			    'fontSize',  // 字号
			    'fontName',  // 字体
			    'italic',  // 斜体
			    'underline',  // 下划线
			    'strikeThrough',  // 删除线
			    'foreColor',  // 文字颜色
			    'backColor',  // 背景颜色
			    'link',  // 插入链接
			    'list',  // 列表
			    'justify',  // 对齐方式
			    'quote',  // 引用
			    //'emoticon',  // 表情
			    'image',  // 插入图片
			    'table',  // 表格
			    //'video',  // 插入视频
			    'code',  // 插入代码
			    'undo',  // 撤销
			    'redo'  // 重复
        ];

        //创建编辑器
        editor.create();

        $("#save").click(function(){
            //获取内容(含标签代码)"<p>你好世界</p><span........."
            var content = editor.txt.html();
            //获取内容的文本内容
            var content2=editor.txt.text();
            $("#content").val(content);//将值赋值给隐藏控件,
            var form = new FormData(document.getElementById("form1"));
            $.ajax({
                url : "${pageContext.request.contextPath }/noticeDetail/update",
                type : "post",
                data : form,
                cache : false,
                processData : false,
                contentType : false,

                //补充：这是做着做着项目发现要加上的success属性
                success : function(result) {
                    window.location.href="${pageContext.request.contextPath }/noticeDetail/index";//动态输出跳转，路径还是要加上绝对路径的(注意绝对路径后要加上'/'否则404"项目名noticeDetail/index")！！！
                },

                error : function(result) {
                    alert("网络错误，请重试！！");
                }
            });				
        });
    })
    </script>
</body>

---------------noticeDetail/add  控制器-------------
@Controller
@RequestMapping(value="/noticeDetail")
public class NoticeDetailController {

	@Resource
	NoticeDetailService ndService;
	@Resource
	EmployeeService empService;
	@Resource
	DepService depService;
	@Resource
	ClassService clsService;
	List<EmployeeVo> empList;
	String depIds="";
	String clsIds="";
	
	@RequestMapping(value="/index")
	public String  index(Map map){
		empList=empService.listAllNoPage();
		List<DepartmentVo> depList=depService.findAllDep();
		depIds="";//初始化
		clsIds="";
		for (DepartmentVo depVo : depList) {
			depIds+=depVo.getDepId()+",";
		}
		List<ClassVo> clsList=clsService.list();
		for (ClassVo clsVo : clsList) {
			clsIds+=clsVo.getClassId()+",";
		}
		map.put("empList",empList);//弹框和列表在同一页面,那么传EmpList这样的值,要在一进入时传进去,而不是放在list()里,json返回没谁接收
		map.put("depList",depList);
		map.put("clsList",clsList);		
		return "qyf/noticeDetailList";//我就不显示noticeDetailList页面了,目前不重要
	}
    @RequestMapping("/list")
	@ResponseBody
	public Map list(@RequestBody Map<String,Object> params,NoticeDetailVo nd){
    ......................
    }
	@RequestMapping("/add")
	public String add(NoticeDetailVo nd,Map map){
		if(nd.getNoticeId()==0){
			System.out.println("-----------add------"+nd);//自动调用toString()
			int i=nd.getTypeId();
			depIds=depIds.substring(0, depIds.lastIndexOf(','));//将末尾多余的','去除
			clsIds=depIds.substring(0, clsIds.lastIndexOf(','));//将末尾多余的','去除
			System.out.println("depIds=="+depIds+"         clsIds=="+clsIds);
			if(i==1){
				nd.setDepIds(depIds);
				nd.setClassIds(clsIds);
			}else if(i==2){
				nd.setDepIds(depIds);
			}else if(i==4){
				nd.setClassIds(clsIds);
			}
			nd.setStatus(1);			
			ndService.add(nd);
			nd=ndService.ndById(nd.getNoticeId());
			map.put("ndVo", nd);			
		}
		return "qyf/noticeDetailAdd";//从表单提交到这方法,无需@ResponseBody注解,那么我转向其他页面,直接return其他页面
	}
    @RequestMapping("/update")
	@ResponseBody
	public String update(NoticeDetailVo nd){
		if(nd.getNoticeId()!=0){	
            System.out.println("-----------add_update------"+nd);		
			ndService.update(nd);
		}
		return "";//add页面用ajax传到update方法修改完之后要加注解@ResponseBody返回原来add页面,不论return什么(要是有传值回页面的必要,当然传某些值),加了之后都会去success属性(在里面加location.window.href能从add页面跳转List页面),否则去error里并会弹出"网络错误，请重试！！"
	}
}

----------Service类    DAO接口类、DAO配置文件（Mapper）----------------------------

了解：

MySQL中varchar最大长度是多少？【我的MySQL5.5版】

通知公告内容可能不满足于varchar255字符长度，所以：

（警告的译文：行大小太大。使用的表类型(不包括blob)的最大行大小为65535。这涉及到存储开销，请检查手册。您必须将一些列更改为文本或blob）

然后我改：

了解：【不同方式展示他们的不同】

window.location.href的用法(动态输出跳转)

window.location.href和window.open的几种用法和区别

ajax传值给通知公告的update方法，修改之后，一定会返回ajax在的页面（add页面），所以加注解@ResponseBody，return什么都行，反正不会报错，很成功的去success属性的function里，想跳转别的页面，用“ window.location.href="........." ”语句：

我在编辑器加了emoji表情(那个黄色笑脸的)，点击“发布”按钮，后台就报错了：

严重: Servlet.service() for servlet [SpringMVC] in context with path [/HTGlory] threw exception [Request processing failed; nested exception is org.springframework.jdbc.UncategorizedSQLException: 
### Error updating database.  Cause: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x89</...' for column 'content' at row 1
### The error may involve com.ht.qyf.mapper.NoticeDetailDAO.update-Inline
### The error occurred while setting parameters
### SQL: update NoticeDetail        SET title=?,                                           content=?           where noticeId=?;
### Cause: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x89</...' for column 'content' at row 1
; uncategorized SQLException for SQL []; SQL state [HY000]; error code [1366]; Incorrect string value: '\xF0\x9F\x98\x89</...' for column 'content' at row 1; nested exception is java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x89</...' for column 'content' at row 1] with root cause
java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x89</...' for column 'content' at row 1
	at com.mysql.jdbc.SQLError.createSQLException(SQLError.java:957)
	at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:3878)
	at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:3814)
	at com.mysql.jdbc.MysqlIO.sendCommand(MysqlIO.java:2478)
	at com.mysql.jdbc.MysqlIO.sqlQueryDirect(MysqlIO.java:2625)
	at com.mysql.jdbc.ConnectionImpl.execSQL(ConnectionImpl.java:2551)
	at com.mysql.jdbc.PreparedStatement.executeInternal(PreparedStatement.java:1861)
	at com.mysql.jdbc.PreparedStatement.execute(PreparedStatement.java:1192)
	at com.alibaba.druid.filter.FilterChainImpl.preparedStatement_execute(FilterChainImpl.java:3005)
	at com.alibaba.druid.filter.FilterEventAdapter.preparedStatement_execute(FilterEventAdapter.java:440)
	at com.alibaba.druid.filter.FilterChainImpl.preparedStatement_execute(FilterChainImpl.java:3003)
	at com.alibaba.druid.proxy.jdbc.PreparedStatementProxyImpl.execute(PreparedStatementProxyImpl.java:136)
	at com.alibaba.druid.pool.DruidPooledPreparedStatement.execute(DruidPooledPreparedStatement.java:493)
	at sun.reflect.GeneratedMethodAccessor150.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
	at java.lang.reflect.Method.invoke(Unknown Source)
	at org.apache.ibatis.logging.jdbc.PreparedStatementLogger.invoke(PreparedStatementLogger.java:62)
	at com.sun.proxy.$Proxy43.execute(Unknown Source)
	at org.apache.ibatis.executor.statement.PreparedStatementHandler.update(PreparedStatementHandler.java:44)
	at org.apache.ibatis.executor.statement.RoutingStatementHandler.update(RoutingStatementHandler.java:69)
	at org.apache.ibatis.executor.SimpleExecutor.doUpdate(SimpleExecutor.java:48)
	at org.apache.ibatis.executor.BaseExecutor.update(BaseExecutor.java:105)
	at org.apache.ibatis.executor.CachingExecutor.update(CachingExecutor.java:71)
	at org.apache.ibatis.session.defaults.DefaultSqlSession.update(DefaultSqlSession.java:152)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
	at java.lang.reflect.Method.invoke(Unknown Source)
	at org.mybatis.spring.SqlSessionTemplate$SqlSessionInterceptor.invoke(SqlSessionTemplate.java:355)
	at com.sun.proxy.$Proxy96.update(Unknown Source)
	at org.mybatis.spring.SqlSessionTemplate.update(SqlSessionTemplate.java:251)
	at org.apache.ibatis.binding.MapperMethod.execute(MapperMethod.java:54)
	at org.apache.ibatis.binding.MapperProxy.invoke(MapperProxy.java:52)
	at com.sun.proxy.$Proxy114.update(Unknown Source)
	at com.ht.qyf.service.NoticeDetailService.update(NoticeDetailService.java:59)
	at com.ht.qyf.service.NoticeDetailService$$FastClassBySpringCGLIB$$4c18c4e.invoke(<generated>)
	at org.springframework.cglib.proxy.MethodProxy.invoke(MethodProxy.java:204)
	at org.springframework.aop.framework.CglibAopProxy$CglibMethodInvocation.invokeJoinpoint(CglibAopProxy.java:717)
	at org.springframework.aop.framework.ReflectiveMethodInvocation.proceed(ReflectiveMethodInvocation.java:157)
	at org.springframework.transaction.interceptor.TransactionInterceptor$1.proceedWithInvocation(TransactionInterceptor.java:99)
	at org.springframework.transaction.interceptor.TransactionAspectSupport.invokeWithinTransaction(TransactionAspectSupport.java:281)
	at org.springframework.transaction.interceptor.TransactionInterceptor.invoke(TransactionInterceptor.java:96)
	at org.springframework.aop.framework.ReflectiveMethodInvocation.proceed(ReflectiveMethodInvocation.java:179)
	at org.springframework.aop.framework.CglibAopProxy$DynamicAdvisedInterceptor.intercept(CglibAopProxy.java:653)
	at com.ht.qyf.service.NoticeDetailService$$EnhancerBySpringCGLIB$$9641ed30.update(<generated>)
	at com.ht.qyf.controller.NoticeDetailController.add(NoticeDetailController.java:136)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
	at java.lang.reflect.Method.invoke(Unknown Source)
	at org.springframework.web.method.support.InvocableHandlerMethod.doInvoke(InvocableHandlerMethod.java:221)
	at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:137)
	at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:110)
	at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandleMethod(RequestMappingHandlerAdapter.java:777)
	at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:706)
	at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:85)
	at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:943)
	at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:877)
	at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:966)
	at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:868)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:646)
	at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:842)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:727)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:303)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208)
	at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:241)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208)
	at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:88)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:241)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:220)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:122)
	at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:501)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:170)
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:98)
	at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:950)
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:116)
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:408)
	at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1040)
	at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:607)
	at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:313)
	at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
	at java.lang.Thread.run(Unknown Source)

借鉴：

存储emoji表情时，数据库存储失败，控制台 Caused by: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x97\

参考：

彻底解决：java.sql.SQLException: Incorrect string value: '\xF0\x9F\x92\x94' for column 'name' at row 1【说要：修改数据表的编码为utf8mb4】

参考文章说：

要先改my.ini文件，然后重启MySQL，接着“修改数据表的编码为utf8mb4” ，再接着，我的SSM项目的jdbc.properties里的jdbc_url不加characterEncoding=UTF-8，最后就是重启项目（restart）【最终，对于我的，还是无用的，接着，我就想，通知公告，这么严肃的事儿，发什么表情！！！所以不继续处理，而是将“自定义菜单”的emoji注释掉】

----------------------------------------THE END------------------------------------

Yvette_QIU

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
1
评论
wangEditor（轻量级web富文本编辑器）学习[全面]

了解：我为什么要做富文本编辑器【wangEditor5个月总结】轻量级富文本编辑器wangEditor源码结构介绍wangEditor——介绍、使用手册学习：wangEditor包的下载 —— 轻量级web富文本框【试用：http://wangEditor.github.io/】wangEditor上传本地视频参考：wangEditor的使用【主要讲脚本代码】...
复制链接

扫一扫