richeditor - 渲染一个富文本可视化编辑器，也称为所见即所得编辑器。
html_content:
type: richeditor
label: Contents以下 字段属性 受支持且常用。
| Property | Description | |
|---|---|---|
| label | a name when displaying the form field to the user. | |
| default | specifies a default string value, optional. | |
| comment | places a descriptive comment below the field. | |
| toolbarButtons | buttons to show on the editor toolbar. Example: `bold | italic` |
| size | specifies a field size for fields that use it, for example, the textarea field. Options: tiny, small, large, huge, giant. | |
| showMargins | set to true to include resizable document margins. Default: false. | |
| useLineBreaks | uses line breaks instead of paragraph wrappers for each new line. Default false. | |
| editorOptions | custom editor options used by the editor control as an array (advanced). |
你可以使用 size 属性指定字段大小应为多少。
html_content:
type: richeditor
label: Contents
size: huge使用 toolbarButtons 属性来指定自定义按钮。
html_content:
type: richeditor
label: Contents
toolbarButtons: bold|italic|underline双管道符 || 字符可用于为按钮添加分隔符。
toolbarButtons: bold|italic|underline||insertPageLink||undo|redo||clearFormatting可用的工具栏按钮有：
字符
|将在工具栏中插入一条垂直分隔线。
下面的 JavaScript 代码可用于将自定义按钮注册为命令。
oc.richEditorRegisterButton('insertCustomThing', {
title: 'Insert Something',
icon: '<i class="icon-star"></i>',
undo: true,
focus: true,
refreshOnCallback: true,
callback: function () {
this.html.insert('<strong>My Custom Thing!</strong>');
}
});然后将按钮添加到默认集合。
oc.richEditorButtons.splice(0, 0, 'insertCustomThing');注册 JavaScript 时，它应该在富文本编辑器注册的资产之后加载。您可以通过扩展 RichEditor 类构造函数来实现此目的。
\Backend\FormWidgets\RichEditor::extend(function($controller) {
$controller->addJs('/plugins/october/test/assets/js/custom-button.js');
});使用 oc.popup JavaScript 函数打开一个模态窗口。
oc.popup({
handler: 'onLoadPopup'
});使用 backend.ajax.beforeRunHandler 来注册一个全局 AJAX 处理器。可以调用 makePartial 方法来渲染一个包含模态框内容的局部视图。
Event::listen('backend.ajax.beforeRunHandler', function ($controller, $handler) {
if ($handler === 'onLoadPopup') {
return $controller->makePartial('~/path/to/my/partials/_popup_form.php');
}
});使用 editorOptions 属性自定义编辑器选项。这是一个高级属性，因为这里定义的所有选项都直接代理到编辑器控件。
html_content:
type: richeditor
editorOptions:
imageDefaultWidth: 0以下列出了一些示例选项。
| Option | Description |
|---|---|
| imageDefaultWidth | Sets the default width of the image when it is inserted in the rich text editor. Setting it to 0 will not set any width. Default: 300. |
| imageDefaultAlign | Sets the default image alignment when it is inserted in the rich text editor. Possible values are left, center and right. Default: center. |
| imageDefaultDisplay | Sets the default display for an image when is is inserted in the rich text. Possible options are: inline and block. Default: block |
| imageResize | Disables image resize when set to false. Default: true |
| imagePaste | Allows pasting images from clipboard. Default: true |