Bootstrap-Wysiwyg 开源项目使用教程

最新推荐文章于 2025-03-31 09:30:22 发布

尚丽桃Kimball

最新推荐文章于 2025-03-31 09:30:22 发布

阅读量631

点赞数 21

本文链接：https://blog.youkuaiyun.com/gitblog_01180/article/details/146799467

版权

Bootstrap-Wysiwyg 开源项目使用教程

bootstrap-wysiwyg Tiny bootstrap-compatible WISWYG rich text editor 项目地址: https://gitcode.com/gh_mirrors/boo/bootstrap-wysiwyg

1. 项目介绍

Bootstrap-Wysiwyg 是一个基于 Bootstrap 框架的轻量级富文本编辑器。它利用浏览器的 execCommand 功能构建，并且是为 MindMup 工具量身定制的。这个编辑器具有以下特点：

自动绑定 Mac 和 Windows 系统的常见操作快捷键。
支持拖拽文件以插入图片，同时也支持移动设备上的拍照功能。
允许自定义工具栏，无需魔法标记生成器，可以充分利用 Bootstrap、Font Awesome 等资源。
不强制任何样式，完全由用户自定义。
使用标准的浏览器特性，工具栏和键盘配置可以执行任何支持的浏览器命令。
不创建独立的框架或备份文本区域，而是简单地在 DIV 中运行所有内容。
可以选择清理尾随空白和空的 divs 和 spans。
需要现代浏览器（在 Chrome 26、Firefox 19、Safari 6 上测试通过）。
支持移动设备（在 iOS 6 iPad/iPhone 和 Android 4.1.1 Chrome 上测试通过）。

2. 项目快速启动

首先，确保你的项目中已经包含了 jQuery、jQuery HotKeys 和 Bootstrap 库。以下是一个基本的 HTML 代码示例，用于启动 Bootstrap-Wysiwyg：

<!DOCTYPE html>
<html>
<head>
  <link href="path/to/bootstrap.css" rel="stylesheet">
  <script src="path/to/jquery.js"></script>
  <script src="path/to/bootstrap-wysiwyg.js"></script>
</head>
<body>

  <div id="editor">
    <!-- 这里是富文本编辑器的内容 -->
  </div>

  <!-- 工具栏 -->
  <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
    <a class="btn btn-large" data-edit="bold"><i class="icon-bold"></i></a>
    <!-- 其他工具栏按钮 -->
  </div>

  <script>
    $("#editor").wysiwyg();
  </script>

</body>
</html>

确保将 path/to/bootstrap.css、path/to/jquery.js 和 path/to/bootstrap-wysiwyg.js 替换为实际的路径。