coderlex/yii2-markitup

MarkItUp widget for Yii2

yii2-markitup

MarkItUp (http://markitup.jaysalvat.com) widget for Yii2, _(*1)

Install via composer

Run in your console:, _(*2)

php composer.phar global require "fxp/composer-asset-plugin:1.0.0"
php composer.phar require "coderlex/yii2-markitup" "*"

Basic usage

$form = \yii\widgets\ActiveForm::begin();
print $form->field($model, 'content')->widget(\coderlex\markitup\MarkItUp::className(), [
    // Textarea options (default):
    'options' => ['class' => 'form-control', 'style' => 'overflow:auto;resize:none;'],
    // Skin (default):
    'skin' => 'simple',
    // JS widget initialization options:
    'clientOptions' => [
        'markupSet' => [    
            [
                'name' => 'Bold',
                'key' => 'B',
                'className' => 'markitup-bold',
                'openWith' => '[b]',
                'closeWith' => '[/b]'
            ],
            // ...
            ['separator' => '---------------'],
            [
                'name' => 'Numeric List',
                'className' => 'markitup-nlist',
                'openWith' => '[*]',
                'multiline' => true,
                'openBlockWith' => "[list=1]\n",
                'closeBlockWith' => "\n[/list]"
            ],
            // ...
            ['separator' => '---------------'],
            [
                'name' => 'Link',
                'key' => 'L',
                'className' => 'markitup-link',
                'replaceWith' => '[url=[![Link:!:http://]!]](!( title="[![Title]!]")!)[/url]',
                'placeHolder' => 'Your text to link...'
            ],
            // ...
        ]
    ],
]);
\yii\widgets\ActiveForm::end();

Styling:, _(*3)

$markitup-btn-height: 24px;
$markitup-btn-width: 24px;

html {
    .markItUpHeader ul a {
        height: $markitup-btn-height;
        width: $markitup-btn-width;
        text-align: center;
        line-height: $markitup-btn-width;
    }
    .markItUpHeader ul .markItUpSeparator {
        height: $markitup-btn-height;
    }
    .markItUpEditor {
        width: 100%;
    }
    .markItUp {
        width: auto;
    }
}
%markitup-button {
    @include fa-icon();
    font-size: 14px;
    display: block;
    text-indent: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: $markitup-btn-width;
    height: $markitup-btn-height;
    line-height: $markitup-btn-height;
}
.markitup-bold a:before {
    @extend %markitup-button;
    content: $fa-var-bold;
}
.markitup-italic a:before {
    @extend %markitup-button;
    content: $fa-var-italic;
}
.markitup-underline a:before {
    @extend %markitup-button;
    content: $fa-var-underline;
}
.markitup-strike a:before {
    @extend %markitup-button;
    content: $fa-var-strikethrough;
}
.markitup-blist a:before {
    @extend %markitup-button;
    content: $fa-var-list-ul;
}
.markitup-nlist a:before {
    @extend %markitup-button;
    content: $fa-var-list-ol;
}
.markitup-image a:before {
    @extend %markitup-button;
    content: $fa-var-picture-o;
}
.markitup-link a:before {
    @extend %markitup-button;
    content: $fa-var-link;
}
.markitup-preview a:before {
    @extend %markitup-button;
    content: $fa-var-eye;
}