保存富文本编辑器内容

在这里我使用的是layUI的layedit模块，layUI中的富文本编辑器模块。

第一步我们先将页面搭建好，引入layui.layedit模块和layui.form模块。form模块可用于表单的数据验证和提交

在form表单中建一个textarea

<textarea class="layui-textarea" id="example" name="example"></textarea>

var form = layui.form;//引入form模块
var layedit = layui.layedit;//引入layedit模块
var laybuild =  layedit.build("example",{tool:['strong' ,'italic','underline','del','|','left','center','right','|','face']
});
//tool 自定义工具栏

使用layedit.build方法，将textare替换为layui富文本编辑器。tool为工具栏，不设置则显示默认的工具栏。

在form表单的【提交】按钮中设置lay-filter属性，可以对表单数据进行完整性验证。

<button class="layui-btn layui-btn-blue" lay-submit lay-filter="formDemo">提交</button>

之后就可以提交表单了，使用form.on方法监听表单提交，若想阻止表单跳转，则可以设置return false

form.on('submit(formDemo)',function(data){var content = layedit.getContent(laybuild);//通过layedit.getContent()方法获得富文本编辑器内容$.post("${ctx}/servlet/CliServlet?fun=saveExample",{examplecontent:content},function(e){if(e){layer.alert("新增成功！",{offset:'150px',icon:1,title:'提示'});setTimeout(function(){window.location.href="${ctx}/jsp/backstage/client-example.jsp";}, 1500);}});//阻止表单跳转，我们使用post方法提交给servletreturn false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

这里要区分的是，getContent()方法是获取富文本编辑器内的所有内容，包括字体、对齐、表情和图片等等，而getText()是获取编辑器纯文本内容。

public void saveExample(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{boolean state=false;String examplecontent = request.getParameter("examplecontent");//接收文本内容String name = System.currentTimeMillis()+".txt";//获取当前纳秒作为文件名//获取服务器路径，拼接完整的文件路径String uploadPath = request.getServletContext().getRealPath("") + File.separator + "example"+File.separator +"content"+File.separator +name;// 如果目录不存在则创建File uploadDir = new File(uploadPath);if (!uploadDir.exists()) {//File.mkdirs()创建目录uploadDir.getParentFile().mkdirs();//创建父级文件路径//File.createNewFile()创建文件   uploadDir.createNewFile();}//RandomAccessFile(File,'rw')   以”读写“模式打开刚才创建的文件RandomAccessFile accessFile = new RandomAccessFile(uploadDir, "rw");accessFile.seek(accessFile.length());accessFile.write(examplecontent.getBytes());//将内容写入文件中accessFile.close();//关闭流ExampleVo example = new ExampleVo();example.setComposedate(new Date(new Date().getTime()));example.setExamplecontent(name);//最后将保存时间和文件名保存进数据库state = cliSer.saveExample(example);//返回结果response.getWriter().write(String.valueOf(state));
}

这里用到了File类的mkdirs()方法和createNewFile()方法，分别是创建目录和创建文件。之后再使用RandomAccessFile类，对文件进行操作，将文本内容写入文件中。

保存富文本编辑器内容相关推荐

如何实现用将富文本编辑器内容保存为txt文件并展示
1.实现思路创建一个xx.txt文件,存放于项目路径下用文件流去读取文件内容并将读取的内容存放到页面的富文本编辑器框内富文本编辑框内容改变后,保存时用文件流的方式保存到xx.txt文件中提示: ...
微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
java导出富文本到word_富文本编辑器内容实现word导出下载，请各位大神们指点，感激不尽...
展开全部给个我之前的写的例子给你action 层public ActionForward dataExport(ActionMapping mapping, ActionForm form, Htt ...
VUE渲染富文本编辑器内容
<div v-html="bk.bkContent"></div> bk.bkContent为content
Django框架—富文本编辑器
借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的.所见即所得的页面此处以tinymce为例,其它富文本编辑器的使用也是类似的在虚拟环境中安装包 pip install dj ...
小程序开发笔记（二）：微信小程序富文本编辑器editor的使用
小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助. 小程序有详细的微信开发 ...
【富文本编辑器功能】vue实现富文本编辑器Tinymce功能，保留编辑器格式文章展示在页面上【前后端代码展示，简单好用】
前言: 这个Tinymce富文本编辑器是vue-element-admin内集成好的,使用过后体验非常不错,很简单易用.这里分享一下,同时又看到了网上帖子都没什么人写前后端同时展示的,很多人想知道编辑 ...
react中使用simditor富文本编辑器
react 中使用没有启用图片上传功能的simditor 富文本编辑器环境介绍功能需求步骤实现 npm安装simditor依赖 jsx页面引入 componentDidMount 获取DOM ...
TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...

保存富文本编辑器内容

保存富文本编辑器内容相关推荐

最新文章

热门文章