首先下载ueditor,这个编辑器有点复杂,如果需要简介的可以去找其他的。
下载地址:https://ueditor.baidu.com/website/download.html
解压出来改名为ueditor放在工程文件中。
建立前端代码,下面是一个非常简单的html代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<form action="server.php" method="post">
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<button id="button" type="submit">提交</button>
</form>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var editor = UE.getEditor('container');
</script>
</body>
</html>
如果是在自己的工程中,需要引入ueditor的相关文件,以及实例化,可以自己修改实例化时需要传入的参数。可以自己修改一下编辑器大小高低。
<form action="server.php" method="post">
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<button id="button" type="submit">提交</button>
</form>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var editor = UE.getEditor('container');
</script>
下图时运行成功的时候的样子。
修改图片等上传路径配置信息,这里采用的是默认的路径。具体信息参考:http://fex.baidu.com/ueditor/#server-path
然后写server.php中的php代码。将数据上传入数据库,跟以前学习的php提交代码一样。