Laravel+ueditor实现富文本编辑上传和页面显示

xiaoxiao2021-02-28  21

Ueditor是一款十分好用的富文本编辑器。和laravel结合起来使用也是更加的方便好用。废话不多说,直接上内容。

1. 下载ueditor,可以参考github项目 

        laravel 5.5+ :composer require overtrue/laravel-ueditor

2. 建立一个软链接,软链接这部分要好好了解一下。

       php artisan storage:link

创建软连接的时候可能会出现以下问题:

    [ErrorException] symlink(): Protocol error

这时以管理员的方式重新打开git bash,然后重新vagrant up即可。

3.  配置

     如果项目主要是用来练手你可以用本利存储。有以下配置:

       config/ueditor.php,把最下面这两项的配置设置成你需要的配置,可以如下:        

'upload' => [ /* 前后端通信相关的配置,注释只允许使用多行方式 */ /* 上传图片配置项 */ 'imageActionName' => 'upload-image', /* 执行上传图片的action名称 */ 'imageFieldName' => 'upfile', /* 提交的图片表单名称 */ 'imageMaxSize' => 2 * 1024 * 1024, /* 上传大小限制,单位B */ 'imageAllowFiles' => ['.png', '.jpg', '.jpeg', '.gif', '.bmp'], /* 上传图片格式显示 */ 'imageCompressEnable' => true, /* 是否压缩图片,默认是true */ 'imageCompressBorder' => 1600, /* 图片压缩最长边限制 */ 'imageInsertAlign' => 'none', /* 插入的图片浮动方式 */ 'imageUrlPrefix' => '', /* 图片访问路径前缀 */ 'imagePathFormat' => 'public/uploads/image/{yyyy}/{mm}/{dd}/',        上传部分(以以下代码为例):

                

@include('vendor.ueditor.assets') // 这里引入的是相应css,js文件,在编辑器页面中添加 <script type="text/javascript"> var ue = UE.getEditor('container'); ue.ready(function() { ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token. }); </script> <lable>创建你的文章</lable> <!-- 编辑器容器 --> <script id="container" name="contents" type="text/plain"> </script>

           内容的显示:

               直接把上传到数据库的内容显示到blade模板可能会出现一些格式标签等。这里我使用的方法是输出编辑器内容里面的html格式,经过测试是有效的。     

{{--ueditor内容的展示--}} <script src="{{ asset('vendor/ueditor/ueditor.parse.js') }}"></script> <div > <p style="margin: auto"> <?php echo html_entity_decode($article['contents'], 1) ?> </p> </div>

          以下是效果图:

   

         希望对您有用,哈哈!

转载请注明原文地址: https://www.6miu.com/read-2630903.html

最新回复(0)