Thinkphp3.2.3引入富文本编辑器Ueditor1.4.3

最新推荐文章于 2021-03-27 15:41:39 发布

原创最新推荐文章于 2021-03-27 15:41:39 发布 · 507 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得镜像、转载。

文章标签：

#富文本编辑器Ueditor #Ueditor

富文本编辑器Ueditor 专栏收录该内容

2 篇文章

订阅专栏

博客介绍了Ueditor1.4.3的部署步骤。首先下载该编辑器，重命名后放到项目目录下；接着在视图文件引入js文件，并在需要处写入代码；还提及控制器相关，若要把富文本内容提取为纯净文本可参考。最后通过创建demo.html文件验证部署是否成功。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：下载Ueditor1.4.3

下载之后重命名为ueditor ,并放到项目的public目录下

第二步：引入

在视图文件里引入一下js文件

<!--//富文本编辑器-->
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.3.min.js" charset="UTF-8"></script>

<script type="text/javascript" charset="utf-8">  
    $(document).ready(function () {  
      UE.getEditor('content', {  
      initialFrameHeight: 500,  
      initialFrameWidth: 100,   
    });  
  });    
</script>

在需要编辑器的地方写入以下代码

<textarea name="content" id="content" style="width:1024px;height:500px;"></textarea>

第三步：控制器

以下是针对要把富文本内容提取为纯净文本内容，不需要则忽略

  $content_01 = $data['content'];//从数据库获取富文本content
  $content_02 = htmlspecialchars_decode($content_01);//把一些预定义的 HTML 实体转换为字符
  $content_03 = str_replace("&nbsp;","",$content_02);//将空格替换成空
  $contents = strip_tags($content_03);//函数剥去字符串中的 HTML、XML 以及 PHP 的标签,获取纯文本内容
 $data["content"] = strip_tags(htmlspecialchars_decode($contents));

2019/09/23分界线

解压下载的包，在解压后的目录创建 demo.html 文件，填入下面的html代码

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

</html>

如果看到了下面这样的编辑器，恭喜你，初次部署成功！