README

Yii2 扩展，简化应用程序中 TinyMCE WYSIWYG 编辑器的使用。

提供

小部件；
压缩器操作；
与 elFinder 等文件管理器的集成；
与 Yandex 等拼写服务的集成。
由于始终需要最新版本，TinyMCE 已迁移到 npm 包；
添加了与出色的 elFinder 扩展的集成；
(待办事项) 一次性插入多个图片的图标；
解决了几个错误。现在一切正常。

另一个扩展的分支，具有一些额外功能

CodeMirror 插件集成用于源代码模式。

CodeMirror 插件来自 Christiaan Baartse 的存储库

安装

安装此扩展的最佳方式是通过 composer。

运行以下命令：

php composer.phar require --prefer-dist wolfguard/yii2-tinymce-codemirror "*"

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

"wolfguard/yii2-tinymce-codemirror": "*"

使用

Widget 基本用法

脚本压缩器

$form->field($model, 'content')->widget(\wolfguard\tinymce\TinyMce::className())

此功能可用于优化小部件加载时间。

首先设置控制器映射

然后添加配置操作的路径到小部件选项

'controllerMap' => [
    'tinyMce' => [
        'class' => 'wolfguard\tinymce\TinyMceController',
    ]
],

ElFinder 文件管理器

$form->field($model, 'content')->widget(\wolfguard\tinymce\TinyMce::className(), [
    'compressorRoute' => 'tinyMce/tinyMceCompressor'
])

安装 mihaildev/yii2-elfinder 扩展。您只需包含

配置 elFinder（更多信息这里）。

"mihaildev/yii2-elfinder": "*"

使用

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

'controllerMap' => [
    'elfinder' => [
        'class' => 'mihaildev\elfinder\Controller',
        'access' => ['@'],
        'disabledCommands' => ['netmount'],
        'roots' => [
            [
                'baseUrl'=>'@web',
                'basePath'=>'@webroot',
                'path' => 'files/global',
                'name' => 'Global'
            ],
        ],
        'watermark' => [
                'source'         => __DIR__.'/logo.png',
                 'marginRight'    => 5,
                 'marginBottom'   => 5,
                 'quality'        => 95,
                 'transparency'   => 70,
                 'targetType'     => IMG_GIF|IMG_JPG|IMG_PNG|IMG_WBMP,
                 'targetMinPixel' => 200
        ]
    ]
],

您可以根据需要自定义一些窗口（宽度和高

$form->field($model, 'content')->widget(\wolfguard\tinymce\TinyMce::className(), [
    'fileManager' => [
        'class' => \wolfguard\tinymce\fm\MihaildevElFinder::className()
    ],
])

度和高度）和管理器（语言、过滤器、路径和多个）属性。如果您想使用不同的访问、水印和根设置，只需准备控制器

'controllerMap' => [
    'elf1' => [
        'class' => 'mihaildev\elfinder\Controller',
        'access' => ['@'],
        'roots' => [
            [
                'baseUrl'=>'@web',
                'basePath'=>'@webroot',
                'path' => 'files/global',
                'name' => 'Global'
            ],
        ],
        'watermark' => [
                'source'         => __DIR__.'/logo.png',
                 'marginRight'    => 5,
                 'marginBottom'   => 5,
                 'quality'        => 95,
                 'transparency'   => 70,
                 'targetType'     => IMG_GIF|IMG_JPG|IMG_PNG|IMG_WBMP,
                 'targetMinPixel' => 200
        ]
    ],
    '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']
            ]
        ]
    ]
],

然后在小部件中指向所需的控制器

$form->field($model, 'content2')->widget(\wolfguard\tinymce\TinyMce::className(), [
    'fileManager' => [
        'class' => \wolfguard\tinymce\fm\MihaildevElFinder::className(),
        'controller' => 'elf2'
    ]
])

任何文件管理器

您可以编写自己的文件管理器提供者。只需从 \wolfguard\tinymce\fm\FileManager 类继承，并实现 getFileBrowserCallback 和 registerAsset 函数。

拼写检查器

TinyMCE 内置拼写检查插件，但需要后端才能工作。

您可以使用 Yandex 拼写检查服务。

$form->field($model, 'content')->widget(\wolfguard\tinymce\TinyMce::className(), [
    'spellcheckerUrl' => 'http://speller.yandex.net/services/tinyspell'
])

更多信息请参阅此处

或者您可以使用 moxicode 提供的代码构建自己的拼写检查服务：http://www.tinymce.com/download/download.php

综合功能

<?= $form->field($model, 'content')->widget(\wolfguard\tinymce\TinyMce::className(), [
    'compressorRoute' => 'site/tinyMceCompressor',
    'fileManager' => [
        'class' => \wolfguard\tinymce\fm\MihaildevElFinder::className()
    ],
    'spellcheckerUrl'=>'http://speller.yandex.net/services/tinyspell',
    'options' => ['rows' => 6]
]) ?>

CodeMirror 配置

附加配置选项

您可以通过向 TinyMCE 配置中添加一个 codemirror 对象来修改 codemirror 插件的行

indentOnInit: boolean (false) CodeMirror 自动缩进代码。使用 indentOnInit 选项，您告诉源代码编辑器在打开编辑器时缩进所有代码。对于大文档，这可能会很慢。

path: string (codemirror) 您可能已经在 TinyMCE 外部（外部）托管了 CodeMirror。在这种情况下，您可以重用该 CodeMirror 实例，通过覆盖默认路径。例如

path: 'http://www.mysite.com/tools/codemirror-4.8'

config：CodeMirror配置对象，传递给CodeMirror实例。请查看http://codemirror.net/doc/manual.html了解可用的配置选项。

jsFiles：数组您想要（额外）加载的CodeMirror JavaScript文件数组。例如

jsFiles: [
   'mode/clike/clike.js',
   'mode/php/php.js'
]

以下JavaScript文件始终被加载：lib/codemirror.js, addon/edit/matchbrackets.js, mode/xml/xml.js, mode/javascript/javascript.js, mode/css/css.js, mode/htmlmixed/htmlmixed.js, addon/dialog/dialog.js, addon/search/searchcursor.js, addon/search/search.js, addon/selection/active-line.js。

cssFiles：数组您想要（额外）加载的CodeMirror CSS文件数组。例如

cssFiles: [
   'theme/neat.css',
   'theme/elegant.css'
]

以下CSS文件始终被加载：lib/codemirror.css, addon/dialog/dialog.css。

配置示例

tinymce.init({
  selector: '#html',
  plugins: 'codemirror',
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code',
  codemirror: {
    indentOnInit: true, // Whether or not to indent code on init.
    path: 'CodeMirror', // Path to CodeMirror distribution
    config: {           // CodeMirror config object
       mode: 'application/x-httpd-php',
       lineNumbers: false
    },
    jsFiles: [          // Additional JS files to load
       'mode/clike/clike.js',
       'mode/php/php.js'
    ]
  }
});

wolfguard / yii2-tinymce-codemirror

维护者

详细信息