美文网首页
Laravel 集成markdown编辑器

Laravel 集成markdown编辑器

作者: 唐朝早晨 | 来源:发表于2019-02-17 13:49 被阅读0次

    写作前面,本文参考地址:https://github.com/yccphp/laravel-5-markdown-editor


    安装

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

    测试结果:


    相关文章

      网友评论

          本文标题:Laravel 集成markdown编辑器

          本文链接:https://www.haomeiwen.com/subject/kwhmeqtx.html