文档章节

Laravel5 Markdown 编辑器使用教程

Corwien
 Corwien
发布于 2016/04/19 15:30
字数 1123
阅读 43
收藏 0
点赞 1
评论 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是...

蛇发女妖
2016/10/02
0
0
用electron开发Mark Down编辑器(一) ——功能简介

引子(废话) 从使用github托管个人静态博客开始,了解到了MarkDown,不得说这个标记行语言确实让人非常着迷。 我又是一个爱折腾的人,电脑系统经常换,每次重新搭建Hexo,感觉特别麻烦,每次...

newbiebt
2016/11/25
114
5
异步原创征集令,一篇好文一本书!

点击上方“异步社区”,选择“置顶公众号” 技术干货,第一时间送达 各位异步社区的小伙伴和大神,大家好!我是你们的异步君,就是一直被你们吐槽的,躲在异步客服后面的异步君。对,尤其最近...

异步社区
05/16
0
0
MarkDownPad2实用教程

MarkDownPad2实用教程前言: 为什么使用MarkDown来写文章呢?已经在使用的人应该知道答案,对于我个人来说,是因为它可以减少我的重复工作。因为我拥有自己的个人博客和CSDN博客,还有自己的...

doublelinux
2017/12/23
0
0
leanote v1.0-beta 发布,个人云笔记

这可能是leanote历史性的一刻 因为v1.0-beta已经发布了. 感谢各位贡献者的贡献 以及群内各位朋友对leanote的支持和建议 还有各位朋友的捐赠 因为你们 leanote才会不断地进步! leanote v1.0-...

lifephp
2014/10/24
2.3K
16
leanote v1.0-beta已正式发布

这可能是leanote历史性的一刻 因为v1.0-beta已经发布了. 感谢各位贡献者的贡献 以及群内各位朋友对leanote的支持和建议 还有各位朋友的捐赠 因为你们 leanote才会不断地进步! leanote v1.0-...

lifephp
2014/10/24
367
3
03 如何利用Markdown实现极速排版

Hello,大家好,我是棒哥,在这期节目中,我们给大家讲一下MarkDown最强大的应用场景,它能极大提高你的排版速度,你就不用受到编辑器的限制,也不用纠结各种排版工具的折腾,那怎么样才能够...

虚幻私塾
2017/12/17
0
0
怪木西西写的Markdown教程(显示版本)

怪木西西 1.png 概述 Markdown, 写好即排版OK! 语法 加粗 和 斜体 加粗 或者 这样加粗 斜体 或者 这样斜体 没错,这个教程是怪木西西写的没错,但是也是参考别人的教程写的,这样算不算抄袭...

怪木西西
2015/09/04
0
0
非常有用的 Markdown 编辑器和工具

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

oschina
2014/04/02
107.8K
25

没有更多内容

加载失败,请刷新页面

加载更多

下一页

大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
23分钟前
0
0
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
30分钟前
2
0
HFS

FS,它是一种上传文件的软件。 专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,...

garkey
34分钟前
1
0
Java IO类库之BufferedInputStream

一、BufferedInputStream介绍 /** * A <code>BufferedInputStream</code> adds * functionality to another input stream-namely, * the ability to buffer the input and to * sup......

老韭菜
37分钟前
0
0
STM 32 窗口看门狗

http://bbs.elecfans.com/jishu_805708_1_1.html https://blog.csdn.net/a1985831055/article/details/77404131...

whoisliang
昨天
0
0
Dubbo解析(六)-服务调用

当dubbo消费方和提供方都发布和引用完成后,第四步就是消费方调用提供方。 还是以dubbo的DemoService举例 -- 提供方<dubbo:application name="demo-provider"/><dubbo:registry address="z...

青离
昨天
1
0
iptables规则备份和恢复、firewalld的9个zone以及操作和service的操作

保存以及备份iptalbes规则 设定了的防火墙规则要进行保存,否则系统重启后这些规则就没有了,使用命令 ”service iptables save ” 会把设定好的防火墙规则保存到文件/etc/sysconfig/iptabl...

黄昏残影
昨天
0
0
k8s image

k8s.gcr.io/kube-apiserver-amd64:v1.11.0k8s.gcr.io/kube-controller-manager-amd64:v1.11.0k8s.gcr.io/kube-scheduler-amd64:v1.11.0k8s.gcr.io/kube-proxy-amd64:v1.11.0k8s.gcr.......

分秒
昨天
0
0
数据结构--排序

这篇博客包含了数据结构中多种的排序算法: (1)简单选择:第一趟在A[0]~A[n-1]之间找到最小的,与A[0]进行交换,之后在A[1]~A[n-1]之间进行。。。第i趟在A[i-1]~A[n-1]之间找到最小的,最后...

wangxuwei
昨天
1
0
一名3年工作经验的java程序员应该具备的职业技能

一名3年工作经验的Java程序员应该具备的技能,这可能是Java程序员们比较关心的内容。我这里要说明一下,以下列举的内容不是都要会的东西—-但是如果你掌握得越多,最终能得到的评价、拿到的薪...

老道士
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部