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>以下是效果图:
希望对您有用,哈哈!
