wangEditor的使用及上传图片(一)
来源:互联网 发布:oa管理系统数据库设计 编辑:程序博客网 时间:2024/06/07 20:55
由于业务需要,最近新入手了一款富文本编辑器wangEditor,这是一款轻量级的富文本编辑器,比起百度的ueditor,这款编辑器的界面更加简单,文档也很详细。对于需求不是很高的功能来说,这款编辑器实在是不二之选。
一、wangEditor的基本显示demo
这个部分,也用不着贴代码,因为文档很详细的,具体的参考文档
https://www.kancloud.cn/wangfupeng/wangeditor2/113965
这里面有显示界面的demo。
二、关于编辑器内容的提交
1、这部分刚开始我也很奇怪,因为编辑器是在div里面,而div又没有value这个属性。所以提交表单的时候,其中的内容该怎么提交上去呢。后来想到用js,把内容同步到input框中,这样我们就可以愉快的提交了。
//这是编辑器的div<div id="info1" class="text" > <!--可使用 min-height 实现编辑区域自动增加高度--> </div> //下面新增一个input输入框 <input class="input-xlarge focused" name="info" type="text" id="info" >
界面为:
2、新增JS代码
document.getElementById('info').addEventListener('click', function () { // 读取 html var info = editor1.txt.html(); document.getElementById("info").value=info; }, false);
这段的意思是,给下面的input框架一个点击事件。当点击input框的时候,触发点击事件,先获取editor中的html标签文字,然后,再把编辑器中的内容赋值给input的value
如图:
这样,我们提交表单的时候,就可以把编辑器中的内容提交上去了。
3、界面优化
这里如果大家觉得用这个input框多次一举的话,我们可以把input框隐藏起来。
<input id='info1' type='hidden' />//下面跟表单的其他项,比如 <input class="input-xlarge focused" name="info" type="text" id="info" > //也就是说,当点击表单的其他项的时候,我们还是出发点击事件,然后把编辑器的值赋值给隐藏的input框,这样,页面上不会有什么反应,但是我们已经把编辑器的值随着表单提交到服务器了。
下面该说上传图片了,但是上传图片的内容比较多,所以还是下一篇讲吧,下一篇主要是上传图片到阿里云OSS,并且在编辑器上显示我们上传的图片。
end
阅读全文
1 0
- wangEditor的使用及上传图片(一)
- wangEditor使用Struts2上传图片
- Spring Boot 使用wangEditor实现图片上传
- wangEditor编辑器在laravel中上传图片(二)
- ruby homeland 集成wangEditor实现图片上传
- 富文本编辑器WangEditor,实现图片上传OSS云存储
- 富文本编辑器wangEditor的使用
- uploadify(jquery)插件的使用及图片上传预览
- CKEditor的基本使用及上传图片功能说明
- html5图片上传及kingeditor富文本编辑器的使用
- ThinkPHP的使用(六)图片上传及预览插件
- ckeditor的使用(包含上传图片)
- [csdn markdown]使用摘记一源代码高亮及图片上传和链接
- 使用wangEditor富文本编辑器
- 使用ASP.NET上传图片汇总(一)
- 使用ASP.NET上传图片汇总(一)
- 使用OK3上传图片及String
- ThinkPHP图片上传的使用
- 吴恩达 神经网络和深度学习 第一部分课程 第四章课后习题 Building your Deep Neural Network
- 深度克隆
- 阿里HotFix热修复的简单使用
- SQLServer XML类型
- 【模板】高斯消元
- wangEditor的使用及上传图片(一)
- 线性变换1
- python基本数据类型总结
- form表单中的input类型及其用途
- poj1149 PIGS(建图最大流)
- windows7设置定时任务运行ThinkPHP框架程序
- python 剑指offer 面试题37
- 准备数据结构项目
- SPark算子学习之FlatMap和Glom和randomSplit