laravel5.* Markdown编辑器使用教程及常见问题汇总

Song2108 次浏览0个评论2017年07月22日

laravel 5 Markdown 编辑器使用教程

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。有时候我们需要在自己的网站中使用Markdown,引入一大堆的js还是不太方便,所以我们介绍一下拓展包的使用:

项目地址:https://github.com/yccphp/laravel-5-markdown-editor

功能

  1. 图片上传
  2. markdown 语法解析为 html
  3. markdown 编辑器该有的功能都有

安装

1.在 composer.jsonrequire 里面加入以下内容

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

2.添加完成后,执行 composer update

composer update

3.等待下载安装完成,需要在config/app.php中注册服务提供者同时注册下相应门面:

'providers' => [
    //........
    'YuanChao\Editor\EndaEditorServiceProvider'
],

'aliases' => [
     //..........
    'EndaEditor' => 'YuanChao\Editor\Facade\EndaEditorFacade'
    ],
  1. 如果要使用自定义的配置,还可以发布配置文件到config目录:
php artisan vendor:publish

执行上面这行命令以后,如果出现以下结果,说明你已经安装成功了

Copied File [/vendor/edvinaskrucas/notification/src/config/notification.php] To [/config/notification.php]
Copied Directory [/vendor/yuanchao/laravel-5-markdown-editor/src/config/views] To [/resources/views/vendor/editor]
Copied Directory [/vendor/yuanchao/laravel-5-markdown-editor/src/config/editor] To [/public/plugin/editor]
Copied File [/vendor/yuanchao/laravel-5-markdown-editor/src/config/editor.php] To [/config/editor.php]
Publishing Complete!

使用

注意:使用前必须要在头部引入jquery文件;在你的视图文件里面,需要使用编辑器的地方,先引入头部文件:

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

然后,比如我的 textarea 需要把他变成编辑器,这个时候,给你的 textarea 写上一个 id = myEditor

如:<textarea id='myEditor'></textarea>

同时,在你的 textarea 的父级标签,加上 class = editor,如果你的 textarea 是被 div 包住的,那么你就这样写

// class = editor
<div class="editor">
    <textarea id='myEditor'></textarea>
</div>

一定要给父级标签加上 class = editor,因为要计算编辑器的位置

看了上面的例子,你应该明白,使用编辑器的两步就是

  1. 引入头文件
  2. 给你需要变成编辑器的标签加上 id='myEditor' 同时父级标签加上class = editor

图片上传使用

我们已经内置了图片上传功能,你所需要做的,就是在适合的地方,插入代码而已

  1. 打开 config/editor.php 配置文件,我们可以看到里面有一项配置是 uploadUrl

这个 uploadUrl ,指得是上传图片请求的地址,我们上传图片时,是通过 Ajax post 请求 控制器,控制器把图片上传,返回图片地址。

举个例子:

比如,我的 uploadUrl 配置成了 Home/upload ,那么当我上传图片的时候,它会 Ajax 请求 Home 控制器的 upload 方法对吧?这个时候 upload 方法里面,需要把图片上传,然后返回图片地址,如果需要上传到云存储也可以自己改一下代码

首先,在类头部,添加引用

use EndaEditor;

上传图片代码:


public function upload(){

        // path 为 public 下面目录,比如我的图片上传到 public/uploads 那么这个参数你传uploads 就行了

        $data = EndaEditor::uploadImgFile('path');

        return json_encode($data);

    }

markdown 转 html

页面展示中,我们需要把 markdown 转成 html,这样游览器才会解析,接下来我们来讲解一下如何使用:

  1. 在头部引入拓展包
use EndaEditor;

markdown 转成 html

// 直接把需要转换的 markdown 做为参数传递进去
$str = EndaEditor::MarkDecode("#我是markdown语法");
dump($str);
// 结果为
<h1>我是markdown语法</h1>

常见问题汇总

  1. 图片上传 http://la5.in/postUpload 405 (Method Not Allowed) 错误,其实是因为上传路由不是使用的POST方法而已
  2. 视图中使用没有反应,大多数原因是因为没有引入Jquery.js
  3. 如何实现编辑器自适应,config文件中width改为100%
  4. 图片上传无法点击,如下图,其实是因为没有引入bootstrap.jsLaravel Markdown

Bug 反馈

如果在使用中有什么问题可以在下面留言哦!

提交评论

请登录后评论

用户评论

    当前暂无评价,快来发表您的观点吧...

更多相关好文

    当前暂无更多相关好文推荐...