Laravel 框架集成 UEditor 编辑器

谁借莪１个温暖的怀抱￠ 2022-03-18 02:20 290阅读 0赞

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

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

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

(三)操作步骤

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

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

<!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” 所传输的数据写入数据库即可，而对应在数据库中存储的数据如下所示：

![在这里插入图片描述][20190219100625650.png]

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

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

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

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

[Laravel-u-editor]: https://github.com/stevenyangecho/laravel-u-editor
[https_ueditor.baidu.com_website_download.html]: https://ueditor.baidu.com/website/download.html
[20190218201949671.png]: /images/20220318/d92755cc961d4993b3eab5dfc15950c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjM4MTc2_size_16_color_FFFFFF_t_70]: /images/20220318/39bf39b0556a4653b073270fcf773ed5.png
[20190219100625650.png]: /images/20220318/fdec8b3123494581ab0659bc2a4fdc6e.png
[20190219100714635.png]: /images/20220318/d04456f04813423b808b3ba10b30ca17.png