java实现在线富文本编辑器，并传格式数据给后端

做了一个简易在线的富文本编辑器，前端是html，后台是Java

前端代码：

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><title></title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><script src="https://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.js"></script><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body><form method="post" th:action="@{/test3}"><div><div id="intro" class="TextContent"></div><label for="txtIntro"></label><textarea style="display: none" name="mytxtIntro" id="txtIntro"></textarea><input class="btn btn-primary" type="submit" value="确认提交"></div>
</form></body><script type="text/javascript">var E = window.wangEditor;var editor = new E('#intro');//    获取隐藏控件<textarea>的id，用于显示内容，也方便后台获取内容var $text1 = $('#txtIntro');// 监控wangEditor中的内容变化，并将html内容同步更新到 textareaeditor.customConfig.onchange = function (html) {$text1.val(html);};//    设置上传本地图片到服务器editor.customConfig.uploadImgServer = '/upload';editor.create();$text1.val(editor.txt.html());// 初始化 textarea 的值
</script></html>

后台代码：

@RequestMapping(value = "/test3")public String toIndex2(HttpServletRequest request, Model model) {String s = request.getParameter("mytxtIntro");System.err.println(s);return "test3";}

效果展示:

java实现在线富文本编辑器，并传格式数据给后端相关推荐

在线富文本编辑器 UMeditor
2019独角兽企业重金招聘Python工程师标准>>> UMeditor,简称UM,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器. UM的主要特点就是容 ...
三甲：在线富文本编辑器的架构设计及实践
12月5日, 极客邦(InfoQ)在深圳举办 GMTC 大会,蚂蚁集团语雀编辑器技术同学三甲受邀参加大会并分享<在线富文本编辑器的架构设计及实践>,以下内容是根据现场演讲收集整理. 大家下 ...
在线富文本编辑器-基于Web的HTML编辑器大全（一）
基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或是一个富文本的编辑器,是我们在开发WEB应用和内容管理系统时接收用户输入时必需要考虑的问题.下面是网上牛人收集的一些开源的WEB在线的 ...
kindeditor java ssm_easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
java 富文本编辑器的标签处理数据从数据库中取出并返回前台
总结: 1.使用 HtmlUtils.htmlEscape ()方法对字符串中的标签转义 2.使用 removeHtmlTag() 得数据具体步骤如下: 我的数据库的存储格式被转义过了,这个因人而 ...
在线富文本编辑器FckEditor配置（.Net Framework 3.5）
进入FCKeditor文件夹,编辑 fckconfig.js 文件. 1.上传设置 . var _FileBrowserLanguage = 'php' ; // ...
KindEditor富文本编辑器上传功能PHP语言报错问题
问题产生过程:项目原本使用的是Ueditor编辑器,由于其中js代码有使用parentNode获取HTML节点,IE浏览器内核不支持parentNode ,会有二次加载富文本编辑器不渲染的问题,所以更 ...
编辑器图片上传 linux,summernote 富文本编辑器上传本地图片
jQuery version: 1.12.4 Bootstrap version: 3.3.7 summernote 是基于jQuery 和 Bootstrap 的轻量级富文本编辑器所以在使用sum ...
解决TinyMCE富文本编辑器上传视频后在编辑区域内不能预览视频，被替换成img标签的问题
以前用百度的UE,代码陈旧,有很多定制化的需求改起来很费劲,后来发现国外有个一直在维护的TinyMCE编辑器,功能强大,便转跳到这个坑里了. 目前遇到的坑:富文本编辑器里上传了本地视频之后,会默认给替 ...

java实现在线富文本编辑器，并传格式数据给后端

做了一个简易在线的富文本编辑器，前端是html，后台是Java

前端代码：

后台代码：

效果展示:

java实现在线富文本编辑器，并传格式数据给后端相关推荐

最新文章

热门文章