写作前面,本文参考地址:https://github.com/yccphp/laravel-5-markdown-editor
安装
1、在在 composer.json 的 require里 加入"yuanchao/laravel-5-markdown-editor": "dev-master"
2、使用命令行进入你的项目然后执行:composer update
执行成功画面
注意:如果在执行composer update出现如下问题:
未发现GitHub token
访问该链接:https://github.com/settings/tokens/new?scopes=repo&description=Composer+on+debian-jessie+2015-12-13+2239,创建你的GitHub token;
3、在config/app.php 的 providers 数组加入一条'YuanChao\Editor\EndaEditorServiceProvider'
4、在config/app.php 的 aliases 数组加入一条'EndaEditor' => 'YuanChao\Editor\Facade\EndaEditorFacade'
5、执行 php artisan vendor:publish --tag=EndaEditor
完成
markdown到这里就安装完成了,下面是如何在laravel里使用markdown
使用
1、在resources\views\edit目录下创建create.blade.php编写如下内容:
// 引入编辑器代码,如果样式没有显示出来,可能是没有加载js,把js加载进来就可以了
<script src="/js/app.js"></script>
@include('editor::head')
// 编辑器一定要被一个 class 为 editor 的容器包住
<div class="editor">
// 创建一个 textarea 而已,具体的看手册,主要在于它的 id 为 myEditor
{!! Form::textarea('content', '', ['class' => 'form-control','id'=>'myEditor']) !!}
// 上面的 Form::textarea ,在laravel 5 中被提了出去,如果你没安装的话,直接这样用
<textarea id='myEditor'></textarea>
// 主要还是在容器的 ID 为 myEditor 就行
</div>
我的是laravel5.5
这样效果就基本出来了:
这个样子
图片上传
1、打开config/editor.php 配置文件,修改里面的 uploadUrl 配置项为你的处理上传的 action
配置上传路径
2、在routes\web.php里添加路由
注意,这里的路由和上面的uploadUrl 保持一致
3、打开ArticleController编写upload方法
upload方法
注意:要在该controller最上面中引入 use EndaEditor;如下所示:
引入use EndaEditor
4、上传图片测试:
上传成功
bug修改分割线:
如果在上传图片当中遇见上传图片弹框是灰色不可选状态如下所示:
这是因为bootstrap里的css和js引用重复所导致;只需要删除: resources\views\vendor\editor\head.blade.php里的bootstrap.css,和bootstrap.js即可;
页面显示
1、在ArticleController里编写show方法
public function show(){
$art = Article::find(16);
return view('test',['content'=>EndaEditor::MarkDecode($art->content) ]);
}
2、添加路由
Rout::get('articles/show','ArticleController@show');
3、在test界面编写
//在需要解码的页面确保引入了bootstrap,并加入如下代码
@include('editor::decode')
@php
echo EndaEditor::MarkDecode($text)
@endphp
测试结果:
网友评论