Laravel 框架集成 UEditor 编辑器

㈠. 背景
在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 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” 进行符合需求的修改,建议可以让文件名较长一些以避免重名。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值