Laravel 5 Markdown 编辑器使用教程

laravel 5 Markdown 编辑器使用教程

5月18号发布的这个扩展,好多朋友使用起来有一些问题,好吧,都怪我安装使用说明写的不清楚└(^o^)┘... 今天给大家补一篇详细的安装说明文档

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

求star,求star,求star,求star,求star (此处省略一万字)

功能

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

预览

m1.jpgm2.jpg

安装

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

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

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

composer update

3.执行完这行命令,基本上就安装完啦,接下来打开 config/app.php 往里面加点东西

// 往里面加入 `'YuanChao\Editor\EndaEditorServiceProvider'`

'providers' => [

        ........

        'YuanChao\Editor\EndaEditorServiceProvider'

        ........

    ],

// 往里面加入 `'EndaEditor' => 'YuanChao\Editor\Facade\EndaEditorFacade'`

'aliases' => [

     ..........

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

    ..........

    ],
  1. 加入以上配置以后,执行 php artisan vendor:publish --force

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是哪个,它就请求哪个!

举个例子:

比如,我的 uploadUrl 配置成了 Home/upload ,那么当我上传图片的时候,它会 Ajax 请求 Home 控制器的 upload 方法对吧?这个时候 upload 方法里面,需要把图片上传,然后返回图片地址

但是!我们的扩展里面已经集成了图片上传并返回编辑器所需要的数据了,所以在你的 upload 方法里面,直接调用扩展的方法就行啦!

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


use EndaEditor;

public function upload(){

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

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

        return json_encode($data);

    }

这个 upload 是专门用于编辑器图片上传的哦~

好了,这个时候,你的图片上传已经 ok 了!

markdown 转 html

我们使用编辑器,把内容插入数据库后,展示给用户看的时候,总不能就输出 markdown 的语法吧~那用户也看不懂呀

所以,你需要把 markdown 转成 html,这样游览器才会解析

那么问题来了,如何转呢?我们的扩展已经集成了这个功能。我们来使用下

  1. 依旧是头部引入

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


use EndaEditor;

然后,调用我们的方法就行啦


// 直接把需要转换的 markdown 做为参数传递进去

$str = EndaEditor::MarkDecode("#我是markdown语法");

echo $str;

// 结果为

<h1>我是markdown语法</h1>

是不是很方便呀~

Bug 反馈

如果在使用中,发现了 bug 咋办?不会安装咋办?不会用咋办?

请直接加QQ群:365969825

最后在说一句

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

求star,求star,求star,求star,求star (此处省略一万字)

本帖已被设为精华帖!
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 36

上发斯蒂芬

7年前 评论

已经转投 百度编辑器啦。感觉非常好。
if($data=Input::except('_token')){ $str = EndaEditor::MarkDecode($data['m_info']); echo $str; } ![Uploading file...]() ![Uploading file...]()

@wedojava

7年前 评论
请问一下这个500是什么原因导致的
  • route
    Route::group(["namespace" => "Home","prefix" => "home"],function(){
        Route::post("/mdupload","HomeController@mdupload");
    });
  • controller
    public function mdupload()
    {
        $data = MarkDown::uploadImgFile('mdupload');
        return json_encode($data);
    }
  • config
    <?php
    return [
    'width'=>'980px',
    'uploadUrl'=>'/home/mdupload',
    ];

file

7年前 评论
Enda

@levitate 看一下你的错误日志

7年前 评论

@Enda

local.ERROR: Symfony\Component\Debug\Exception\FatalThrowableError: 
Call to undefined method YuanChao\Editor\EndaEditorServiceProvider::uploadImgFile()
 in E:\Items\www\jwt\app\Http\Controllers\Home\HomeController.php:21
7年前 评论
Enda

@levitate

头部引用

   use EndaEditor;

action 中使用


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

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

        return json_encode($data);

你的 action 中为啥是 MarkDown::uploadImgFile ?

7年前 评论

@Enda 我在aliases里写的是 MarkDown,这个有影响吗?

'providers' => [
      YuanChao\Editor\EndaEditorServiceProvider::class,
],
'aliases' => [
     'MarkDown' => YuanChao\Editor\EndaEditorServiceProvider::class,
],
控制器是:
<?php
namespace App\Http\Controllers\Home;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use MarkDown;
class HomeController extends Controller
{
    public function mdupload()
    {
        $data = MarkDown::uploadImgFile('mdupload');
        return json_encode($data);
    }
}
7年前 评论

按步骤完成Markdown安装,但为什么在页面上没什么反应呢?
F12报的错:
file

7年前 评论

能不能请教一下怎么把代码高亮改成highlightjs上的代码高亮?求教,谢谢

6年前 评论
很不错,安装试试看~
6年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!