pjkui/yii2-tinymce

yii2 的 tinymce 集成

维护者

详细信息

github.com/pjkui/yii2-tinymce

源代码

安装: 10

依赖者: 0

建议者: 0

安全: 0

星星: 0

关注者: 0

分支: 2

语言:JavaScript

类型:yii2-extension

1.0.0 2022-05-05 03:43 UTC

Requires

Suggests

MIT 01f650e11f6c2eece0a9ccda4816a21b11513426

  • quinn pan <pjkui.woop@qq.com>

tinymcewidgetyii2yii2 widget

This package is auto-updated.

Last update: 2024-09-15 21:37:59 UTC

README

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

欢迎提交 issues 和 pull request

快速开始

安装

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(); ?>