Laravel5-Markdown-Editor 在线编辑器

MoAir 发布于2019-06-28 14:14 / 3555人阅读

摘要：是基于封装的在线编辑器，支持项目。已集成本地七牛云阿里云文件存储。更新记录完成在线编辑器主程序，且集成本地七牛阿里云存储。

Laravel5-Markdown-Editor

Laravel5-Markdown-Editor 是基于 editor.md 封装的 Markdown 在线编辑器，支持 Laravel5 项目。已集成本地、七牛云、阿里云文件存储。

更新记录

2017-11-09 Release v1.0.0 完成 markdown 在线编辑器主程序，且集成本地、七牛、阿里云oss存储。

安装流程

1、安装的两种方式

① 直接编辑配置文件

将以下内容增加到 composer.json：

require: {
    "chenhua/laravel5-markdown-editor": "~1.0"
}

然后运行 composer update。

② 执行命令安装

运行命令：

composer require chenhua/laravel5-markdown-editor

2、完成上面的操作后，修改 config/app.php 中 providers 数组

ChenhuaMarkdownEditorMarkdownEditorServiceProvider::class,

3、修改 config/app.php 中 aliases 数组

"MarkdownEditor" => ChenhuaMarkdownEditorFacadesMarkdownEditor::class,

4、执行 artisan 命令，生成 config/markdowneditor.php 配置文件

php artisan vendor:publish --tag=markdown

5、修改 config/markdowneditor.php 配置文件

 "local", //默认返回存储位置url
    "dirver"      => ["local"], //存储平台 ["local", "qiniu", "aliyun"]
    "connections" => [
        "local"  => [
            "prefix" => "uploads/markdown", //本地存储位置，默认uploads
        ],
        "qiniu"  => [
            "access_key" => "",
            "secret_key" => "",
            "bucket"     => "",
            "prefix"     => "", //文件前缀 file/of/path
            "domain"     => "" //七牛自定义域名
        ],
        "aliyun" => [
            "ak_id"     => "",
            "ak_secret" => "",
            "end_point"  => "",
            "bucket"    => "",
            "prefix"    => "",
        ],
    ],
];

七牛和阿里云的配置内容，需要去对应官网申请账号并配置获取，此处省略一万字。。。

使用方法 在 xxx.blade.php 编辑器相应位置添加如下代码：


    


@include("markdown::encode",["editors"=>["test-editormd"]])

以上操作能生成一个 name="test-editormd" 的 markdown 文本编辑框，并能实时预览效果.

解析 markdown 格式文本为 html 格式

① 前端js方式解析 markdown 文本


    # 这是一个h1标签
## 这是一个h2标签
    

@include("markdown::decode",["editors"=>["doc-content"]])

② PHP方式解析 markdown 文本

    echo MarkdownEditor::parse("#中间填写markdown格式的文本");

更多用法可以参考 editor.md 官方代码，解锁更多姿势>>>

效果展示

default样式：

License

本扩展遵循 MIT license 开源。

云服务器 GPU云服务器在线编辑器在线表单编辑器 html在线编辑器在线html编辑器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/26063.html

10个免费的HTML在线编辑工具

摘要：是一个多窗格的在线编辑器。是一个拥有四个窗格的在线编辑器，他们分别用来编写和并进行实时预览。不仅仅是一个免费的在线编辑工具。它实际上是一个用来美化和精简代码的在线工具。总而言之，这是一个非常基础的编辑器。 onlinehtmleditor.net showImg(https://segmentfault.com/img/bVqZNZ);onlinehtmleditor.net是非常简单...

WelliJhon 2019-08-01 14:55 评论0 收藏0
如何制作一款在线编译器

摘要：在文章开始之前先展示一下我自己做的在线编译器点此预览大概三四个月之前我开始有了制作在线编译器的想法，在此之前我接触过很多的在线编译器，如等，这些都非常优秀且有着庞大的用户群体的编译器。是一个用于浏览器的实现的多功能文本编辑器。在文章开始之前先展示一下我自己做的在线编译器 JS-Encoder: 点此预览 showImg(https://i.loli.net/2019/07/21/5d...

Alan 2019-08-26 10:14 评论0 收藏0
非常实用的在线工具网站清单

摘要：文章目录在线图片压缩在线压缩最好用的切图工具在线工具一键抠图免费字体免费素材图片和视频中国风配色网站免费壁纸免费短连接在线在线代码编辑在线流程图思维导图在线图片压缩传送门在线图片压缩网站已经优化超过十亿张图片，支持，，等格式的图片的压缩。 ...

XanaHopper 2021-11-18 10:02 评论0 收藏0
在线代码编辑器利器-codeMirror

摘要：说明是一款十分强大的代码编辑插件，提供了十分丰富的，最近在项目中用到了这款插件，做一个记录。说明 codeMirror是一款十分强大的代码编辑插件，提供了十分丰富的API，最近在项目中用到了这款插件，做一个记录。官网 github地址安装下载安装包在github上直接download 或者 clone npm 安装 npm install --save code...

Doyle 2019-08-23 17:13 评论0 收藏0
刚才把kindeditor在线编辑器做成可视化UBB编辑模式了

摘要：可惜不提供在线编辑功能，怎么办呢看，这里有人发问，三年过去了居然无人回答。刚才研究了一下的代码我是直接修改的，发现有一个简单的办法可以把在线编辑器变成可视化编辑模式的。我挺喜欢UBB编辑的，因为它能简化存储内容，保存发布内容之后，前台样式化也很简单。可惜kindeditor不提供UBB在线编辑功能，怎么办呢？看，这里有人发问http://kindeditor.net/view.php...

dreamans 2019-08-19 14:33 评论0 收藏0