Laravel 框架引入 markdown 编辑器

PascalXie 发布于2019-07-01 12:35 / 1784人阅读

摘要：我们来使用下依旧是头部引入首先，在类头部，添加引用然后，调用我们的方法就行啦直接把需要转换的做为参数传递进去我是语法结果为我是语法

引入 markdown 编辑器packages

1.首先在 composer.json 的 require 里面加入以下内容

"yuanchao/laravel-5-markdown-editor": "dev-master"

2.添加完成后，执行 composer update

composer update

3.执行完这行命令，基本上就安装完啦，接下来打开 config/app.php 往里面加点东西

"YuanChaoEditorEndaEditorServiceProvider"

"providers" => [

        ........

        "YuanChaoEditorEndaEditorServiceProvider"

        ........

    ],

// 往里面加入 `"EndaEditor" => "YuanChaoEditorFacadeEndaEditorFacade"`

"aliases" => [

     ..........

    "EndaEditor" => "YuanChaoEditorFacadeEndaEditorFacade"

    ..........

    ],

4.加入以上配置以后，执行

php artisan vendor:publish –force

// 加上 --force 覆盖配置文件

php artisan vendor:publish --force

执行上面这行命令以后，如果出现以下结果，说明你已经安装成功了

Copied File [/vendor/edvinaskrucas/notification/src/config/notification.php] To [/config/notification.php]
Copied Directory [/vendor/yuanchao/laravel-5-markdown-editor/src/config/views] To [/resources/views/vendor/editor]
Copied Directory [/vendor/yuanchao/laravel-5-markdown-editor/src/config/editor] To [/public/plugin/editor]
Copied File [/vendor/yuanchao/laravel-5-markdown-editor/src/config/editor.php] To [/config/editor.php]
Publishing Complete!

使用

安装完以后，说下如何使用

注意！你必须先引入 jquery 在引入头部文件之前
在你的视图文件里面，需要使用编辑器的地方，先引入头部文件

// 引入编辑器代码
  @include("editor::head")

然后，比如我的 textarea 需要把他变成编辑器，这个时候，给你的 textarea 写上一个 id = myEditor

//如： < textarea id=’myEditor’>< /textarea>

同时，在你的 textarea 的父级标签，加上 class = editor,如果你的 textarea 是被 div 包住的，那么你就这样写

// class = editor

一定要给父级标签加上 class = editor,因为要计算编辑器的位置

看了上面的例子，你应该明白，使用编辑器的两步就是

引入头文件给你需要变成编辑器的标签加上 id=’myEditor’ 同时父级标签加上 class = editor

图片上传使用

打开 config/editor.php 配置文件，我们可以看到里面有一项配置是 uploadUrl 这个 uploadUrl ，指得是上传图片请求的地址，
我们上传图片时，是通过 Ajax post 请求控制器，控制器把图片上传，返回图片地址
比如，我的 uploadUrl 配置成了 Home/upload ,那么当我上传图片的时候，它会 Ajax 请求 Home 控制器的 upload 方法对吧？
这个时候 upload 方法里面，需要把图片上传，然后返回图片地址但是！我们的扩展里面已经集成了图片上传并返回编辑器所需要的数据了，所以在你的 upload 方法里面，直接调用扩展的方法就行啦！
首先，在类头部，添加引用

use EndaEditor;


public function upload(){

        // path 为 public 下面目录，比如我的图片上传到 public/uploads 那么这个参数你传uploads 就行了

        $data = EndaEditor::uploadImgFile("path");

        return json_encode($data);

    }

这个 upload 是专门用于编辑器图片上传的哦～

好了，这个时候，你的图片上传已经 ok 了！

markdown 转 html

我们使用编辑器，把内容插入数据库后，展示给用户看的时候，总不能就输出 markdown 的语法吧～那用户也看不懂呀
所以，你需要把 markdown 转成 html，这样游览器才会解析
那么问题来了，如何转呢？我们的扩展已经集成了这个功能。我们来使用下
依旧是头部引入首先，在类头部，添加引用

use EndaEditor;

然后，调用我们的方法就行啦
// 直接把需要转换的 markdown 做为参数传递进去

$str = EndaEditor::MarkDecode("#我是markdown语法");

echo $str;
// 结果为
我是markdown语法

超融合服务器专线服务 markdown在线编辑器 laravel5框架开发 tp框架引入html Markdown

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

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

Laravel5 Markdown 编辑器使用教程

摘要：编辑器使用教程月号发布的这个扩展，好多朋友使用起来有一些问题，好吧，都怪我安装使用说明写的不清楚今天给大家补一篇详细的安装说明文档项目地址求求求求求此处省略一万字功能图片上传语法解析为编辑器该有的功能都有还有谁还有谁预览安装在的里面加 laravel 5 Markdown 编辑器使用教程 5月18号发布的这个扩展，好多朋友使用起来有一些问题，好吧，都怪我安装使用说明写的不清楚└(^o...

qylost 2019-07-01 12:12 评论0 收藏0
Wizard 开源文档管理系统1.0发布啦

摘要：总结如果你在为公司寻找一款开源免费的开发文档文档管理工具，不妨考虑一下项目，一定不会让你失望的。 Wizard 是一款开源文档管理系统，项目地址为 https://github.com/mylxsw/wizard。这个项目是我在2017年就开始开发的，起初只是想做一款能够在公司内部把Swagger文档管理起来的工具，但在这近两年的时间里，一直断断续续的为其添加各种功能，现在终于下决...

cod7ce 2019-07-01 12:44 评论0 收藏0
Laravel 5 Markdown 编辑器

摘要：一个基于的编辑器求安装使用详细教程如果访问比较慢的同学，可以访问这个不需要敲语法可界面操作的功能加粗字体加斜字体无需手写插入链接引用无需手写语法插入图片数字列表普通列表标题分割撤销重做全屏反馈交流欢迎加入我们的学习小组预览初 laravel-5-markdown-editor Based on the markdown editor laravel 5 一个基于 laravel 5...

morgan 2019-07-01 12:12 评论0 收藏0
[译] Laravel 5 之美 - 单元测试

摘要：事实上，这是讨论测试的惟一一章。因此，在中没有单一的测试方法。包含了这是的标准强调业务或特性测试是最流行的框架。然后我们在这个项目中使用进行单元测试。在随后的章节中，将不再进行测试。原文地址: Laravel 5.1 Beauty - Testing Note 本系列第四节内容. 本章会创建一个以后可以用到的项目便于以后我们的课程使用, 同时也会查课各种测试选项. 以后一段时间内会开...

fuyi501 2019-06-28 13:48 评论0 收藏0
Laravel5-Markdown-Editor 在线编辑器

摘要：是基于封装的在线编辑器，支持项目。已集成本地七牛云阿里云文件存储。更新记录完成在线编辑器主程序，且集成本地七牛阿里云存储。 Laravel5-Markdown-Editor Laravel5-Markdown-Editor 是基于 editor.md 封装的 Markdown 在线编辑器，支持 Laravel5 项目。已集成本地、七牛云、阿里云文件存储。更新记录 2017-11-09...

MoAir 2019-06-28 14:14 评论0 收藏0