https://github.com/noisywinds/laravel-smartmd

🎯 A simple markdown editor compatible most markdown parse,You can choose any parse methods on server or client,like Mathematical formula、flowchart、upload image...
https://github.com/noisywinds/laravel-smartmd

emoji flowchart latex markdown markdown-editor markdown-parser

Last synced: 3 months ago
JSON representation

🎯 A simple markdown editor compatible most markdown parse,You can choose any parse methods on server or client,like Mathematical formula、flowchart、upload image...

• Host: GitHub
• URL: https://github.com/noisywinds/laravel-smartmd
• Owner: NoisyWinds
• License: mit
• Created: 2018-11-16T11:13:01.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-22T06:28:45.000Z (almost 6 years ago)
• Last Synced: 2024-10-12T17:02:11.139Z (3 months ago)
• Topics: emoji, flowchart, latex, markdown, markdown-editor, markdown-parser
• Language: PHP
• Homepage: https://xiaoqingxin.site/editor/write
• Size: 3.58 MB
• Stars: 73
• Watchers: 4
• Forks: 14
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Laravel-smartmd

![](https://xiaoqingxin.site/images/default_img.jpg)



 Documentation | 中文文档















A simple markdown editor compatible most markdown parse,You can choose any parse methods on server or client,like Mathematical formula、flowchart、upload image...

this program is a plugin for laravel 5.4 and php 7.1 upper.more feature develop now...    

##  Screenshots

editor demo: [Demo](https://xiaoqingxin.site/editor/write)   

js render page [Demo](https://xiaoqingxin.site/editor/js-show)  

php render page [Demo](https://xiaoqingxin.site/editor/php-show)

  

  ![](./docs/screenshot.png)

  --- 

  ![](./docs/screenshot_02.gif) 

  ---

  ![](./docs/screenshot_03.gif)

Reference:

- CodeMirror [link](https://github.com/codemirror/CodeMirror) 

- Simplemde-markdown [link](https://github.com/sparksuite/simplemde-markdown-editor)

- markdown-it (markdown render) [link](https://github.com/markdown-it/markdown-it)

- mermaid (flowchart) [link](https://github.com/knsv/mermaid)

- intervention (image handling) [link](https://github.com/Intervention/image)

## requirements

- PHP >= 7.1.0

- Laravel >= 5.4.0

## Installation

First, install package.

```

composer require noisywinds/laravel-smartmd

```

Then run these commands to publish assets and config：

```

php artisan vendor:publish --provider="NoisyWinds\Smartmd\SmartmdServiceProvider"

```

make test view router:

```

Route::group(['namespace' => 'Smartmd', 'prefix' => 'editor'], function () {

    Route::post('/upload', 'UploadController@imSave');

    Route::get('/write', function () {

        return view('vendor/smartmd/write');

    });

    Route::get('/php-show','ParseController@index');

    Route::get('/js-show',function(){

        return view('vendor/smartmd/js-show');

    });

});

```

Rewrite UploadController or config/smartmd.php to change upload path:

```php

 [

        /*

         * like filesystem, Where do you like to place pictures?

         */

        "root" => storage_path('app/public/images'),

        /*

         * return public image path

         */

        "url" => env('APP_URL').'/storage/images',

    ],

];

```

* notice: uploda image will optimize and resize in the UploadController

## Some shortcode

1. Bold (Ctrl + b)

2. Italic (Ctrl + I)

3. Insert Image (Ctrl + Alt + I)

4. Insert Math (Ctrl + m)

5. Insert flowchart (Ctrl + Alt + m)

6. more... (mac command the same with ctrl)

## editor options

```javascript

new Smartmd({

   // editor element {string} 

   el: "#editor",

   

   // editor wrapper layout {string or number}

   height: "400px",

   width: "100%",

   

   // autosave 

   autoSave: {

     // uuid is required {string or number}

     uuid: 1,

     // {number}

     delay: 5000

   },

   

   // init state {boolean}

   isFullScreen: true, // default false

   isPreviewActive: true // default false

});

```

## parse markdown 

#### I don't need editor:

```html

// require in your view meta

@include('Smartmd::js-parse')

```

```

    // create Parsemd object use javascript parse markdown

    var parse = new Parsemd();

    var html = parse.render(document.getElementById("editor").value.replace(/^\s+|\s+$/g, ''));

    document.getElementById("content").innerHTML = html;

```

#### I need editor:

```html

    var smartmd = new Smartmd();

    smartmd.markdown("# hello world");

```

#### I want php render:

* only render Formula、Flowchart、Code highlight use JavaScript

```html

// require in your view meta

@include('Smartmd::php-parse')

```

ParseController.php

```

use NoisyWinds\Smartmd\Markdown;

$parse = new Markdown();

$text = "# Your markdown text";

$html = $parse->text($text);

return view('Smartmd::php-show',['content'=>$html]);

```

## How to expand

#### editor

- CodeMirror [link](https://github.com/codemirror/CodeMirror) 

#### markdown render

- markdown-it (markdown render) [link](https://github.com/markdown-it/markdown-it)

## issue 

Welcome to ask questions or what features you want to be compatible with.