零门槛打造 WYSIWYG 编辑器：100% 所见即所得神器 Trumbowyg

前端

2023-07-23 06:07:45

轻松驾驭富文本编辑器：探索Trumbowyg的强大功能

在内容创作领域，一款易用且功能强大的富文本编辑器是不可或缺的工具。Trumbowyg就是这样一个令人惊叹的编辑器，它以其简易的操作和丰富的功能，备受各类用户的青睐。

上手即用，所见即所得

Trumbowyg以其操作简便著称。它的界面直观易懂，即使是初学者也能快速上手。所见即所得的功能让用户可以实时预览编辑后的内容，确保与预期效果一致。

代码优化，轻松编辑

除了易用性，Trumbowyg还注重代码优化。它生成的代码语义化且符合HTML5标准，兼容大多数现代浏览器，包括IE8+、Chrome、Opera和Firefox。

强大的API，定制无限

Trumbowyg提供了一个强大的API，让用户可以根据需要扩展编辑器功能。无论是添加新按钮、修改现有功能，还是集成第三方插件，Trumbowyg都能轻松实现，让用户尽情发挥创造力。

轻量级、可定制，畅快编辑

Trumbowyg是一款轻量级的编辑器，不会拖慢网站速度，确保流畅自如的编辑体验。它还具有高度的可定制性，用户可以调整工具栏、按钮和样式，打造符合自身习惯的编辑界面。

基于Bootstrap，美观大方

Trumbowyg基于Bootstrap构建，能够很好地保留复制粘贴内容的原有样式，让编辑后的内容美观大方。无论是插入图片、视频还是表格，Trumbowyg都能完美呈现，提升编辑效率和视觉体验。

跨平台支持，随时随地创作

Trumbowyg支持跨平台使用，可以在Windows、Mac和Linux系统上运行。无论用户身处何处，无论使用何种操作系统，都可以轻松访问Trumbowyg，随时随地捕捉灵感，进行创作。

代码示例

初始化Trumbowyg编辑器：

$('#editor').trumbowyg();

添加新的按钮：

$('#editor').trumbowyg({
  btns: [
    ['viewHTML'],
    ['formatting'],
    ['strong', 'em', 'del'],
    ['superscript', 'subscript'],
    ['link'],
    ['insertImage'],
    ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
    ['unorderedList', 'orderedList'],
    ['horizontalRule'],
    ['removeformat']
  ]
});

修改现有功能：

$('#editor').trumbowyg({
  btns: [
    {
      title: '插入图片',
      text: '图片',
      hasIcon: false, // 移除默认图标
      icon: 'fa fa-image' // 自定义图标
    }
  ]
});

集成第三方插件：

$('#editor').trumbowyg({
  plugins: {
    fontsize: {
      sizeList: [
        '10px',
        '12px',
        '14px',
        '16px',
        '18px',
        '20px'
      ]
    }
  }
});