README

主要特性

支持“标准”Markdown / CommonMark和Github风格的语法，也可变身为代码编辑器；
支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
支持ToC（Table of Contents）、Emoji表情、Task lists、@链接等Markdown扩展语法；
支持TeX科学公式（基于KaTeX）、流程图 Flowchart 和时序图 Sequence Diagram;
支持识别和解析HTML标签，并且支持自定义过滤标签解析，具有可靠的安全性和几乎无限的扩展性；
支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
兼容主流的浏览器（IE8+）和Zepto.js，且支持iPad等平板设备；
支持自定义主题样式；

安装:

使用 composer 下载:

# 2.2.x(yii >= 2.0.24):
composer require moxuandi/yii2-editormd:"~2.2.0"

# 开发版:
composer require moxuandi/yii2-editormd:"dev-master"

使用:

在View中添加:

1. 简单调用:
$form->field($model, 'content')->widget('moxuandi\editormd\Editormd');

2. 带参数调用:
$form->field($model, 'content')->widget('moxuandi\editormd\Editormd', [
    'editorOptions' => [
        'width' => '100%',
        'height' => 640,
        'imageUpload' => true,  // 启用图片上传
        'watch' => false,  // 关闭实时预览
    ],
]);

3. 不带 $model 调用:
\moxuandi\editormd\Editormd::widget([
    'name' => 'content',
    'value' => '初始值',
    'editorOptions' => [
        'width' => '100%',
        'height' => 640,
    ]
]);

4. 注册js函数和对象:
$form->field($model, 'content')->widget('moxuandi\editormd\Editormd', [
    'editorOptions' => [
        'width' => '100%',
        'height' => 640,
        'toolbarIcons' => new \yii\web\JsExpression('function() {
   return ["save", "undo", "redo", "bold", "italic", "del", "quote", "hr", "image", "link", "list-ul", "list-ol", "code", "code-block", "table"]
}'),
        'toolbarCustomIcons' => new \yii\web\JsExpression('{
    save: "<a><i class=\"fa fa-save\" onclick=\"javascript:save();\"></i></a>"
}'),
    ],
]);

在Controller中添加(如果不需要图片上传功能, 可以不添加):

public function actions()
{
    return [
        'EditormdUpload' => [
            'class' => 'moxuandi\editormd\UploaderAction',
            'config' => [
                'imageAllowFiles' => ['.jpg', '.jpeg', '.gif', '.png', '.bmp', '.webp'],  // 允许上传的文件类型
                'imagePathFormat' => '/uploads/image/{yyyy}{mm}{dd}/{hh}{ii}{ss}_{rand:6}',  // 文件保存路径
                'modelClass' => 'common\model\Upload',  // 文件信息是否保存入库
                'process' => [  // 二维数组, 将按照子数组的顺序对图片进行处理
                    'match' => ['image', 'process'],  // 图片处理后保存路径的替换规则, 必须是两个元素的数组
                    'thumb' => [  // 缩略图配置
                        'width' => 300,  // 缩略图宽度
                        'height' => 200,  // 缩略图高度
                        'mode' => 'outbound',  // 生成缩略图的模式, 可用值: 'inset'(补白), 'outbound'(裁剪, 默认值)
                    ],
                    'crop' => [  // 裁剪图配置
                        'width' => 300,  // 裁剪图的宽度
                        'height' => 200,  // 裁剪图的高度
                        'top' => 200,  // 裁剪图顶部的偏移, y轴起点, 默认为`0`
                        'left' => 200,  // 裁剪图左侧的偏移, x轴起点, 默认为`0`
                    ],
                    'frame' => [  // 添加边框的配置
                        'margin' => 20,  // 边框的宽度, 默认为`20`
                        'color' => '666',  // 边框的颜色, 十六进制颜色编码, 可以不带`#`, 默认为`666`
                        'alpha' => 100,  // 边框的透明度, 可能仅`png`图片生效, 默认为`100`
                    ],
                    'watermark' => [  // 添加图片水印的配置
                        'watermarkImage' => '/uploads/watermark.png',  // 水印图片的绝对路径
                        'top' => 100,  // 水印图片的顶部距离原图顶部的偏移, y轴起点, 默认为`0`
                        'left' => 200,  // 水印图片的左侧距离原图左侧的偏移, x轴起点, 默认为`0`
                    ],
                    'text' => [  // 添加文字水印的配置
                        'text' => 'TONGMENGCMS',  // 水印文字的内容
                        'fontFile' => '@yii/captcha/SpicyRice.ttf',  // 字体文件, 可以是绝对路径或别名
                        'top' => 100,  // 水印文字距离原图顶部的偏移, y轴起点, 默认为`0`
                        'left' => 200,  // 水印文字距离原图左侧的偏移, x轴起点, 默认为`0`
                        'fontOptions' => [  // 字体属性
                            'size' => 12,  // 字体的大小, 单位像素(`px`), 默认为`12`
                            'color' => 'fff',  // 字体的颜色, 十六进制颜色编码, 可以不带`#`, 默认为`fff`
                            'angle' => 0,  // 写入文本的角度, 默认为`0`
                        ],
                    ],
                    'resize' => [  // 调整图片大小的配置
                        'width' => 300,  // 图片调整后的宽度
                        'height' => 200,  // 图片调整后的高度
                        'keepAspectRatio' => true,  // 是否保持图片纵横比, 默认为`true`
                        'allowUpscaling' => false,  // 如果原图很小, 图片是否放大, 默认为`false`
                    ],
                ],

                // 如果`uploads`目录与当前应用的入口文件不在同一个目录, 必须做如下配置:
                'rootPath' => dirname(dirname(Yii::$app->request->scriptFile)),
                'rootUrl' => 'http://image.advanced.ccc',
            ],
        ],
    ];
}

编辑器相关配置，请在视图view中配置，参数为editorOptions，比如定制菜单，编辑器大小等等，可用配置项如下:

moxuandi / yii2-editormd

Maintainers

Details

README

主要特性

安装:

使用: