efureev/yii2-bootstrap-markdown-editor

Yii2 Markdown Editor based on Bootstrap Markdown.

0.0.6 2016-02-01 00:01 UTC

Requires

• bower-asset/autosize: *
• bower-asset/bootstrap-markdown: *
• bower-asset/marked: *
• bower-asset/to-markdown: *
• uran1980/yii2-code-prettify: *
• yiisoft/yii2: ~2

MIT

• Ivan Yakovlev
• Eugene Fureev

• markdown
• editor
• widgets
• yii2
• gfm
• bootstrap markdown
• yii2-bootstrap-markdown-editor

README

Yii2 Markdown Editor based on Bootstrap Markdown.

This component use folowing libraries:

• Marked -- a full-featured markdown parser and compiler, written in JavaScript.
• To markdown -- an HTML to Markdown converter written in javascript.
• Bootstrap Markdown -- JSimple Markdown editing tools that works!

Installation

Composer

The preferred way to install this extension is through Composer.

Either run

php composer.phar require efureev/yii2-bootstrap-markdown-editor "dev-master"

or add

"efureev/yii2-bootstrap-markdown-editor": "dev-master"

to the require section of your composer.json

Usage

Active widget

In view in active form:

<?php

use yii\widgets\ActiveForm;
use efureev\markdown\MarkdownEditor;
?>

<div class="active-form">
    <?php $form = ActiveForm::begin(); ?>
    <?php echo $form->field($model, 'content')->widget(MarkdownEditor::className(), [
        'clientOptions' => [
            'language' => Yii::$app->language,
            'additionalButtons' => [
                'drink' => [
                    'cmdBeer' => [
                        'title' => 'Beer',
                        'toggle' => false,
                        'icon' => 'glyphicon glyphicon-glass',
                        'callback' => 'function(e){alert("sdasda");}'
                    ],
                    'cmdBeer2' => [
                        'title' => 'Beer2',
                        'toggle' => true,
                        'icon' => 'glyphicon glyphicon-glass',
                        'callback' => 'function(e){
                            // Replace selection with some drinks
                            var chunk, cursor,
                                selected = e.getSelection(), content = e.getContent(),
                                drinks = ["Heinekken", "Budweiser",
                                        "Iron City", "Amstel Light",
                                        "Red Stripe", "Smithwicks",
                                        "Westvleteren", "Sierra Nevada",
                                        "Guinness", "Corona", "Calsberg"],
                                index = Math.floor((Math.random()*10)+1)
            
            
                              // Give random drink
                              chunk = drinks[index]
                
                              // transform selection and set the cursor into chunked text
                              e.replaceSelection(chunk)
                              cursor = selected.start
                
                              // Set the cursor
                              e.setSelection(cursor,cursor+chunk.length)
                            }'
                        ]
                    ]
                ]
        ],
        'options'       => ['data-provider' => 'markdown'],
        
    ]); ?>
    <?php ActiveForm::end(); ?>
</div>

Simple widget

In view:

<?php
use efureev\markdown\MarkdownEditor;

echo MarkdownEditor::widget([
    'name'          => 'md-editor',
    'value'         => '# test message',
    'clientOptions' => ['language' => Yii::$app->language],
    'options'       => ['data-provider' => 'markdown'],
]);

Changelog

v0.0.6

• add icons

v0.0.5

• add additionalButtons

See also

• Markdown reminder
• Markdown cheatsheet
• GFM (Github Flawored Markdown)

Author

Ivan Yakovlev, e-mail: [e-mail] Eugene Fureev, e-mail: [e-mail]