Editor.md For Laravel 5

介绍

介于在Laravel下使用Editor.md这款Markdown编辑器的原因,觉得这款编辑器非常好用,于是做成laravel的扩展,方便使用!
Editor.md的官网是:https://pandao.github.io/editor.md/example...

项目地址(可以给一个star)

https://github.com/LaravelChen/laravel-edi...

效果图

默认样式

image

sublime样式

image

安装

使用composer安装扩展(最好翻墙哈哈)

composer require laravelchen/laravel-editormd

然后在config/app.php添加provider

'providers' => [
    LaravelChen\Editormd\EditorMdProvider::class,
   ];

最后生成配置文件

php artisan vendor:publish

用法

配置文件的内容(config/editormd.php)

<?php
return [
      'width' => '100%',//宽度建议100%
    'height'=>'700',//高度
    'theme'=>'default',//顶部的主题分为default和dark
    'editorTheme'=>'default',//显示区域的主题分为default和pastel-on-dark 注:如果想要配置其他主题,请参考vendor/editormd/lib/theme目录下的css文件
    'previewTheme'=>'default',//编辑区域的主题分为default,dark,
    'flowChart' => 'true',  //流程图
    'tex' => 'true',  //开启科学公式TeX语言支持
    'searchReplace'=>'true',//搜索替换
    'saveHTMLToTextarea' => 'true',  //保存 HTML 到 Textarea
    'codeFold' => 'true',  //代码折叠
    'emoji' => 'true',  //emoji表情
    'toc' => 'true',  //目录
    'tocm' => 'true',  //目录下拉菜单
    'taskList' => 'true',  //任务列表
    'imageUpload' => 'true',  //图片本地上传支持
    'sequenceDiagram' => 'true',  //开启时序/序列图支持
];

例子(请在editor_js()之前引用jquery)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    {!! editor_css() !!}
</head>
<body>
<div class="container">
    <div class="col-md-12" style="margin-top: 50px">
        <div id="editormd_id">
            <textarea name="content" style="display:none;"></textarea>
        </div>
    </div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
{!! editor_js() !!}
</body>
</html>

OK!一切完成后!尽请使用吧!

本作品采用《CC 协议》,转载必须注明作者和本文链接
LaravelChen
本帖由 Summer 于 6年前 加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 39
小滕

感谢分享 :laughing:

7年前 评论

@轻色年华不谢不谢?

7年前 评论

我之前就在找这种扩展,原来已经有现成的轮子了,谢谢楼主!

7年前 评论

加载 css、js 文件存在路径的问题,建议使用相对路径,不用路由只能设置成一级了,比如

/editormd -> /vendor/path/to/js
/test/editormd -> /test/vendor/path/to/js
7年前 评论

@daydaygo 抱歉,应该是绝对路径

7年前 评论

还在学习provider的初学者飘过,赞楼主。

7年前 评论
DukeAnn

@daydaygo 这个路径问题确实让人头疼,但是换成绝对路径还是会报错,有个动态加载css js 路径不对

7年前 评论

@ADKi 你重新下载一下,我之前修复了,只需要在前面加一个/

7年前 评论
DukeAnn

重新安装?

7年前 评论
DukeAnn

@chenxin 看到了 你的compsoer 没更新。。所以拉下来还是错的。

7年前 评论
DukeAnn

file
改完了,报错

7年前 评论
DukeAnn

file
样式上还有个 关闭按钮没什么用

7年前 评论

@ADKi 你把它影藏掉吧,我之后修复吧,就是display:none
谢谢反馈

7年前 评论

@ADKi 他其实是点击预览样式的时候有用,

7年前 评论
DukeAnn

@chenxin 那JS 报错什么鬼

7年前 评论

@ADKi 我创建了一个新项目,composer下来,没有报错呀,之前很多人用也没说有报错,之前还有个老外在githu上面反馈说可以增加一个自定义上传文件夹路劲,都没有说报错...

7年前 评论

渲染成html有具体的方法吗?

7年前 评论
DukeAnn

控制台里面有没报错?F12里面 有报上面那个错误,就是依赖里面的那几个js 报错了,不知道影不影响使用

7年前 评论
DukeAnn

@chenxin 为什么你的没有那个关闭按钮,你自己隐藏了?

7年前 评论

@ADKi 我本来就没有,别人用也没有,官方上面的也没有,我用的官方的包,控制台里没有报错,上传图片都没有报错..

7年前 评论
DukeAnn

@chenxin 那我这个按钮和 JS报错是跟自己的JS冲突了?我去查查

7年前 评论
DukeAnn

测试了一下,没有别的 js 控制台还是报错

file

file

7年前 评论

刚接触,不知怎样渲染成html,有具体方法吗?

7年前 评论

可以问下解析的时候emoji怎么替换成图片?

7年前 评论
DukeAnn

不能自定义上传url很忧伤只能改代码了

7年前 评论

@happygeek 我分享一下我的做法:将使用editor.md所写的文字以及emoji均存入数据库,然后直接读出来

file

7年前 评论

看起来不错

7年前 评论

图片可以上传到7牛吗?

7年前 评论

@dope2008 暂时没弄!之后弄吧!

7年前 评论

@chenxin Laravel5.4支持吗?为什么我安装了,没有用的

7年前 评论

markdown to html 请问怎么实现像预览的那种效果,目录,流程图及代码行号都能显示出来。

6年前 评论

star,fork一下,过来研究下。

6年前 评论
有一个laravel包可以用,亲测可以,编辑器效果很棒!!!:+1:

parsedown-laravel

6年前 评论

我这刚集成到自己项目中,
你这就出来包了. 发现晚了..

6年前 评论

config/editormd.php 这个文件下的参数 还可以新增吗?
我想要如果是代码的话.出来行号.

6年前 评论

file

发现和 laravel-admin 用的是同一个七牛上传扩展包,目前项目中该包版本要求 "zgldh/qiniu-laravel-storage": "^0.9.2" 要0.9 了

5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!