eWebEditor
程序员文章站
2022-07-16 20:48:13
...
eWebEditor是一款文本编辑器，个人并不是很看好它，反而感觉它的样式比较丑陋，以前在项目上大都使用KindEditor或者Layui自带的Editor，对图片上传，视频上传等支持的比较好。
言归正传，今天我带领大家如何使用eWebEditor。
从网上下载eWebEditor，下载之后的目录结构如下：我的是在Eclipse里打开的。
主要是用到了ewebeditor.htm。而ewebeditor.htm页面引用了编辑器框架的ewebeditor.js等。
具体用法：
新建一个html页面。
<body>
<div id="dd"></div>
<form class="layui-form">
<textarea name="content1" style="display:none"></textarea>
<!-- src 里的id值 与 textarea 的 name值对应 -->
<iframe id="eWebEditor1" src="ewebeditor/ewebeditor.htm?id=content1&style=standard&skin=office2003" frameborder="0" scrolling="no" width="600" HEIGHT="350"></iframe>
</form>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
注意事项：src标签的id要跟textarea的name对应。后面的样式style，皮肤skin可以参考eWebEditor的配置。
接下来讲解如何获取编辑器的值，以便传递到后台接口的调用。
值的获取：
// 获取编辑器输入内容
var html = document.getElementById("eWebEditor1").contentWindow.getHTML(); - 1
- 2
值的设置：
var html ='<span style="font-size: 18pt;">测试</span>';
document.getElementById("eWebEditor1").contentWindow.setHTML(html); // 插入编辑器内容- 1
- 2
值的设置常用在修改功能，修改一条记录，要回显编辑器的内容，上面是js手工设置编辑器的内容，如果是java中jstl的应用，只需要在textarea标签使用jstl的语法，编辑器就会自动显示相应内容。
如下所示：
<textarea placeholder="请输入活动内容" name="desc" class="layui-textarea" id="layedit" style="display:none">${education.RICH_TXT }</textarea>
<iframe id="eWebEditor1" src="<%=path %>/resource/plugins/ewebeditor/ewebeditor.htm?id=desc&style=standard&skin=office2003" frameborder="0" scrolling="no" width="600" HEIGHT="350"></iframe>
- 1
- 2
- 3
最终效果图：
不是很好看个人觉得，好像花钱购买授权能享受更多的功能，目前暂时没试过，只作学习练习参考。