<think>我们正在处理一个关于
Layui的
Layedit富文本编辑器添加
自定义按钮并插入内容的问题。
根据引用[3]和引用[4]，我们知道
Layedit富文本编辑器可以通过
自定义工具栏来添加按钮。
同时，引用[4]提到了一些关于扩展
layedit的功能，如HTML源码模式等，这暗示了我们可以通过扩展的方式添加
自定义功能。
步骤：
1. 定义编辑器，并配置
自定义工具栏。
2. 在
工具栏中添加
自定义按钮。
3. 为按钮绑定事件，在事件中执行插入内容到编辑器的操作。
具体实现：
首先，我们需要在
layui.use的回调函数中获取
layedit模块，并创建编辑器实例。
在创建编辑器实例时，通过`tool`参数配置
工具栏，其中可以添加
自定义按钮。
然后，我们需要监听
工具栏上
自定义按钮的点击事件，并在事件处理函数中调用
layedit的方法来插入内容。
注意：
Layui的
layedit模块在创建编辑器时，
工具栏的配置是一个数组，数组元素是工具按钮的标识。我们可以添加
自定义的按钮标识，然后通过
layedit.set来配置这个按钮。
但是，
layedit默认只支持一些内置的按钮，
自定义按钮需要我们自己定义。我们可以使用
layedit的`build`事件来添加
自定义按钮的事件处理。
参考引用[3]中的HTML结构，我们有一个textarea用于存放编辑器的内容。
下面是一个示例代码，展示如何添加一个
自定义按钮（比如“插入问候语”），点击后插入“Hello, world!”到编辑器中。
由于
Layui的
layedit模块在
工具栏配置中并没有直接提供
自定义按钮的配置方式，我们需要通过扩展
layedit模块来实现。但根据引用[4]，我们可以通过覆盖
layedit的`config`方法来添加
自定义按钮。
然而，在
Layui的官方文档中，并没有详细说明如何添加
自定义按钮。因此，我们可以采用另一种方法：在编辑器创建后，通过DOM操作在
工具栏上添加按钮，并绑定事件。
具体步骤：
1. 创建编辑器，并指定
工具栏，其中可以预留一个位置（比如用一个特殊的标识）或者我们可以在创建后通过DOM操作添加按钮。
2. 在编辑器创建后（使用
layedit.build的回调），获取
工具栏的DOM元素，然后添加
自定义按钮。
3. 绑定按钮的点击事件，在事件中调用
layedit的`insertContent`方法插入内容。
但是，
layedit的
工具栏是动态生成的，我们需要在生成后操作。
示例代码：
```
javascript
layui.use(['
layedit'], function() {
var
layedit =
layui.
layedit;
// 创建编辑器实例，指定
工具栏
var index =
layedit.build('content', {
tool: [
'bold', 'italic', 'underline', '|',
'left', 'center', 'right', '|',
'face', 'image', '|',
'customBtn' // 这里添加一个
自定义按钮的标识，但
layedit默认不认识，我们需要在后续处理
]
});
// 监听编辑器构建完成事件（
layedit没有直接提供事件，我们可以用setTimeout延时查找，或者使用
layui的done回调？）
// 实际上，
layedit.build后，
工具栏会生成，我们可以通过
layedit的配置项中的done回调（如果有）或者使用
layui的onevent来监听事件？但文档没有明确说明。
// 另一种方法：在
layedit.build之后，通过DOM操作添加按钮
// 首先，
layedit生成的
工具栏容器有一个类名：.
layui-
layedit-tool
// 由于可能有多个编辑器，我们需要根据index来定位，
layedit会为每个编辑器生成一个iframe，
工具栏在iframe外面。
// 获取
工具栏容器
var toolbar = $('.
layui-
layedit[
layedit="' + index + '"] .
layui-
layedit-tool');
// 创建
自定义按钮
var customBtn = $('<i class="
layedit-tool-custom" title="
自定义按钮" lay-command="custom"><i class="
layui-icon"></i></i>');
toolbar.append(customBtn);
// 绑定点击事件
customBtn.on('click', function() {
// 向编辑器中插入内容
layedit.insertContent(index, 'Hello, world!');
});
});
```
但是，上述方法在
layui的框架下，使用jQuery可能不是最佳实践，而且
layui有自己的模块化方式。我们可以使用
layui的jQuery（如果已经加载）或者使用原生JS。
注意：
layui自带了jQuery，我们可以使用`$`。
然而，上述代码在动态添加按钮后，由于
layedit的
工具栏按钮都有`lay-command`属性，并且
layedit内部监听了
工具栏的点击事件，我们
自定义的按钮没有内部命令，所以不会冲突。
但是，如果我们需要在多个地方使用，或者需要更健壮的方案，我们可以参考引用[4]中提到的扩展方法。
引用[4]中提到了一个扩展库`Kz.
layedit`，它扩展了
layedit的功能。我们可以借鉴其思路，通过修改
layedit的源代码或者在其基础上扩展。但这里我们不做修改源代码的事情。
另一种更官方的方法：使用
layedit的`customBtn`配置（但官方文档中并没有这个配置）。实际上，我们可以通过配置`tool`数组，然后监听`
layedit.tool`事件（如果存在的话）？但官方文档没有提供。
因此，我们采用上述DOM操作的方式。
但是，如果
工具栏是放在iframe内的（根据
layui的版本，有些版本
工具栏在iframe外，有些在内？），我们需要注意。在
layui v2.4.3中，
工具栏是在iframe外面的，所以可以直接操作。
验证：在
layui v2.4.5中，
工具栏也是在编辑器iframe的上方，所以可以直接操作。
因此，我们采用上述方法。
另外，如果用户需要插入复杂的内容（比如HTML片段），可以使用`
layedit.insertContent`方法插入。
总结步骤：
1. 使用
layedit.build创建编辑器，并配置tool数组（可以包含一个
自定义的标识，比如'customBtn'，但这里我们不在tool数组中写，而是后续添加，所以tool数组可以只写内置的按钮）。
2. 在编辑器创建后（使用setTimeout确保DOM已经生成），找到该编辑器的
工具栏容器。
3. 创建
自定义按钮元素，并添加到
工具栏容器中。
4. 绑定按钮的点击事件，在事件中调用`
layedit.insertContent`方法插入内容。
注意：每个编辑器实例都有一个index，我们在操作时要确保操作的是正确的编辑器。
下面是一个更完整的示例，假设我们只有一个编辑器，id为'content'：
```html
<textarea id="content" style="display:none;"></textarea>
```
```
javascript
layui.use(['
layedit', 'jquery'], function() {
var
layedit =
layui.
layedit;
var $ =
layui.jquery;
// 创建编辑器
var index =
layedit.build('content', {
tool: ['bold', 'italic', 'underline', '|', 'left', 'center', 'right', '|', 'face', 'image'] // 不包含
自定义按钮
});
// 由于
工具栏是动态生成的，可能需要等待一下，或者使用
layedit的on事件？但
layedit没有提供事件，所以用setTimeout
setTimeout(function() {
// 获取
工具栏
var toolbar = $('.
layui-
layedit[
layedit="' + index + '"] .
layui-
layedit-tool');
if (toolbar.length > 0) {
// 创建
自定义按钮
var btn = $('<i class="
layui-icon
layedit-tool-custom" title="插入问候语" style="margin:0 3px;"></i>');
toolbar.append(btn);
btn.on('click', function() {
layedit.insertContent(index, 'Hello, world!');
});
}
}, 100);
});
```
注意：上面的代码中，我们使用了
layui自带的jquery，所以需要先引入
layui，并且确保在
layui.use中加载了jquery模块（
layui的jquery模块名是'jquery'）。
另外，按钮的图标可以使用
layui内置的图标，这里使用了，对应的class是`
layui-icon`，然后内联样式设置了一些边距。
这样，我们就实现了在
Layedit富文本编辑器的
工具栏上添加
自定义按钮，并实现插入内容的功能。
但是，如果用户需要插入的内容是动态的，比如从表单中获取，那么可以在事件处理函数中获取表单的值，然后再插入。
另外，如果用户需要插入的是图片、链接等复杂内容，可能需要打开一个对话框，在对话框中输入内容，然后再插入。方法类似，在按钮点击事件中打开一个layer弹窗，在弹窗中填写内容，确定后调用`
layedit.insertContent`插入。
例如，插入一个链接：
```
javascript
btn.on('click', function() {
layer.prompt({
title: '请输入链接地址',
formType: 0
}, function(url, index2) {
layer.close(index2);
layedit.insertContent(index, '<a href="' + url + '" target="_blank">链接</a>');
});
});
```
这样，当点击
自定义按钮时，会弹出一个输入框，输入链接地址后，会在编辑器中插入一个超链接。
以上就是在
Layui的
Layedit中添加
自定义按钮并插入内容的方法。
注意事项：
1. 由于
Layui的版本更新，可能会有所变化，请根据实际版本调整。
2. 在操作DOM时，确保在编辑器渲染完成后进行，否则可能找不到
工具栏元素。
如果用户需要更复杂的
自定义功能，可以参考引用[4]中提到的扩展库，或者自行研究
layedit的源码进行扩展。
希望这个回答对用户有帮助。</think>在
Layui 的
Layedit 富文本编辑器中添加
自定义按钮并插入内容，可通过以下步骤实现：
### 一、添加
自定义按钮步骤
1. **初始化编辑器并配置
工具栏**
```
javascript
layui.use(['
layedit', 'jquery'], function() {
var
layedit =
layui.
layedit;
var $ =
layui.jquery;
// 创建编辑器实例
var index =
layedit.build('editor', {
tool: [
'bold', 'italic', 'underline',
'|',
'left', 'center', 'right',
'|',
'customBtn' //
自定义按钮标识
],
height: 300
});
});
```
2. **扩展
工具栏按钮**
```
javascript
// 在编辑器渲染后添加
自定义按钮
setTimeout(function() {
// 获取
工具栏容器
var toolbar = $('.
layui-
layedit[
layedit="' + index + '"] .
layui-
layedit-tool');
// 创建
自定义按钮元素
var customBtn = $('<i class="
layui-icon
layedit-tool-custom" title="插入内容"></i>');
toolbar.append(customBtn);
// 绑定点击事件
customBtn.on('click', function() {
// 此处调用插入内容方法
insertCustomContent(index, "这是插入的
自定义内容");
});
}, 300);
```
3. **插入内容的核心函数**
```
javascript
function insertCustomContent(editorIndex, content) {
// 获取编辑器iframe的document
var iframe = document.querySelector('.
layui-
layedit[
layedit="' + editorIndex + '"] iframe');
var editorDoc = iframe.contentDocument || iframe.contentWindow.document;
// 获取编辑器body并插入内容
var body = editorDoc.querySelector('body');
body.focus(); // 确保光标在编辑器内
// 创建新节点插入
var newNode = document.createElement('div');
newNode.innerHTML = content;
body.appendChild(newNode);
// 同步内容到textarea（用于表单提交）
layedit.sync(editorIndex);
}
```
### 二、关键注意事项
1. **动态
工具栏操作**
必须通过 `setTimeout` 延迟操作，确保编辑器渲染完成后再操作 DOM[^3]。
2. **内容同步机制**
插入内容后需调用 `
layedit.sync(index)` 同步到原始 textarea，否则表单提交时无法获取最新内容[^4]。
3. **图标与样式**
使用
Layui 内置图标（如 `` 对应代码），或
自定义 CSS：
```css
.
layedit-tool-custom {
font-size: 18px;
color: #1E9FFF;
margin: 0 5px;
cursor: pointer;
}
```
### 三、完整示例代码
```html
<textarea id="editor" style="display: none;"></textarea>
<script>
layui.use(['
layedit', 'jquery'], function() {
var
layedit =
layui.
layedit;
var $ =
layui.jquery;
// 初始化编辑器
var index =
layedit.build('editor', {
tool: ['bold', 'customBtn'],
height: 300
});
// 添加
自定义按钮
setTimeout(function() {
var toolbar = $('.
layui-
layedit[
layedit="' + index + '"] .
layui-
layedit-tool');
var btn = $('<i class="
layui-icon
layedit-tool-custom" title="插入模板"></i>');
toolbar.append(btn);
btn.on('click', function() {
insertCustomContent(index, "<span style='color:red;'>★ 插入成功 ★</span>");
});
}, 300);
// 插入内容函数
function insertCustomContent(editorIndex, content) {
var iframe = document.querySelector('.
layui-
layedit[
layedit="' + editorIndex + '"] iframe');
var editorDoc = iframe.contentDocument;
editorDoc.body.innerHTML += content;
layedit.sync(editorIndex); // 关键同步操作
}
});
</script>
```
### 四、解决常见问题
- **图片/文件上传**：需结合 `
layedit.set` 配置上传接口[^1]。
- **内容回显异常**：检查路径是否为绝对路径，避免 404 错误[^1]。
- **多编辑器实例**：通过不同 `index` 区分编辑器实例，避免 DOM 冲突。
通过以上方法，即可实现在
Layedit 工具栏添加
自定义按钮并插入内容的功能。注意根据实际需求调整插入内容的格式（文本/HTML 片段）。
本文介绍如何在layui框架中自定义layedit富文本编辑器的工具栏，包括定义编辑器容器、设置图片和视频上传接口及回调，并提供了一个完整的实例。
最低0.47元/天 解锁文章
扫一扫
1987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
