yuanchao/laravel-5-markdown-editor

Based on the markdown editor laravel 5

laravel-5-markdown-editor

Based on the markdown editor laravel 5, _(*1)

一个基于 laravel 5 的markdown 编辑器, _(*2)

本项目基于 html&js 一个有情怀的编辑器二次开发完成 传送门, _(*3)

安装使用详细教程

phphub: https://phphub.org/topics/853, _(*4)

如果访问 phphub 比较慢的同学，可以访问这个, _(*5)

SegmentFault:http://segmentfault.com/a/1190000002780158, _(*6)

不需要敲语法可界面操作的功能

1. 加粗字体
2. 加斜字体
3. 无需手写 md插入链接
4. 引用
5. 无需手写 md 语法插入图片
6. 数字列表
7. 普通列表
8. 标题
9. 分割
10. 撤销
11. 重做
12. 全屏

Bug 反馈&交流

欢迎加入我们的 laravel 学习小组：365969825, _(*7)

预览

, _(*8)

, _(*9)

Update Log

2015-05-18 初版提交, _(*10)

2015-05-19 图片上传移植到扩展内部处理, _(*11)

2015-05-19 新增解析 markdown 为 html 功能, _(*12)

Installation

1.在 composer.json 的 require里 加入, _(*13)

"yuanchao/laravel-5-markdown-editor": "dev-master"

2.执行 composer update, _(*14)

3.在config/app.php 的 providers 数组加入一条, _(*15)

'YuanChao\Editor\EndaEditorServiceProvider'

4.在config/app.php 的 aliases 数组加入一条, _(*16)

'EndaEditor' => 'YuanChao\Editor\Facade\EndaEditorFacade'

5.执行 php artisan vendor:publish --tag=EndaEditor, _(*17)

执行完上面的命令后，会生成配置文件和视图文件到你的 config/ 和 views/vendor 目录, _(*18)

Usage

1.在需要编辑器的地方插入以下代码, _(*19)

// 引入编辑器代码
@include('editor::head')

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



    // 创建一个 textarea 而已，具体的看手册，主要在于它的 id 为 myEditor
    {!! Form::textarea('content', '', ['class' => 'form-control','id'=>'myEditor']) !!}
    
    // 上面的 Form::textarea ，在laravel 5 中被提了出去，如果你没安装的话，直接这样用
    
    
    // 主要还是在容器的 ID 为 myEditor 就行
    

这个时候，编辑器就出来啦～, _(*20)

图片上传移植到扩展内部处理

图片上传移植到扩展的功能上传时间为 2015-05-19 10:40 如果在这个时间前安装的朋友，请先更新, _(*21)

2.图片上传配置，打开config/editor.php 配置文件，修改里面的 uploadUrl 配置项，为你的处理上传的 action, _(*22)

我的上传 action 代码为, _(*23)

use EndaEditor;

public function postUpload(){


        // endaEdit 为你 public 下的目录 update 2015-05-19
        $data = EndaEditor::uploadImgFile('endaEdit');

        return json_encode($data);            
}

3.链接添加功能添加了方便的添加系统内部文章的特性，首先在config/editor.php配置文件添加 ajaxTopicSearchUrl 配置项，关于返回的数据格式，请在配置文件中查看注释。, _(*24)

之后在您没有选中任何字符的情况下点击添加链接，将会看到多了一个标题输入框，您输入一些字符，它会根据 ajaxTopicSearchUrl 获得的文章标题列表来生成自动补全的下拉列表。, _(*25)

当您选中某个文章之后，下面的链接也会自动被填上。, _(*26)

完成以上这些配置，你就可以在线插入图片啦

新增解析 markdown 为 html 功能

头部引用文件, _(*27)

use EndaEditor;

列子如下：, _(*28)

        $art = Article::find(16);


        return view('test',[
            'content'=>EndaEditor::MarkDecode($art->content)
        ]);

直接把需要解析的 markdown 扔进这个方法就行, _(*29)

EndaEditor::MarkDecode("#我是参数")

为了保证图片的显示正常，加入zoom插件, _(*30)

在需要解码的页面确保引入了bootstrap，并加入如下代码, _(*31)

@include('editor::decode')