dominus77/yii2-tinymce-widget

为 Yii2 使用的 TinyMCE 小部件。

维护者

详细信息

github.com/Dominus77/yii2-tinymce-widget

源代码

问题

资助包维护！
Patreon

安装次数: 6,647

依赖项: 1

建议者: 0

安全性: 0

星标: 8

关注者: 3

分支: 0

开放问题: 0

类型:yii2-extension

v2.1.3 2020-04-14 15:59 UTC

Requires

Requires (Dev)

MIT 5395fe365d094795b3baa7b6099034e9f3867ff7

  • Alexey Schevchenko <ivanovosity.woop@gmail.com>

tinymceextensionwidgetyii2Dominus77

This package is auto-updated.

Last update: 2024-09-11 23:03:37 UTC

README

Latest Stable Version License Total Downloads

渲染一个支持 TinyMCE WYSIWYG 文本编辑器 小部件，并支持 ElFinder 扩展程序 for Yii 2

补充

一个插件 TinyMCE-FontAwesome-Plugin，允许您通过 TinyMCE 插入 FontAwesome 图标。

一个插件 Typografy，允许在 TinyMCE 中实现 JavaScript 打字机。

安装

安装此扩展的首选方式是通过 composer。

运行以下命令：

composer require dominus77/yii2-tinymce-widget

或者

"dominus77/yii2-tinymce-widget": "^2.1"

将以下内容添加到您的 composer.json 文件的 require 部分。

使用方法

扩展安装完成后，只需在代码中通过以下方式使用它：

<?= $form->field($model, 'text')->widget(\dominus77\tinymce\TinyMce::class, [    
    'options' => [
        'rows' => 6,
        'placeholder' => true,
    ], 
    'language' => 'ru',
    'clientOptions' => [
        'menubar' => true,
        'statusbar' => true,        
        'theme' => 'modern',
        'skin' => 'lightgray-gradient', //charcoal, tundora, lightgray-gradient, lightgray
        'plugins' => [
            'typograf advlist autolink lists link image charmap print preview hr anchor pagebreak placeholder',
            'searchreplace wordcount visualblocks visualchars code fullscreen',
            'insertdatetime media nonbreaking save table contextmenu directionality',
            'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc noneditable',
        ],
        'contextmenu' => 'typograf | link image inserttable | cell row column deletetable',
        'noneditable_noneditable_class' => 'fa',
        'extended_valid_elements' => 'span[class|style]',
        'toolbar1' => 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        'toolbar2' => 'print preview media | forecolor backcolor emoticons | codesample | typograf',
        'image_advtab' => true,
        'templates' => [
            [
                'title' => 'Test template 1',
                'content' => 'Test 1',
            ],
            [
                'title' => 'Test template 2',
                'content' => 'Test 2',
            ]
        ],
        'content_css' => [
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '//www.tinymce.com/css/codepen.min.css',            
        ]
    ]
]) ?>

插件 Typograf

有助于自动填充难以辨认的空格、纠正轻微的错误、将引号转换为正确的形式、在正确的位置用连字符替换破折号等。

<?= $form->field($model, 'text')->widget(\dominus77\tinymce\TinyMce::class, [
    //...
    'clientOptions' => [
        // on plugin
        'plugins' => [
            'typograf',
            //...
        ],
        // adding a button to a toolbar
        'toolbar1' => 'typograf',
        // adding a item to a context menu
        'contextmenu' => 'typograf | link image inserttable | cell row column deletetable',
        // advanced plugin settings        
        'typograf' => [
            'locale' => ['ru', 'en-US'],
            // HTML entities
            'htmlEntity' => [
                //'type' => 'name',
                //'onlyInvisible' => true
            ],
            // Enabling Rules
            'enableRule' => [
                //'ru/money/ruble',
                //'ru/money/*',
                //'ru/symbols/NN',
                //'ru/optalign/*'
            ],
            // Disabling Rules
            'disableRule' => [
                //'ru/money/ruble',
                //'ru/money/*',
                //'ru/symbols/NN'
            ],
            // Change settings for rules
            // Rule name, setting name, value
            'setSetting' => [
                // Continuous space before the last word in a sentence, not more than 5 characters
                ['common/nbsp/beforeShortLastWord', 'lengthLastWord', 5],
                // Nested quotes are also "Christmas trees" for Russian typography
                ['common/punctuation/quote', 'ru', ['left' => '«', 'right' => '»', 'removeDuplicateQuotes' => true]],
                // Non-breaking space after a short word, no more than 3 characters
                ['common/nbsp/afterShortWord', 'lengthShortWord', 5]
            ],
            // Add a simple rule
            // Typographic Smiley
            'addRule' => [
                [
                    'name' => 'common/other/typographicSmiley',
                    'handler' => new yii\web\JsExpression("
                        function (text) {                                            
                            return text.replace(/:-\)/g, ':—)');
                        }
                    ")
                ]
            ],
            // Turn off typography in sections of text
            'addSafeTag' => [
                // Disable typography inside the <no-typography> tag
                ['<no-typography>', '</no-typography>'],
                // Disable typing inside control structures of some template engine.
                ['\\{\\{', '\\}\\}'], // {{...}}
                ['\\[\\[', '\\]\\]'], // [[...]]
                // Disable typography inside PHP code
                ['<\\?php', '\\?>']
            ]
        ],
        //...
    ]
]) ?>

有关更多信息，请参阅 JavaScript 打字机

插件 fontawesome

此插件支持 FontAwesome 版本 4.7。由于可能与新版本发生冲突，因此已删除依赖项。但插件本身的支持仍然存在。要启用它，您需要安装 FontAwesome 版本 4.7

composer require fortawesome/font-awesome "^4.7"

或者

"fortawesome/font-awesome": "^4.7"

连接可能看起来像这样

use dominus77\tinymce\assets\FontAwesomeAsset;

$fontAwesome = FontAwesomeAsset::register($this);
//...
'clientOptions' => [
    //...
    'plugins' => [            
        "fontawesome", // add plugin
        // other plugins
    ],        
    'toolbar' => "fontawesome", // add button
    //...
    'content_css' => [
        // other css
        $fontAwesome->baseUrl . '/' . $fontAwesome->css[0], // Adding icons to the content area
    ]
]

ElFinder 文件管理器

安装 mihaildev/yii2-elfinder 扩展。

运行以下命令：

composer require --prefer-dist mihaildev/yii2-elfinder "^1.3"

或者

"mihaildev/yii2-elfinder": "^1.3"

配置 elFinder（更多信息 这里）

'controllerMap' => [
    'elfinder' => [
        'class' => 'mihaildev\elfinder\Controller',
        'access' => ['@'], //Global file manager access @ - for authorized , ? - for guests , to open to all ['@', '?']
        'disabledCommands' => ['netmount'], //disabling unnecessary commands https://github.com/Studio-42/elFinder/wiki/Client-configuration-options#commands
        'roots' => [
            [
                'baseUrl'=>'@web',
                'basePath'=>'@webroot',
                'path' => 'files/global',
                'name' => 'Global'
            ],
            [
                'class' => 'mihaildev\elfinder\volume\UserPath',
                'path'  => 'files/user_{id}',
                'name'  => 'My Documents'
            ],
            [
                'path' => 'files/some',
                'name' => ['category' => 'my','message' => 'Some Name'] //перевод Yii::t($category, $message)
            ],
            [
                'path'   => 'files/some',
                'name'   => ['category' => 'my','message' => 'Some Name'], // Yii::t($category, $message)
                'access' => ['read' => '*', 'write' => 'UserFilesAccess']  // * - for all, otherwise the access check in this example can be seen by all users with rights only UserFilesAccess
            ]
        ],
        'watermark' => [
             'source'         => __DIR__.'/logo.png', // Path to Water mark image
             'marginRight'    => 5,          // Margin right pixel
             'marginBottom'   => 5,          // Margin bottom pixel
             'quality'        => 95,         // JPEG image save quality
             'transparency'   => 70,         // Water mark image transparency ( other than PNG )
             'targetType'     => IMG_GIF|IMG_JPG|IMG_PNG|IMG_WBMP, // Target image formats ( bit-field )
             'targetMinPixel' => 200         // Target image minimum pixel size
        ]
    ]
]

然后在小部件中选择文件管理器提供者

$form->field($model, 'text')->widget(\dominus77\tinymce\TinyMce::class, [    
    'clientOptions' => [
        //...
        /** @see https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_types */
        //'file_picker_types' => 'file image media',        
    ],
    'fileManager' => [
        'class' => \dominus77\tinymce\components\MihaildevElFinder::class,
    ],    
    //...
])

您可以自定义一些窗口（宽度和高度）和管理员（语言、过滤器、路径和多个）属性。如果您想使用不同的访问、水印和根设置，只需准备控制器

'controllerMap' => [
    'elf1' => [
        'class' => 'mihaildev\elfinder\Controller',
        'access' => ['@'],
        'roots' => [
            [
                'baseUrl'=>'@web',
                'basePath'=>'@webroot',
                'path' => 'files/global',
                'name' => 'Global'
            ],
        ],
        'watermark' => [
            'source'         => __DIR__.'/logo.png', // Path to Water mark image
            'marginRight'    => 5,          // Margin right pixel
            'marginBottom'   => 5,          // Margin bottom pixel
            'quality'        => 95,         // JPEG image save quality
            'transparency'   => 70,         // Water mark image transparency ( other than PNG )
            'targetType'     => IMG_GIF|IMG_JPG|IMG_PNG|IMG_WBMP, // Target image formats ( bit-field )
            'targetMinPixel' => 200         // Target image minimum pixel size            
        ],
    ],
    'elf2' => [
        'class' => 'mihaildev\elfinder\Controller',
        'access' => ['*'],
        'roots' => [
            [                
                'path' => 'files/some1',
                'name' => ['category' => 'my','message' => 'Some Name']
            ],
            [                
                'path' => 'files/some2',
                'name' => ['category' => 'my','message' => 'Some Name'],
                'access' => ['read' => '*', 'write' => 'UserFilesAccess']
            ],
        ],
    ],
]

模块中的连接

namespace modules\example;

class Module extends \yii\base\Module
{
    //...
    public function init()
    {
        parent::init();
        $this->controllerMap = [
            'elfinder' => [
                'class' => 'mihaildev\elfinder\Controller',
                'access' => ['@'],
                'disabledCommands' => ['netmount'],
                'roots' => [
                    [
                        'baseUrl'=>'@web',
                        'basePath'=>'@webroot',
                        'path' => 'files/global',
                        'name' => 'Global'
                    ],
                ],
                'watermark' => [
                    'source'         => __DIR__.'/logo.png', // Path to Water mark image
                    'marginRight'    => 5,          // Margin right pixel
                    'marginBottom'   => 5,          // Margin bottom pixel
                    'quality'        => 95,         // JPEG image save quality
                    'transparency'   => 70,         // Water mark image transparency ( other than PNG )
                    'targetType'     => IMG_GIF|IMG_JPG|IMG_PNG|IMG_WBMP, // Target image formats ( bit-field )
                    'targetMinPixel' => 200         // Target image minimum pixel size            
                ],
            ]
        ];
    }
    //...
}

模块视图中的

$form->field($model, 'text')->widget(\dominus77\tinymce\TinyMce::class, [    
    'clientOptions' => [
        //...
        /** @see https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_types */
        //'file_picker_types' => 'file image media',
    ],
    'fileManager' => [
        'class' => \dominus77\tinymce\components\MihaildevElFinder::class,
        'controller' => 'elfinder',        
        'title' => 'My File Manager',
        'width' => 900,
        'height' => 600,
        'resizable' => 'yes',
    ],    
    //...
]);

更多信息

请检查 TinyMCE 网站 和 ElFinder 扩展 文档以获取有关其配置选项的更多信息。

许可证

MIT 许可证（MIT）。有关更多信息，请参阅 许可证文件。