coderlex / yii2-markitup
MarkItUp widget for Yii2
Installs: 361
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Type:yii2-extension
Requires
- php: >=5.4.0
- bower-asset/markitup: *
- yiisoft/yii2: *
This package is not auto-updated.
Last update: 2024-12-13 10:53:26 UTC
README
MarkItUp (http://markitup.jaysalvat.com) widget for Yii2
Install via composer
Run in your console:
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:
$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; }