当前位置：首页 > news >正文

bootstrap3-wysiwyg工具栏自定义指南：打造专属编辑器界面

news 2026/7/19 22:59:06

bootstrap3-wysiwyg工具栏自定义指南：打造专属编辑器界面

【免费下载链接】bootstrap3-wysiwygSimple, beautiful wysiwyg editor项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap3-wysiwyg

bootstrap3-wysiwyg是一款简洁美观的富文本编辑器，通过灵活的工具栏自定义功能，你可以轻松打造符合自身需求的编辑器界面。本文将详细介绍如何自定义工具栏，包括基础配置、高级功能和实战案例，帮助新手用户快速上手。

一、了解工具栏默认配置

在开始自定义之前，首先需要了解bootstrap3-wysiwyg的默认工具栏结构。打开项目核心文件src/bootstrap3-wysihtml5.js，可以看到默认配置包含以下模块：

toolbar: { 'font-styles': true, 'color': false, 'emphasis': { 'small': true }, 'blockquote': true, 'lists': true, 'html': false, 'link': true, 'image': true, 'smallmodals': false }

默认配置中启用了字体样式、强调、引用、列表、链接和图片功能，禁用了颜色选择和HTML编辑功能。

二、基础自定义：开启/关闭功能模块

2.1 快速启用核心功能

通过简单设置true或false，可以快速开启或关闭工具栏模块。例如，要启用颜色选择器和HTML编辑功能，只需修改配置：

$('.editor').wysihtml5({ toolbar: { 'color': true, // 启用颜色选择 'html': true // 启用HTML编辑 } });

2.2 禁用不需要的功能

如果你的编辑器不需要某些功能（如图片上传），可以将对应选项设置为false：

$('.editor').wysihtml5({ toolbar: { 'image': false // 禁用图片功能 } });

三、高级自定义：功能模块细粒度控制

3.1 自定义强调功能

强调功能（emphasis）支持细粒度控制，例如仅保留粗体和斜体，禁用小号文本：

$('.editor').wysihtml5({ toolbar: { 'emphasis': { 'small': false, // 禁用小号文本 'bold': true, // 启用粗体 'italic': true // 启用斜体 } } });

3.2 调整工具栏按钮尺寸

通过size属性可以调整工具栏按钮的大小，支持lg（大）、md（中）、sm（小）、xs（超小）四个尺寸：

$('.editor').wysihtml5({ toolbar: { 'size': 'sm', // 设置按钮为小号尺寸 'font-styles': true } });

四、实战案例：打造极简编辑器

假设你需要一个只包含基础文本格式化功能的极简编辑器，可以这样配置：

$('.simple-editor').wysihtml5({ toolbar: { 'font-styles': true, // 保留字体样式 'emphasis': { 'bold': true, // 保留粗体 'italic': true // 保留斜体 }, 'lists': true, // 保留列表功能 'color': false, // 禁用颜色选择 'link': false, // 禁用链接功能 'image': false, // 禁用图片功能 'blockquote': false, // 禁用引用功能 'html': false // 禁用HTML编辑 } });