eWebEditor编辑器的使用

eWebEditor是一款文本编辑器,个人并不是很看好它,反而感觉它的样式比较丑陋,以前在项目上大都使用KindEditor或者Layui自带的Editor,对图片上传,视频上传等支持的比较好。

言归正传,今天我带领大家如何使用eWebEditor。

从网上下载eWebEditor,下载之后的目录结构如下:我的是在Eclipse里打开的。

eWebEditor编辑器的使用_第1张图片

主要是用到了ewebeditor.htm。而ewebeditor.htm页面引用了编辑器框架的ewebeditor.js等。

具体用法:

新建一个html页面。

<body>
    <div id="dd">div>
    <form class="layui-form">
        <textarea name="content1" style="display:none">textarea>
        
        <iframe id="eWebEditor1" src="ewebeditor/ewebeditor.htm?id=content1&style=standard&skin=office2003" frameborder="0" scrolling="no" width="600" HEIGHT="350">iframe>
    form>
body>

注意事项:src标签的id要跟textarea的name对应。后面的样式style,皮肤skin可以参考eWebEditor的配置。

接下来讲解如何获取编辑器的值,以便传递到后台接口的调用。

值的获取:

// 获取编辑器输入内容
var html = document.getElementById("eWebEditor1").contentWindow.getHTML(); 

值的设置:

var html ='size: 18pt;">测试';
document.getElementById("eWebEditor1").contentWindow.setHTML(html); // 插入编辑器内容

值的设置常用在修改功能,修改一条记录,要回显编辑器的内容,上面是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>

最终效果图:

eWebEditor编辑器的使用_第2张图片

不是很好看个人觉得,好像花钱购买授权能享受更多的功能,目前暂时没试过,只作学习练习参考。

你可能感兴趣的:(javascript,html,页面模板)