extjs form表单集成layui富文本编辑器的具体代码
时间: 2023-12-10 13:58:59 浏览: 79
以下是一个示例代码,演示了如何在 ExtJS 表单中集成 layui 富文本编辑器:
```
Ext.define('MyApp.view.MyFormPanel', {
extend: 'Ext.form.Panel',
xtype: 'myformpanel',
requires: [
'Ext.form.field.Text',
'Ext.form.field.Checkbox',
'Ext.form.field.ComboBox',
'Ext.form.field.HtmlEditor',
'Ext.layout.container.Form'
],
layout: 'form',
items: [
{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
allowBlank: false
},
{
xtype: 'checkbox',
fieldLabel: 'Is Active',
name: 'isActive',
inputValue: true
},
{
xtype: 'combobox',
fieldLabel: 'Category',
name: 'category',
store: ['Category 1', 'Category 2', 'Category 3']
},
{
xtype: 'htmleditor',
fieldLabel: 'Content',
name: 'content',
enableColors: false,
enableAlignments: false,
enableFontSize: false,
enableFont: false,
enableLinks: false,
enableLists: false,
enableSourceEdit: false,
listeners: {
afterrender: function(editor) {
layui.use('layedit', function(){
var layedit = layui.layedit;
layedit.build(editor.getEl().down('iframe').dom, {
tool: [
'strong', 'italic', 'underline', 'del',
'|',
'left', 'center', 'right', 'link'
]
});
});
}
}
}
]
});
```
在上面的代码中,我们使用了 ExtJS 的表单组件,并将 layui 的富文本编辑器集成到了 ExtJS 的表单中。在 htmleditor 组件的 `afterrender` 事件中,我们使用了 layui 的 `layedit.build` 方法来初始化 layui 富文本编辑器。我们可以通过配置 `tool` 属性来指定需要显示的工具栏按钮。
请注意,这只是一个示例代码,你需要根据自己的实际情况进行修改。
阅读全文