百度编辑器UEditor怎么在jsp中配置

百度编辑器UEditor怎么在jsp中配置,第1张

1、首先通过php或者jsp等后台语言获取数据库中的内容,保存到变量cont中。 2、调用editor.setContent(cont)就完成数据赋值到编辑器中了,这里的editor是编辑器实例。 PS:如果在点击诸如“编辑”按钮之后再实例化编辑器,然后设置内容时,通常需要

jsp使用富文本编辑器可以参考如下:

对于一些刚入门的程序员来说,在一些实际的开发中可能会用到编辑器,那么如何在JSP页面中嵌入并使用编辑器(本文以百度的UEditor编辑器为例),以下是具体的 *** 作流程:

第一步

首先要到UEditor官网下载不同版本的编辑器,用户可以根据自身的需求进行下载,本文 *** 作所需要的是JSP版本,UEditor下载如图所示:

UEditor编辑器下载地址:http://ueditor.baidu.com/website/download.html

下载完成后进行解压缩到任意文件夹,包中的内容如下图:

另附上几个编辑器的下载地址:

1.KindEditor:http://kindeditor.net/down.php

2.xhEditor:http://xheditor.com/download.html

3.TQEditor:http://www.e512.net/tqeditor/download.htm

第二步

在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/htmlcharset=utf-8"

pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=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: 800pxheight: 400pxmargin: 0 auto"></textarea>

<script type="text/javascript">

UE.getEditor("container")

</script>

</body>

</html>

以上代码写好以后,部署项目,运行tomcat,打开浏览器在地址栏中输入:http://localhost:8080/UEditor/,可以看到编辑器的效果:

注意:在压缩的包中,有index.html页面,里面有具体的配置信息,本文不做详细介绍。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11799674.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存