yii2-tinymce ¶

1. 快速开始
2. elfinder
3. 例子

这是 tinymce 在 yii2 的小部件。可以使用 elfinder 上传图片和文件。

欢迎 issues 和 pull

快速开始 ¶

安装

composer require --prefer-dist f2h2h1/yii2-tinymce

在视图里引用

echo \F2h2h1\Yii2Tinymce\TinyMCE::widget([
    'tagId' => 'tinymceid', // 这是 tinymce 标签的 id
]);

elfinder ¶

tinymce 可以使用 elfinder 上传图片和文件。作者在开发时使用的是这个组件 mihaildev/yii2-elfinder 下面的例子里和 elfinder 相关的部分都是使用这个组件的

这是 mihaildev/yii2-elfinder 配置的参考，这段配置是加在 config/main.php 或 config/main-loacl.php 里的

    'controllerMap' => [
        'elfinder' => [
            'class' => \mihaildev\elfinder\Controller::class,
            'roots' => [ // 这里可以填多个 VolumeDriver
                [
                    'baseUrl'=>'@web',
                    'basePath'=>'@webroot', // 上传的 basePath
                    'path' => 'public', // 在上传 basePath 下的路径，就是实际的上传路径
                    'name' => 'public', // 图片/文件根目录名称，可随意。
                    'options' => [ // 这里才是 elfinder 的配置，上面几项都是 mihaildev/yii2-elfinder 的配置
                    ]
                ],
            ],
        ],
    ],

需要在视图里引入 elfinder 的依赖

\mihaildev\elfinder\Assets::register($this);
// 如果需要设置中文或其它语言，需要引入这项
\mihaildev\elfinder\Assets::addLangFile(\Yii::$app->language, $this);

elFinder integrator 来自这个库 nao-pon/tinymceElfinder

例子 ¶

有默认值的 ¶

echo \F2h2h1\Yii2Tinymce\TinyMCE::widget([
    'tagId' => 'tinymceid', // 这是 tinymce 标签的 id
    'defaultValue' => 'qweasd', // 这是默认值
]);

修改 tinymce 的配置 ¶

echo \F2h2h1\Yii2Tinymce\TinyMCE::widget([
    'tagId' => 'tinymceid', // 这是 tinymce 标签的 id
    'options' => [ // 在这里添加 tinymce 的配置
        'plugins' => 'code',
    ],
    'defaultValue' => 'qweasd', // 这是默认值
]);

加上 elfinder ¶

echo \F2h2h1\Yii2Tinymce\TinyMCE::widget([
    'tagId' => 'tinymceid', // 这是 tinymce 标签的 id
    'options' => [ // 在这里添加 tinymce 的配置
        'plugins' => 'image, link, media, imagetools, code',
    ],
    'elfinder' => [ // 在这里添加 elfinder 的配置
        'url' => \yii\helpers\Url::to(['elfinder/connect']),
        'uploadTargetHash' => 'l1_XA',
        'nodeId' => 'elfinder',
        'customData' => [
            \Yii::$app->request->csrfParam => \Yii::$app->request->csrfToken, // 这是 yii2 的 csrf ，如果禁用了 csrf 可以不加这一项
        ],
    ],
    'defaultValue' => 'qweasd', // 这是默认值
]);

给 tinymce 和 elfinder 加上中文 ¶

echo \F2h2h1\Yii2Tinymce\TinyMCE::widget([
    'tagId' => 'tinymceid', // 这是 tinymce 标签的 id
    'options' => [ // 在这里添加 tinymce 的配置
        'plugins' => 'image, link, media, imagetools, code',
        'language_url' => '/js/TinyMCE_zh_CN.js', // 这个路径需要能被页面访问到
        'language' => 'zh_CN',
    ],
    'elfinder' => [ // 在这里添加 elfinder 的配置
        'url' => \yii\helpers\Url::to(['elfinder/connect']),
        'nodeId' => 'elfinder',
        'customData' => [
            \Yii::$app->request->csrfParam => \Yii::$app->request->csrfToken, // 这是 yii2 的 csrf ，如果禁用了 csrf 可以不加这一项
        ],
        'lang' => 'zh_CN',
    ],
    'defaultValue' => 'qweasd', // 这是默认值
]);

这个库并不包含汉化文件， tinymce 的汉化文件可以在这里下载 http://tinymce.ax-z.cn/general/localize-your-language.php

在 form 表单里使用 ¶

<form action="example/form" method="post">
<?= \F2h2h1\Yii2Tinymce\TinyMCE::widget([
    'tagId' => 'tinymceid', // 这是 tinymce 标签的 id
    'tagAttribute' => [ // 这里是标签属性
        'name' => 'tinymcename', // 如果这里为空，则会使用 tagId 作为 name
    ],
    'options' => [ // 在这里添加 tinymce 的配置
        'plugins' => 'image, link, media, imagetools, code',
        'language_url' => '/js/TinyMCE_zh_CN.js', // 这个路径需要能被页面访问到
        'language' => 'zh_CN',
    ],
    'elfinder' => [ // 在这里添加 elfinder 的配置
        'url' => \yii\helpers\Url::to(['elfinder/connect']),
        'nodeId' => 'elfinder',
        'customData' => [
            \Yii::$app->request->csrfParam => \Yii::$app->request->csrfToken, // 这是 yii2 的 csrf ，如果禁用了 csrf 可以不加这一项
        ],
        'lang' => 'zh_CN',
    ],
    'defaultValue' => 'qweasd', // 这是默认值
]); ?>
</form>
// 在后台里这样接收数据 $_POST['tinymcename']

多个实例 ¶

$tinymce1 = \F2h2h1\Yii2Tinymce\TinyMCE::widget([
    'tagId' => 'tinymceid1', // 这是 tinymce 标签的 id
    'options' => [ // 在这里添加 tinymce 的配置
        'plugins' => 'image, link, media, imagetools, code',
        'language_url' => '/js/TinyMCE_zh_CN.js', // 这个路径需要能被页面访问到
        'language' => 'zh_CN',
    ],
    'elfinder' => [ // 在这里添加 elfinder 的配置
        'url' => \yii\helpers\Url::to(['elfinder/connect']),
        'nodeId' => 'elfinder',
        'customData' => [
            \Yii::$app->request->csrfParam => \Yii::$app->request->csrfToken, // 这是 yii2 的 csrf ，如果禁用了 csrf 可以不加这一项
        ],
        'lang' => 'zh_CN',
    ],
    'defaultValue' => 'qweasd', // 这是默认值
]);

$tinymce2 = \F2h2h1\Yii2Tinymce\TinyMCE::widget([
    'tagId' => 'tinymceid2', // 这是 tinymce 标签的 id
    'options' => [ // 在这里添加 tinymce 的配置
        'plugins' => 'image, link, media, imagetools, code',
        'language_url' => '/js/TinyMCE_zh_CN.js', // 这个路径需要能被页面访问到
        'language' => 'zh_CN',
    ],
    'elfinder' => [ // 在这里添加 elfinder 的配置
        'url' => \yii\helpers\Url::to(['elfinder/connect']),
        'nodeId' => 'elfinder',
        'customData' => [
            \Yii::$app->request->csrfParam => \Yii::$app->request->csrfToken, // 这是 yii2 的 csrf ，如果禁用了 csrf 可以不加这一项
        ],
        'lang' => 'zh_CN',
    ],
    'defaultValue' => 'qweasd', // 这是默认值
]);
echo $tinymce1;
echo $tinymce2;

在 ActiveForm 中使用 ¶

<?php $form = ActiveForm::begin(['options'=>['class'=>'form-horizontal']]); ?>
<?= $form->field($model, 'content')->widget(\F2h2h1\Yii2Tinymce\TinyMCE::class, [
        'options' => [
            'language_url' => '/js/TinyMCE_zh_CN.js',
            'language' => 'zh_CN',
        ],
        'elfinder' => [
            'url' => \yii\helpers\Url::to(['elfinder/connect']),
            'nodeId' => 'elfinder',
            'customData' => [
                \Yii::$app->request->csrfParam => \Yii::$app->request->csrfToken,
            ],
            'lang' => 'zh_CN',
        ],
]); ?>
<?php ActiveForm::end(); ?>