eWebEditor

最新推荐文章于 2024-04-22 11:57:05 发布

若曦8020

最新推荐文章于 2024-04-22 11:57:05 发布

阅读量1.7k

点赞数

分类专栏： eWebEditor 文章标签： eWebEditor

原文链接：https://blog.csdn.net/huangbaokang/article/details/79021637

版权

eWebEditor 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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