副文本编辑器网页编辑器

来源：互联网发布：扫描仪软件下载编辑：程序博客网时间：2024/04/20 12:34

网页编辑器 nicEdit

1.下载nicEdit包，解压。

会有2个文件，一个js文件，一个gif的图片
   一个nicEdit.js和nicEditorIcons.gif

2.将nicEdit拷贝到项目中，在对应的要进行编辑的页面导入js

注意：修改js中iconsPath的路径，即显示的图片路径

   打开nicEdit.js找到 iconsPath :'./nicEdit/nicEditorIcons.gif'.
   修改相对路径，使js执行的时候能找到改图片。

3.在要进行编辑的jsp中导入nicEdit.js文件，同时写入以下js对编辑器进行实例化

<script type="text/javascript">

    bkLib.onDomLoaded(function() {

   new nicEditor({ fullPanel: true }).panelInstance('content1');

});

</script>

4.在body中写入div，这个div就是要编辑的区域，可以设置样式和宽度。

<div id="content1" class=" nicEdit-main " contenteditable="true" style="width: 600px; margin: 4px; min-height: 400px; overflow: hidden;"></div>

5.同时设置一个textarea进行隐藏

<textarea rows="15" cols="80" id="content" name="ann.content" style="display:none"></textarea>

6写入js

document.getElementById("content").value=document.getElementById("content1").innerHTML;

因为，div里的内容通过form表单是获取不到的，所以，通过js把div中的内容赋值给textarea，然后进行提交。

这样，from表单进行提交的时候实际上是提交的textarea中的内容，但是，这个内容中确实带有格式的文本。

7显示带有格式的文本。

如果直接从后台把带有格式的文本显示在页面上，会出现显示html语句的文本，不是我们想要的效果。那么，这里通过strust2和EL正则表达式填入到要显示的地方。

以下是jsp

<%@ page contentType="text/html;charset=UTF-8" import="java.util.*"
   pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>信息发布</title>
       <script type="text/javascript" src="${path}/nicEdit/nicEdit.js"></script>
       <script src="${path}/js/jquery-1.4.2.min.js"></script>

      <script type="text/javascript">
        bkLib.onDomLoaded(function() {
       new nicEditor({ fullPanel: true }).panelInstance('content1');
      });
    </script>
       <script>
           function form_check(){
               document.getElementById("content").value=document.getElementById("content1").innerHTML;
               var content = document.getElementById("content").value;
               if(content==""){window.alert("请输入正文！");return (false);}
           }
       </script>
   </head>
   <body>
       <div>
       <form action="" enctype="multipart/form-data" method="post">
           <table>
                   <tr>
                       <td align ="right">信息发布：</td>
                       <td align ="left">
                   <textarea rows="15" cols="80" id="content" name="ann.content" style="display:none;"></textarea>
                      <div id="content1" class=" nicEdit-main " contenteditable="true" style=" border: 1px solid black;width: 800px; margin: 4px; min-height: 400px; overflow: hidden;height: 400px;"></div>
                   </td>
                   </tr>
               </table>
       </form>
       </div>
   </body>
</html>

0 0

副文本编辑器 网页编辑器

网页编辑器 nicEdit

副文本编辑器网页编辑器