nikitakls/yii2-editor-md

Markdown editor.md for Yii2

nikitakls/yii2-editor-md

editor.md for Yii2, _(*1)

Installation

The preferred way to install this extension is through composer., _(*2)

Either run, _(*3)

composer require nikitakls/yii2-editor-md

or add, _(*4)

"nikitakls/yii2-editor-md": "*"

to the require section of your composer.json file., _(*5)

Usage

Once the extension is installed, simply use it in your code by:, _(*6)

field($model, 'info_md')->widget(EditorMdWidget::className(), [
                'options' => [// html attributes
                    'id' => 'editor-markdown',
                ],
                'language' => 'ru',
                'clientOptions' => [
                    'height' => '300',
                    // 'previewTheme' => 'dark',
                    // 'editorTheme' => 'pastel-on-dark',
                    'markdown' => '',
                    //'codeFold' => true,
                    'syncScrolling' => true,
                    'saveHTMLToTextarea' => true,
                    'searchReplace' => true,
                    'watch' => true, 
                    'htmlDecode' => 'style,script,iframe|on*',
                    //'toolbar' => false,             
                    'placeholder' => 'MarkDown',
                    'previewCodeHighlight' => false,  
                    'emoji' => true,
                    'taskList' => true,
                    'tocm' => true, 
                    'tex' => true,   
                    'flowChart' => true,            
                    'sequenceDiagram' => true,     
                    'imageUpload' => true,
                    'imageFormats' => ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],
                    'imageUploadURL' => Url::to(['file-upload', 'type' => 'md']),
                    'toolbarIcons' => [
                        "undo", "redo", "|",
                        "bold", "del", "italic", "list-ul", "list-ol", "hr", "|",
                        "code", "code-block", "|",
                        "image", "table", "link", "|",
                        "html-entities", "|",
                        "preview", "watch","|",
                        "help"
                    ],
                ]
            ]
) ?>

See more options [https://pandao.github.io/editor.md/en.html], _(*7)

Markdown behavior

This behavior save html render markdown in active record model attribute. You can use markdown behavior for ActiveRecord Model next:, _(*8)

use nikitakls\markdown\behaviors\MarkdownModelBehavior

class Content extents ActiveRecord{
    /**
     * @inheritdoc
     */
    public function behaviors()
    {
        return [
            [
                'class' => MarkdownModelBehavior::className(),
                'sourceAttribute' => 'content',
                'destinationAttribute' => 'clean_content',
            ],
        ];
    }

}

Markdown action for upload files

Configure you controller if you want to have upload image functionality:, _(*9)

use nikitakls\markdown\actions\UploadFileAction; 

class ContentController extends Controller
{

    /**
     * @inheritdoc
     */
    public function actions()
    {

        return [
            'upload-image' => [
                'class' => UploadFileAction::class,
                'url' => '@fileUrl/origin/puzzle/',
                'path' => '@filePath/origin/puzzle/',
                'thumbPath' => '@filePath/thumb/puzzle/',
                'thumbUrl' => '@fileUrl/thumb/puzzle/',
                'thumbs' => [
                    'puzzle' => [
                        'width' => 480,
                        'height' => 320,
                        'main' => true
                    ],
                ],
                'unique' => true,
                'validatorOptions' => [
                    'maxWidth' => 1600,
                    'maxHeight' => 1200
                ]
            ],
        ];
    }