Skip to content

XetaIO/Xetaravel-Editor-md

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
config
config
 
 
public
public
 
 
src
src
 
 
.gitignore
.gitignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
composer.json
composer.json
 
 

Repository files navigation

Xetaravel Editor.md

Stable Version Downloads Laravel License
Latest Stable Version Total Downloads Laravel 5.6 License

A wrapper to use Editor.md with Laravel.

Requirement

PHP

Installation

composer require xetaio/xetaravel-editor-md

ServiceProviders

Import the EditorServiceProvider in your config/app.php:

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

Vendor Publish

Publish the vendor files to your application (included the config file config/editor.php and the public/vendor/editor.md directory) :

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

Configuration

All configuration options can be found in your config/editor.php file. For a full configuration options, read the documentation on the Editor.md site.

Usage

To use it with the basic options, just use the helpers included with the plugin:

<!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>

Advanced usage

If you want to use your custom options or options that are not in the config file, one of the best way, it to setup your Editor like that :

<!-- 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>

Upload File

This package come with a build-in upload feature. You don't have to do anything to get it work.. expect to upload an image. 😜 If you want to do your own uploader, just register a new route and set it to imageUploadURL configuration option. (Of course you will need to create your own Controller and action, take a look here for an exemple)

Contribute

If you want to contribute to the project by adding new features or just fix a bug, feel free to do a PR.

About

editor.md for Laravel , markdown editor for Laravel

Topics

markdown laravel markdown-editor wysiwyg laravel-5-package editor-md

Resources

Readme

License

MIT license
Activity
Custom properties

Stars

22 stars

Watchers

3 watching

Forks

6 forks
Report repository

Releases 7

Editor-md 9.0.0 Latest
Mar 30, 2022
+ 6 releases

Packages

No packages published

Languages

  • PHP 100.0%