文档章节

Laravel5 Markdown 编辑器使用教程

Corwien
 Corwien
发布于 2016/04/19 15:30
字数 1123
阅读 44
收藏 0

Laravel 5 Markdown 编辑器使用教程

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

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

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

功能

  1. 图片上传

  2. markdown 语法解析为 html

  3. markdown 编辑器该有的功能都有( 还有谁!还有谁!)

预览

安装

1.在 composer.json 的 require 里面加入以下内容

"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 请求 控制器,控制器把图片上传,返回图片地址

那么问ti来了,编辑器怎么知道它要去请求哪个控制器呢?答  案就是,你配置的 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,这样游览器才会解析

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

  1. 依旧是头部引入

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

use EndaEditor;

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

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

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

echo $str;

// 结果为

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

是不是很方便呀~

最后在说一句

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


注:本文转自Laravel开发社区大神Enda博客的博客

本文转载自:https://phphub.org/topics/853

共有 人打赏支持
Corwien
粉丝 26
博文 149
码字总数 115164
作品 0
广州
程序员
私信 提问
Leanote v1.0-beta.3 发布,个人云笔记

Leanote一直坚持着让知识编辑更简单的理念不断完善Leanote. 今天 Leanote v1.0-beta.3 发布了, 这一版对编辑器的功能做了极大的改进. 主要改进代码编辑器及使用全新Markdown编辑器, 和新增加...

lifephp
2015/01/12
5.2K
29
Markdown 语法简明教程 & Markdown 编辑器推荐

什么是 Markdown? Markdown 是一种轻量级的纯文本标记语言,它允许我们 “使用易读易写的纯文本格式编写文档,然后将其转换成具有一定格式的 HTML 文档展示出来”。文件扩展名为 或 。 不同...

己立
10/21
0
0
百度Ueditor编辑器的使用

Ueditor 编辑器非常强大,是一款几乎能满足任何需求的富文本编辑器,开箱即用,不用繁琐的配置,本人博客中用到,于是将使用的方法总结出来,以供参考。 注:本编辑器用的为php版本下载包,下...

Corwien
2016/06/08
64
0
非常有用的 Markdown 编辑器和工具

Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法,所以通过同一个名字它可以使用工具来转换成 HTML。readme 文件,在线论坛编写消息和快速创建富文本文档的文本编辑器都非...

oschina
2014/04/02
107.8K
25
间书之Markdown的小白教程

由于上周公司组织了外出旅游,已经两周没写博客了。现在正好是国庆放假,终于有点时间写点东西了。在间书上有个Markdown编辑器,看上去好厉害的样子。所以今天就试着学习了一下。 Markdown是...

蛇发女妖
2016/10/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JAVA设计模式之模板方法模式和建造者模式

一、前期回顾 上一篇《Java 设计模式之工厂方法模式与抽象工厂模式》介绍了三种工厂模式,分别是工厂方法模式,简单工厂方法模式,抽象工厂模式,文中详细根据实际场景介绍了三种模式的定义,...

木木匠
22分钟前
1
0
C中的宏的使用(宏嵌套/宏展开/可变参数宏)

基本原则: 在展开当前宏函数时,如果形参有#或##则不进行宏参数的展开,否则先展开宏参数,再展开当前宏。 #是在定义两边加上双引号 #define _TOSTR(s) #sprintf(_TOSTR(test ABC))pr...

SamXIAO
52分钟前
2
0
SpringBoot 整合异步调用方法

1. 在 SpringBoot 主类上使用 @EnableAsync 注解,开启异步调用功能 package com.codingos.springbootdemo;import org.springframework.boot.SpringApplication;import org.springfra......

北漂的我
今天
1
0
0015-如何使用Sentry管理Hive外部表权限

1.文档编写目的 本文档主要讲述如何使用Sentry对Hive外部表权限管理,并基于以下假设: 1.操作系统版本:RedHat6.5 2.CM版本:CM 5.11.1 3.集群已启用Kerberos和Sentry 4.采用具有sudo权限的...

Hadoop实操
今天
3
0
边缘计算与数据中心的发展趋势

导读 Gartner研究表明,人工智能、物联网和5G助力下一代商业创新,由此产生大量数据,2020年前企业将使用超过75亿台联网设备。 在几乎每个方面,社会的节奏都正变得更快。我们希望客户服务问...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部