layui toolbar 使用
时间: 2023-07-11 21:17:34 浏览: 102
要使用 layui 的 toolbar,首先需要引入 layui.js 和 layui.css 文件。然后在 HTML 中添加一个 toolbar 容器,例如:
```html
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<div class="layui-btn-container" id="toolbar"></div>
<!-- 其他内容 -->
</div>
</div>
</div>
</div>
</div>
```
在 JavaScript 中,使用 `layui.use('layedit', function(){})` 加载 layui 的 toolbar 模块。然后通过 `layui.layedit.build('editor', options)` 方法创建一个编辑器,其中 options 是一个配置对象。例如:
```javascript
layui.use('layedit', function(){
var layedit = layui.layedit;
// 创建编辑器
var editor = layedit.build('editor', {
tool: [
'strong', 'italic', 'underline', 'del', '|',
'left', 'center', 'right', '|',
'link', 'unlink', 'image'
]
});
// 绑定按钮事件
layedit.sync(editor);
});
```
在这个例子中,我们创建了一个带有一些常用工具按钮的编辑器,并绑定了按钮事件。具体的工具按钮可以参考 layui 的文档。
阅读全文