Laravel5 Markdown 编辑器

分享 Enda ⋅ 于 3年前 ⋅ 最后回复由 JiberBoom 7个月前 ⋅ 5101 阅读

laravel-5-markdown-editor

Based on the markdown editor laravel 5

一个基于 laravel 5 的markdown 编辑器

star https://github.com/yccphp/laravel-5-markdown-editor

安装使用详细教程

phphub: https://laravel-china.org/topics/853

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

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

Bug 反馈&交流

欢迎加入我们的 laravel 学习小组:365969825

预览

m1.jpgm2.jpg

Update Log

2015-05-18 初版提交

2015-05-19 图片上传移植到扩展内部处理

2015-05-19 新增解析 markdown 为 html 功能

Installation

1.在 composer.json 的 require里 加入

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

2.执行 composer update

3.在config/app.php 的 providers 数组加入一条

'YuanChao\Editor\EndaEditorServiceProvider'

4.在config/app.php 的 aliases 数组加入一条

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

5.执行 php artisan vendor:publish

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

Usage

1.在需要编辑器的地方插入以下代码

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

// 编辑器一定要被一个 class 为 editor 的容器包住
<div class="editor">
    // 创建一个 textarea 而已,具体的看手册,主要在于它的 id 为 myEditor
    {!! Form::textarea('content', '', ['class' => 'form-control','id'=>'myEditor']) !!}
</div>

这个时候,编辑器就出来啦~

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

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

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

我的上传 action 代码为

use EndaEditor;

public function postUpload(){

        // endaEdit 为你 public 下的目录   @update 2015-05-19 前的版本请更新才能使用
        $data = EndaEditor::uploadImgFile('endaEdit');

        return json_encode($data);            
}

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

新增解析 markdown 为 html 功能

头部引用文件

use EndaEditor;

列子如下:


        $art = Article::find(16);

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

直接把需要解析的 markdown 扔进这个方法就行

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

本文章首发在 Laravel China 社区
本帖已被设为精华帖!
附言 0  ·  3年前

新增解析 markdown 为 html 功能

头部引用文件

use EndaEditor;

列子如下:


        $art = Article::find(16);

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

直接把需要解析的 markdown 扔进这个方法就行

EndaEditor::MarkDecode("#我是参数")
附言 1  ·  3年前

如果版本跨度比较大,请执行完 composer update 后,执行一下

php artisan vendor:publish --force

因为有更改一些资源文件,如果有问题,请进群交流:365969825

附言 2  ·  3年前

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

// 上面的 Form::textarea ,在laravel 5 中被提了出去,如果你没安装的话,直接这样用
<textarea id='myEditor'></textarea>

// 主要还是在容器的 ID 为 myEditor 就行
附言 3  ·  3年前

安装使用教程已出:

地址:https://phphub.org/topics/853

回复数量: 18
  • Enda 江湖上的一只小虾米
    3年前

    哇塞,激动哈,终于被加精一篇了

  • Enda 江湖上的一只小虾米
    3年前

    @nidesky 看到你的评论通知了,图没挂呀,但是在这个主题里面又看不到你的评论。。好诡异

  • skyLee
    3年前

    不错不错,赞一个!!

  • Enda 江湖上的一只小虾米
    3年前

    @skyLee 谢谢~

  • nidesky
    3年前

    @Enda 我第一次看的时候图挂了,但是刷新了两遍后就看见了,然后我就把评论删了 :grimacing:

  • jmychou
    3年前

    应该是star,不是start吧。。@Enda

  • Enda 江湖上的一只小虾米
    3年前

    @jmychou 谢谢~

  • Enda 江湖上的一只小虾米
    3年前

    @wedojava 谢谢支持~

  • wedojava
    3年前

    试了下,没那么顺利,可能是哪里我没搞对?引入你说的usage里的代码就出了下面的错误:

    FatalErrorException in 8ee4c8a2147ed7fc3f03f54216516684 line 31:
    syntax error, unexpected '=', expecting ']'
  • Enda 江湖上的一只小虾米
    3年前

    @wedojava 语法错误,贴具体代码

  • Enda 江湖上的一只小虾米 2
    3年前

    @wedojava EndaEditor::MarkDecode($art->content) 这个是解析 markdown 为 html 的方法,明天我会整理出一份详细的安装使用说明

  • kenneth 极客地图创始人
    3年前

    @Enda 上传没成功,能否介绍详细一点?

  • Enda 江湖上的一只小虾米
    3年前

    @kenneth 今天我会整理出详细的安装说明

  • MiYogurt
    3年前

    The use statement with non-compound name 'EndaEditor' has no effect @Enda 大神能解答一下吗?

  • Enda 江湖上的一只小虾米
    3年前

    @MiYogurt 看安装教程 https://laravel-china.org/topics/853 ,猜测你这个是没往 config/app.php 加上配置,如果加上了,那就发代码看看

  • Bill_Chow
    1年前

    [toc]
    目录不支持啊...

  • JiberBoom
    7个月前

    你这个包我使用了功能都没问题就是样式不好看

    file
    可以看一下行与行之间间隙太小,我已经加了换行了

  • JiberBoom
    7个月前

    @Enda 可以说下段与段之间和行与行之间的间隔配置吗?我在config文件里配置了但是不起作用

暂无评论~~
您需要登陆以后才能留下评论!

Composer 中国全量镜像

Top 100 扩展包

Lumen 中文文档

Laravel 速查表

Laravel 中文文档

Laravel 项目开发规范

Laravel 开发环境部署

社区文档撰写指南

TDD 构建 Laravel 论坛笔记

PHP PSR 标准规范

PHP 设计模式全集

Dingo API 中文文档