专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端开发:一款开源基于bootstrap的富文本编辑器(summernote)

ins518 2024-09-27 09:26:58 技术文章 9 ℃ 0 评论

Summernote是一个超级简单的所见即所得编辑器，基于jQuery和bootstrap3.x.x+开源库构建，轻量级的富文本编辑器（js+css: 100Kb左右），除百度UMeditor之外的另一个选择，兼容ie9+及所有现代浏览器，能够满足对文本的基本编辑需求，基于bootstrap也让UI更加美观。

Summernote有几个特点：

  • 从剪贴板粘贴图片

  • 主要操作都支持快捷键

  • 保存图像中直接使用base64编码字段的内容,所以你不需要实现图像处理

  • 提供了简易UI

  • 交互式的所见即所得编辑模式

  • 方便的集成服务器

1、下载及初始化

https://github.com/summernote/summernote/

①引入JS/CSS

下载文件并放到项目的任意位置，然后在页面中引入summernote的js和css文件，需要先引入jQuery和bootstrap开源库。引入下图所示的五个文件即可（内置多语言，中文在最后引入lang文件夹中的summernote-zh-CN.js文件并初始化时配置参数lang:'zh-CN'即可）

②一个目标元素

然后<body>中某处的添加div标签，这个元素将替换为summernote编辑器。

③summernote

最后，运行此脚本后，DOM就准备好了

也有一个适应React的版本，详情请看：

https://github.com/summernote/react-summernote

2、一些例子展示

可以根据bootstrap主题改变风格

通过jQuery的class选择器初始化多个summernote

通过按钮来激活/关闭编辑状态

源码查看时可以使用代码着色，更容易查看，这需要引入额外的js插件

3、整合

与Django、Ruby On Rails、AngularJS、Apache Wicket、Webpack和Meteor整合。能够让你在多种环境下轻松使用summernote。

summernote非常简单直观，使用方便，如果你项目使用的bootstrap UI强烈推举使用summernote作为富文本编辑器，除了以上介绍的还有很多功能，如百度贴吧的输入@出现选择用户等。感兴趣的可以上官网了解详情。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表