Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/endachao/laravel-5-markdown-editor
Based on the markdown editor laravel 5
https://github.com/endachao/laravel-5-markdown-editor
Last synced: 2 days ago
JSON representation
Based on the markdown editor laravel 5
- Host: GitHub
- URL: https://github.com/endachao/laravel-5-markdown-editor
- Owner: endachao
- License: apache-2.0
- Created: 2015-05-18T07:04:05.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-06-06T03:00:54.000Z (over 8 years ago)
- Last Synced: 2024-11-10T18:56:19.771Z (6 days ago)
- Language: JavaScript
- Size: 505 KB
- Stars: 243
- Watchers: 14
- Forks: 41
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# laravel-5-markdown-editor
Based on the markdown editor laravel 5
一个基于 laravel 5 的markdown 编辑器
本项目基于 html&js 一个有情怀的编辑器二次开发完成 [传送门](https://github.com/Integ/BachEditor)
# 安装使用详细教程
phphub: [https://phphub.org/topics/853](https://phphub.org/topics/853)
如果访问 phphub 比较慢的同学，可以访问这个
SegmentFault:[http://segmentfault.com/a/1190000002780158](http://segmentfault.com/a/1190000002780158)
# 不需要敲语法可界面操作的功能
1. 加粗字体
2. 加斜字体
3. `无需手写 md插入链接`
4. 引用
5. `无需手写 md 语法插入图片`
6. 数字列表
7. 普通列表
8. 标题
9. 分割
10. 撤销
11. 重做
12. 全屏
# Bug 反馈&交流
欢迎加入我们的 laravel 学习小组：`365969825`
# 预览
# Update Log
`2015-05-18` 初版提交
`2015-05-19` 图片上传移植到扩展内部处理
`2015-05-19` 新增解析 markdown 为 html 功能
# Installation
1.在 `composer.json` 的 require里 加入
```
"yuanchao/laravel-5-markdown-editor": "dev-master"
```
2.执行 `composer update`
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`
执行完上面的命令后，会生成配置文件和视图文件到你的 config/ 和 views/vendor 目录
# Usage
1.在需要编辑器的地方插入以下代码
```
// 引入编辑器代码
@include('editor::head')
// 编辑器一定要被一个 class 为 editor 的容器包住
// 创建一个 textarea 而已，具体的看手册，主要在于它的 id 为 myEditor
{!! Form::textarea('content', '', ['class' => 'form-control','id'=>'myEditor']) !!}
// 上面的 Form::textarea ，在laravel 5 中被提了出去，如果你没安装的话，直接这样用
// 主要还是在容器的 ID 为 myEditor 就行
```
这个时候，编辑器就出来啦～
#### 图片上传移植到扩展内部处理
`图片上传移植到扩展的功能上传时间为 2015-05-19 10:40 如果在这个时间前安装的朋友，请先更新`
2.图片上传配置，打开config/editor.php 配置文件，修改里面的 `uploadUrl` 配置项，为你的处理上传的 action
我的上传 action 代码为
```
use EndaEditor;
public function postUpload(){
// endaEdit 为你 public 下的目录 update 2015-05-19
$data = EndaEditor::uploadImgFile('endaEdit');
return json_encode($data);
}
```
3.链接添加功能添加了方便的添加系统内部文章的特性，首先在config/editor.php配置文件添加 `ajaxTopicSearchUrl` 配置项，关于返回的数据格式，请在配置文件中查看注释。
之后在您没有选中任何字符的情况下点击添加链接，将会看到多了一个标题输入框，您输入一些字符，它会根据 `ajaxTopicSearchUrl` 获得的文章标题列表来生成自动补全的下拉列表。
当您选中某个文章之后，下面的链接也会自动被填上。
###完成以上这些配置，你就可以在线插入图片啦
### 新增解析 markdown 为 html 功能
头部引用文件
```
use EndaEditor;
```
列子如下：
```
$art = Article::find(16);
return view('test',[
'content'=>EndaEditor::MarkDecode($art->content)
]);
```
直接把需要解析的 markdown 扔进这个方法就行
```
EndaEditor::MarkDecode("#我是参数")
```
为了保证图片的显示正常，加入[zoom插件](https://github.com/fat/zoom.js)
在需要解码的页面确保引入了bootstrap，并加入如下代码
```
@include('editor::decode')
```