php-富文本编辑器使用

最新推荐文章于 2024-05-21 10:05:48 发布

朝歌1122

最新推荐文章于 2024-05-21 10:05:48 发布

阅读量3.7k

点赞数 3

分类专栏： php

本文链接：https://blog.csdn.net/qq_40452317/article/details/89965934

版权

php 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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

朝歌1122

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
php-富文本编辑器使用

首先下载ueditor，这个编辑器有点复杂，如果需要简介的可以去找其他的。下载地址：https://ueditor.baidu.com/website/download.html解压出来改名为ueditor放在工程文件中。建立前端代码，下面是一个非常简单的html代码<!DOCTYPE HTML><html lang="en-US"><head...
复制链接

扫一扫