yuanchao / laravel-5-markdown-editor
Based on the markdown editor laravel 5
Installs: 5 276
Dependents: 1
Suggesters: 0
Security: 0
Stars: 243
Watchers: 14
Forks: 41
Language:JavaScript
This package is not auto-updated.
Last update: 2024-11-09 19:02:14 UTC
README
Based on the markdown editor laravel 5
一个基于 laravel 5 的markdown 编辑器
本项目基于 html&js 一个有情怀的编辑器二次开发完成 传送门
安装使用详细教程
phphub: https://phphub.org/topics/853
如果访问 phphub 比较慢的同学,可以访问这个
SegmentFault:http://segmentfault.com/a/1190000002780158
不需要敲语法可界面操作的功能
- 加粗字体
- 加斜字体
无需手写 md插入链接
- 引用
无需手写 md 语法插入图片
- 数字列表
- 普通列表
- 标题
- 分割
- 撤销
- 重做
- 全屏
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 的容器包住
<div class="editor">
// 创建一个 textarea 而已,具体的看手册,主要在于它的 id 为 myEditor
{!! Form::textarea('content', '', ['class' => 'form-control','id'=>'myEditor']) !!}
// 上面的 Form::textarea ,在laravel 5 中被提了出去,如果你没安装的话,直接这样用
<textarea id='myEditor'></textarea>
// 主要还是在容器的 ID 为 myEditor 就行
</div>
这个时候,编辑器就出来啦~
图片上传移植到扩展内部处理
图片上传移植到扩展的功能上传时间为 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插件
在需要解码的页面确保引入了bootstrap,并加入如下代码
@include('editor::decode')