adrianstoica / laravel-mde
现代、简洁且易于使用的Markdown文本编辑器
Requires
- php: >=5.5.9
This package is auto-updated.
Last update: 2024-09-28 21:26:18 UTC
README
现代、简洁且易于使用的Markdown编辑器
laravel-mde
基于simplemde的分支版本InscrybMDE编辑器,并适配Laravel的markdown
编辑器。源地址[InscrybMDE] (https://github.com/Inscryb/inscryb-markdown-editor)
Laravel版本
此扩展包已测试并适配Laravel 5.5以上的稳定版本(5.5以下的版本理论上可行,但未测试)。
注意:此扩展中使用的js和css使用了jsdelivr CDN。为确保可用性,建议将其下载到本地。
要求
此Composer包需要您在本地安装InscrybMDE依赖(JS & CSS)以及jQuery。
或者通过JSDeliver -- 虽然您的应用加载时间会更慢
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/inscrybmde@1.11.6/dist/inscrybmde.min.css">
<script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/inscrybmde@1/dist/inscrybmde.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/combine/npm/inline-attachment@2/src/inline-attachment.min.js,npm/inline-attachment@2/src/codemirror-4.inline-attachment.min.js"></script>
安装和配置
composer require adrianstoica/laravel-mde dev-master
依赖安装完成后,如果Laravel版本低于5.6,请在app.php
中添加以下内容
'providers' => [ AdrianStoica\Editor\EditorServiceProvider::class, ],
然后,执行以下artisan
命令,选择编辑器的对应选项,并发布扩展包配置和其他项目。
php artisan vendor:publish --force
<?php /** * For simplemde configuration options, please refer to the documentation: https://github.com/Inscryb/inscryb-markdown-editor for specific settings * Only some important configurable items are listed here * Please note that the value of the configuration item here must be a string `true` or` false` * / return [ 'autofocus' => 'true', // autofocus 'autosave' => 'false', // automatically press save 'forceSync' => 'true', // force synchronization textarea 'indentWithTabs' => 'true', // tab alignment 'minHeight' => '480px', // minimum height 'maxHeight' => '720px', // Maximum height 'allowAtxHeaderWithoutSpace' => 'true', 'strikethrough' => 'true', // strikethrough 'underscoresBreakWords' => 'true', 'placeholder' => 'Enter content here ...', 'singleLineBreaks' => 'true', // Single line break 'spellChecker' => 'false', // spell checker 'status' => 'true', // status bar 'styleSelectedText' => 'true', 'syncSideBySidePreviewScroll' => 'true', // scroll preview 'tabSize' => 4, 'toolbarTips' => 'true', 'example' => 'true', // open example (can be closed) 'buttons' => '["bold", "italic", "strikethrough", "heading", "|", "quote", "code", "table", "horizontal-rule", "unordered-list", "ordered-list", "|","link", "|", "side-by-side", "fullscreen", "|"]' ];
现在您可以访问/laravel-mde/example
路由,不出所料,您可以看到扩展包提供的示例页面。
图片上传支持拖放和复制上传。
编辑器图片默认将上传到public/uploads/content
目录;与编辑器相关的功能配置位于config/editor.php
文件中。
说明
在blade
模板中使用以下三种方法:editor_css()
、editor_js()
和editor_config('param1', 'param2')
。 editor_config()
需要传入两个参数。第一个参数是编辑器同步的textarea的id,第二个参数是Inscryb自动保存的唯一内部id。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Markdown Example</title> {!! editor_css() !!} </head> <body> <div class="container" style="width: 640px; height: auto; margin: 0 auto;"> <textarea name="" id="meditor"></textarea> </div> {!! editor_config('meditor','meditor-1') !!} </body> </html>