一个简洁大方的summernote富文本的使用

本文介绍了如何简单快捷地在项目中集成Summernote富文本编辑器,包括下载API和源码、导入静态文件、引入CSS和JS、设置国际化以及实例化编辑器。通过实例化一个富文本,可以实现页面上的文本编辑功能。获取和设置富文本内容的方法也一并提及,更多高级功能可参考官方文档。

官网:https://summernote.org/

 

1.下载对应的API和源码

2.导入依赖的相应文件,summernote解压后的dist文件夹中

 

3个部分放入系统的静态文件夹中 

1. font文件

2.lang文件夹中的国际化内容,一般我们引入一个中文的就行(zh-CN)

3.最外边的summernote.css和summernote.js

 

3.在html页面引入js,css,国际化js。在页面实例化一个富文本。

用div和textarea都可以

 

在script初始化:

 

到这使用一个summernote富文本就完成了,我们可以看到效果,

 

富文本的取值赋值方式:

$('#summernote').summernote('code', "你赋值的内容..." ); //赋值
$('#summernote').summernote('code' );//取值

其它具体的工具栏设置上传图片等操作可以看官方文档

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值