Laravel 框架集成 UEditor 编辑器

最新推荐文章于 2024-08-16 07:32:00 发布

猪年大吉。

最新推荐文章于 2024-08-16 07:32:00 发布

阅读量3k

点赞数 7

分类专栏： laravel

本文链接：https://blog.csdn.net/qq_43638176/article/details/87644443

版权

laravel 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

㈠. 背景
在项目开发的过程中，免不了使用修改功能，而富文本编辑器是极为方便的一种推荐，当然，个人认为 MarkDown 更为简单，但是感觉暂时只适合程序猿
此文介绍如何在 Laravel5.5 框架中集成使用富文本编辑器 UEditor

(二) 实现
主要有两种方法实现
第一种是使用 composer 进行安装，可推荐参考文章 Laravel-u-editor

第二种是到 UEditor 官方下载源包自行配置（下文主要为此操作）

(三)操作步骤

可点击下载源码包地址，本人下载的是最新 PHP(UTF-8) 版本
https://ueditor.baidu.com/website/download.html

放置在public下文件名可自行修改
在这里插入图片描述
首先在当前页面，需要引入 js 文件，注意类比src的正确引用.

源码

<!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="{{asset('ueditor/ueditor.config.js')}}"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="{{asset('ueditor/ueditor.all.js')}}"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

</html>

在需要显示富文本编辑器的位置，补充如下代码

<!-- 加载编辑器的容器 -->
<script id="ue-container" name="content"  type="text/plain">
@php
echo htmlspecialchars_decode($article['content']);
@endphp
</script>

补充：
①. 在进行 form 表单提交时，将获得 name=“content” 所传输的数据写入数据库即可，而对应在数据库中存储的数据如下所示：

在这里插入图片描述

当取得了上述数据，若要在前端进行显示，需要执行类似的转化代码
在这里插入图片描述

echo <?php echo htmlspecialchars_decode($info->content) ?>

扩展图片上传路径
上传的图片会默认放置在 Public/ueditor/php/upload/image/ 目录下

如果需要修改，可进入php/config.json 文件，找到配置项 “imagePathFormat” 进行符合需求的修改,建议可以让文件名较长一些以避免重名。

猪年大吉。

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录