php-富文本编辑器使用

首先下载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提交代码一样。

猜你喜欢

转载自blog.csdn.net/qq_40452317/article/details/89965934