TinyMCE | 一款非常不错的富文本编辑器
TinyMCE的优势: [1]
如果直接用form表单提交,后台是可以正常获取到textarea内容的;如果用ajax提交,直接使用jquery $('#mytextarea').val()是获取不到内容的,需要按如下方法获取内容:
如果需要上传图片,需要在tinymce初始化里添加如下配置:
目前简单体验了一下TinyMCE,感觉还是可以,可以直接把网页、word的内容直接拷贝过来,并能保留源格式,图片按照上述配置好后,支持直接粘贴过来完成上传到后台。其他功能等深入使用后再作更新。
jsp 页面怎么用富文本编辑器
jsp使用富文本编辑器可以参考如下:
对于一些刚入门的程序员来说,在一些实际的开发中可能会用到编辑器,那么如何在JSP页面中嵌入并使用编辑器(本文以百度的UEditor编辑器为例),以下是具体的操作流程:
第一步
首先要到UEditor官网下载不同版本的编辑器,用户可以根据自身的需求进行下载,本文操作所需要的是JSP版本,UEditor下载如图所示:
UEditor编辑器下载地址:
下载完成后进行解压缩到任意文件夹,包中的内容如下图:
另附上几个编辑器的下载地址:
1.KindEditor:
2.xhEditor:
3.TQEditor:
第二步
在Eclipse中新建Dynamic Wen Project,并在WebContent下新建文件夹,命名为UEditor,把刚解压的文件复制到该文件夹,结构如图所示:
需要注意的是,要把编辑器所需的jar也导入到WEB-INF下的lib中:
第三步
经过以上配置,基本上已经把相应的环境配好了,接下来就是要写一个jsp页面进行展示,为了演示需要,在这里把index.jsp作为演示页面。
打开index.jsp页面,导入对应的js和css样式,代码如下:
[html] view plain copy
<%@ page language=java contentType=text/html; charset=utf-8
pageEncoding=utf-8%>
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN >
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
<title>百度UEditor编辑器</title>
<script type=text/javascript src=UEditor/ueditor.config.js></script>
<script type=text/javascript src=UEditor/ueditor.all.js></script>
<link rel=stylesheet href=UEditor/themes/default/css/ueditor.css>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type=text/javascript charset=utf-8
src=UEditor/lang/zh-cn/zh-cn.js></script>
<style type=text/css>
div {
width: 100%;
}
</style>
</head>
<body>
<textarea id=container name=container
style=width: 800px; height: 400px; margin: 0 auto;></textarea>
<script type=text/javascript>
UE.getEditor(container);
</script>
</body>
</html>
以上代码写好以后,部署项目,运行tomcat,打开浏览器在地址栏中输入:,可以看到编辑器的效果:
注意:在压缩的包中,有index.html页面,里面有具体的配置信息,本文不做详细介绍。