endachao / laravel-5-markdown-editor

Based on the markdown editor laravel 5

laravel-5-markdown-editor

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

不需要敲语法可界面操作的功能

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 的容器包住
<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')

laravel-5-markdown-editor's Issues

Markdown转HTML后图片显示优化推荐

推荐两个js图片显示效果插件:

1.华丽全面但稍微复杂点的:https://github.com/fancyapps/fancyBox
2.简洁明快且实现简单点的:https://github.com/fat/zoom.js

我是用的第二个

修改:
只需要修改/vendor/yuanchao/laravel-5-markdown-editor/src/Parsedown.php里inlineImage()方法:

'attributes' => array(
                    'src' => $Link['element']['attributes']['href'],
                    'alt' => $Link['element']['text'],
                    'data-action'=>"zoom",
                    'width' => '500',
                ),

'data-action'=>"zoom",如果用第二个链接,这个是关键,我用的第二个.

然后在需要该效果的页面加载(我把相关的js和css放到了public/js/imgInZoomByJQuery目录下了):

<link href="{{ asset('/js/imgInZoomByJQuery/zoom.css') }}" rel="stylesheet">
<script type="text/javascript"  src="{{asset('/js/imgInZoomByJQuery/transition.js')}}"></script>
<script type="text/javascript"  src="{{asset('/js/imgInZoomByJQuery/zoom.min.js')}}"></script>

希望能帮到需要的人

bootstrap模态框失效bug

因为bootstrap在head.balde.php里面已经引入，但是很多人的项目默认自己也引入bootstrap，jquery等等的。而重复引入bootstrap会导致bootstrap的模态框无法出现。建议作者在readme说明一下，以免新人踩坑。

How to change language to english

Hello,

How to change language to english?

如何将图片上传到七牛云

如何将图片上传到七牛云

js 报错

// 引入编辑器代码
@include('editor::head')
做到这一步，加载view时，js报错

codemirror.min.js:formatted:5578Uncaught TypeError: Cannot read property 'value' of undefined

我的上传 action 代码为...这个可否说的更加详细些?

你写的这个action方法确实不知道放哪里更好,放控制器中?还是就放在这个editor配置文件里?想快速试试,谢谢指教!

输入文字时js报错

Uncaught TypeError: hljs.listLanguages is not a function
highlight.js:32

highlight js报错 提示hljs.listLanguages is not a function

在控制台测试了下，的确没有这个方法，只有一个getLanguage还有registerLanguage，是因为版本问题还是我哪里搞错了吗

页面出现弹出框，无法正常显示的情况下

是因为重复引用bootstrap造成的，请打开

resources/views/vendor/editor/head.blade.php

里面。注释掉

{{--<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.css" rel="stylesheet">--}}
{{--<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.js"></script>--}}

这两个引入文件

@ 功能如何使用以及如何禁用<script>标签？

我看源码里面好像有一段@功能的源码，但是注释掉了，是没有开发好么？还是怎么，该如何使用这个功能。

最近在写一个类似于phphub的论坛，需要用到这个功能，所以特来问一下。

还有就是我看你博客里面，输入<script>alert(1)</script>不会弹出提示框，是如何防止这种的情况的？

我是直接存Markdown语法格式到数据库，在blade模板上使用EndaEditor::MarkDecode方法的。是否要再控制器里面使用？还是先转换再存入数据库，这样的话，假如要修改，岂不是不能用Markdown了？

如果有个非PHP版本就好了

我是做java的，想用这个markdown编辑器，看到一堆php代码直接不会了！！
可以提供一个演示站点吗

图片上传没有验证，容易被脚本攻击

图片上传没有验证，被脚本攻击了。。。。。。。。。

希望可以提供一个Demo

这样用户就可以预览编辑器的效果了

建议同页面多个编辑器

请考虑一下能不能用样式来替代id = myEditor？
这样就可以在同一个页面中添加多个Editor了。

建议提升到正式版本，现在还需要minimum-stability为dev

毕竟不希望项目使用dev的组件

Markup code not being parsed

Hello,
Thank you for this package, it looks really good but I can't get it to work.

On create article, the editor shows and it displays correctly. When I submit it, the text gets submitted into the database like this **this is a bold text** and also displays the same way on the view.

The index() method

public function index()
    {

        $articles = Article::latest('published_at')->published()->get();

        $art = Article::findOrFail(64);

        //dd($art->body);

        return view('blog/index', ['content' => EndaEditor::MarkDecode($art->body)])->with('articles', $articles);
    }

Here I am trying to test it on an article with ID 64 which I just submitted with markdown editor.

And this is the form

@include('editor::head')

        <div class="editor">
            <p>
                {!! Form::label('body', 'Body:') !!}
                {!! Form::textarea('body', null, ['class' => 'form-control', 'id' => 'myEditor']) !!}
            </p>
        </div>

This is the js in resources/views/vendor/editor/head.blade.php

$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(function() {
        url = "{{ url(config('editor.uploadUrl')) }}";
        var myEditor = new Editor(url);
        myEditor.render('#myEditor');
    });

What am I doing wrong here?

EDIT: dd(EndaEditor::MarkDecode($art->body)) gives the output of "<p><strong>this is a new test</strong></p>" so in theory it should be working.

图片上传是token的问题

全屏后无法回到原始大小

点击全屏后无法再回到原始大小

fileUpload()方法未定义的错误,解决办法分享

在一个页面多次引入了jq库导致,去掉多引入的jq即可.

建议修改代码为遵循psr编码规范