README

Xetaravel Editor.md

用于在Laravel中Editor.md的包装器。

要求

安装

composer require xetaio/xetaravel-editor-md

服务提供者

在您的config/app.php文件中导入EditorServiceProvider

'providers' => [
    //...
    Xetaio\Editor\EditorServiceProvider::class,
    //...
]

供应商发布

将供应商文件发布到您的应用程序中（包括配置文件config/editor.php和public/vendor/editor.md目录）

php artisan vendor:publish --provider="Xetaio\Editor\EditorServiceProvider"

配置

所有配置选项都可以在您的config/editor.php文件中找到。有关完整配置选项，请参阅Editor.md网站上的文档。

使用方法

要使用基本选项，只需使用插件中包含的助手函数即可。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Editor.md example</title>
   {!! editor_css() !!}
</head>
<body>
    <h2>Editor.md example</h2>

    <div id="editormd">
        <!-- You must hide it with `display:none;` -->
        <textarea class="form-control" name="content" style="display:none;">
            # Editor.md for Laravel
        </textarea>
    </div>

    {!! editor_js() !!}
    {!! editor_config(['id' => 'editormd']) !!}
</body>
</html>

高级使用

如果您想使用自定义选项或不在配置文件中的选项，最好的方法之一是像这样设置您的编辑器：

<!-- layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Editor.md example</title>

   <!-- Embed Styles -->
   @stack('styles')
</head>
<body>
   <!-- Content -->
   @yield('content')

   <!-- Embed Scripts -->
   @stack('scripts')
</body>
</html>

<!-- controller/my_view.blade.php -->
@extends('layouts.app')

@push('styles')
   {!! editor_css() !!}
@endpush

@push('scripts')
   {!! editor_js() !!}

   @php
       $config = [
           'id' => 'commentEditor',
           'height' => '350',
           // Others settings here...
       ];
   @endphp

   @include('editor/partials/_comment', $config)
@endpush

@section('content')
//...
<div id="commentEditor">
   <textarea class="form-control" required="required" style="display:none;" name="content"></textarea>
</div>
//...
@endsection

<!-- editor/partials/_comment.blade.php -->
<script type="text/javascript">
var _{{ array_get($config, 'id', 'myeditor') }};
$(function() {
   editormd.emoji = {
       path : "{{ array_get($config, 'emojiPath', config('editor.emojiPath')) }}",
       ext : ".png"
   };
   _{{ array_get($config, 'id', 'myeditor') }} = editormd({
       id : "{{ array_get($config, 'id', 'myeditor') }}",
       width : "{{ array_get($config, 'width', config('editor.width')) }}",
       height : "{{ array_get($config, 'height', config('editor.height')) }}",
       saveHTMLToTextarea : {{ array_get($config, 'saveHTMLToTextarea', config('editor.saveHTMLToTextarea')) }},
       emoji : {{ array_get($config, 'emoji', config('editor.emoji')) }},
       taskList : {{ array_get($config, 'taskList', config('editor.taskList')) }},
       tex : {{ array_get($config, 'tex', config('editor.tex')) }},
       toc : {{ array_get($config, 'toc', config('editor.toc')) }},
       tocm : {{ array_get($config, 'tocm', config('editor.tocm')) }},
       codeFold : {{ array_get($config, 'codeFold', config('editor.codeFold')) }},
       flowChart: {{ array_get($config, 'flowChart', config('editor.flowChart')) }},
       sequenceDiagram: {{ array_get($config, 'sequenceDiagram', config('editor.sequenceDiagram')) }},
       path : "{{ array_get($config, 'path', config('editor.path')) }}",
       imageUpload : {{ array_get($config, 'imageUpload', config('editor.imageUpload')) }},
       imageFormats : {!! array_get($config, 'imageFormats', json_encode(config('editor.imageFormats'))) !!},
       imageUploadURL : "{{ array_get($config, 'imageUploadURL', config('editor.imageUploadURL')) }}?_token={{ csrf_token() }}&from=xetaravel-editor-md",
       pluginPath : "{{ asset(array_get($config, 'pluginPath', config('editor.pluginPath'))) }}/",
       watch : false,
       editorTheme : 'mdn-like',
       placeholder : 'Type your comment here...',
       toolbarIcons : function () {
           return [
               "undo", "redo", "|",
               "bold", "italic", "quote", "|",
               "h1", "h2", "|",
               "help"
           ];
       }
      // Others settings...
   });
});
</script>

上传文件

此包包含内置的上传功能。您无需做任何操作即可使其工作（除了上传图片）。😜如果您想自己实现上传器，只需注册一个新的路由并将其设置为imageUploadURL配置选项。（当然，您需要创建自己的控制器和动作，例如这里有一个例子）

贡献

如果您想通过添加新功能或修复错误来为此项目做出贡献，请随意提交PR。

xetaio / xetaravel-editor-md

维护者

详细信息