Yii2使用UEditor和MarkDown Editor

MarkDown Editor

1.安装,在项目根目录执行

1
composer require ijackua/yii2-lepture-markdown-editor-widget:dev-master

2.在_form.php中集成

1
2
3
4
5
6
7
8
9
10
use ijackua\lepture\Markdowneditor;
use ijackua\lepture\MarkdowneditorAssets;


<?php $form = ActiveForm::begin(); ?>
<?= Markdowneditor::widget(['model' => $model, 'attribute' => 'description']) ?>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? '新建' : '更新', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>

3.在views中解析及显示

1
2
3
4
5
6
7
8
9
10
11
12
13
use yii\widgets\DetailView;
use yii\helpers\Markdown;

<?= DetailView::widget([
'model' => $model,
'attributes' => [
[
'attribute' => 'description',
'format' => 'raw',
'value' => Markdown::process($model->description, 'gfm'),
],
],
]) ?>

UEditor

1.安装与配置

  • 官网下载UEditor
  • 解压并复制到app/web/public/ueditor目录下
  • 修改ueditor/php/config.json中的imagePathFormat/videoPathFormat等上传目录

2.在_form.php中集成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//引入百度编辑器,注册自定义js
//$this->registerJsFile('@web/public/ueditor/ueditor.config.js');
//$this->registerJsFile('@web/public/ueditor/ueditor.all.min.js');
//$this->registerJsFile('@web/public/ueditor/lang/zh-cn/zh-cn.js');

<style>
.inline .radio,.inline .checkbox{display: inline-block;margin: 0 5px;}
#editor{margin-top: 20px;padding:0;margin:20px 0;width:100%;height:auto;border: none;}
</style>


<script>
$(function(){
var ue = UE.getEditor('editor');
});
</script>



<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'description')->textarea(['rows'=>6,'id'=>'editor','class'=>'col-sm-1 col-md-12']) ?>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? '新建' : '更新', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>

3.在views中解析及显示

1
2
3
4
5
6
7
8
9
10
11
12
13
use yii\widgets\DetailView;
use yii\helpers\Markdown;

<?= DetailView::widget([
'model' => $model,
'attributes' => [
[
'attribute' => 'description',
'format' => 'raw',
'value' => $model->description,
],
],
]) ?>
八宝粥 wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!