php开发app编辑器,Laravel 集成markdown编辑器

安装

1、在在 composer.json 的 require里 加入"yuanchao/laravel-5-markdown-editor": "dev-master"

修改 composer.json文件

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加载进来就可以了

@include('editor::head')

// 编辑器一定要被一个 class 为 editor 的容器包住

// 创建一个 textarea 而已，具体的看手册，主要在于它的 id 为 myEditor

{!! Form::textarea('content', '', ['class' => 'form-control','id'=>'myEditor']) !!}

// 上面的 Form::textarea ，在laravel 5 中被提了出去，如果你没安装的话，直接这样用

// 主要还是在容器的 ID 为 myEditor 就行

我的是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

测试结果：