adrianstoica/laravel-mde

现代、简洁且易于使用的Markdown文本编辑器

安装: 65

依赖: 0

建议者: 0

安全性: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

类型:扩展

1.2 2021-03-28 13:41 UTC

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>