Trumbowyg 是一个轻量级的 WYSIWYG（所见即所得）编辑器，可用于前端开发中。本文将介绍如何在你的项目中使用 Trumbowyg。
安装
你可以通过 npm 来安装 Trumbowyg：
npm install trumbowyg
使用
导入样式和脚本
首先，我们需要导入 Trumbowyg 的样式和脚本文件。在 HTML 中加入以下代码：
<link rel="stylesheet" href="path/to/trumbowyg.min.css"> <script src="path/to/trumbowyg.min.js"></script>
初始化编辑器
接下来，我们需要初始化 Trumbowyg 编辑器。在 JavaScript 中加入以下代码：
$('#editor').trumbowyg();其中，#editor 是你想要将 Trumbowyg 应用到的元素的选择器。
自定义选项
如果你想自定义 Trumbowyg 的选项，你可以传递一个选项对象给 .trumbowyg() 方法。例如：
$('#editor').trumbowyg({
btns: ['strong', 'em', '|', 'link']
});这个例子只会显示粗体、斜体和链接三个按钮。
更多配置选项请参考官方文档：https://alex-d.github.io/Trumbowyg/documentation.html#basic-options
获取内容
要获取编辑器中的内容，可以使用 .trumbowyg('html') 方法。例如：
var content = $('#editor').trumbowyg('html');示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
----- ---------------- ---------------------------------
-------
------
--------- -----------------------
------- -------------------------------------
------- ----------------------------------------
--------
------------ -
-------------------------
-------------------------------------- -
--- ------- - -------------------------------
---------------
---
---
---------
------- ----------------------------------
-------
-------结语
本文介绍了 Trumbowyg 的基本用法，以及如何自定义选项和获取编辑器中的内容。希望能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34233