Summernote文本编辑器入门

https://www.cnblogs.com/hzb462606/p/8987832.html

1、summernote是一个界面比较简洁美观的富文本编辑器。

2、文件导入(官方下载地址:http://summernote.org/

下载回来的文件夹是这样的:

 插件的核心文件放在 dist 这个文件夹里面,文件夹内有三个起着重要作用的文件

font文件夹: 将它放在你项目的css 文件的文件夹内否则会加载不出富文本编辑器上面的功能图标

另外还有一个语言的文件需要我们导入一下:

这个文件夹里面有18个国家的语言文件 其中 zh-CN 就是中文的语言文件

总结下来我们需要的文件是:(注意一点font文件夹,将它放在你项目的css 文件的文件夹内否则会加载不出富文本编辑器上面的功能图标)

3、 前端代码实例(使用Summernote富文本编辑器需要创建一个summernote实例):

 summernote

 效果:

 4、summernote常用属性获取

获取内容:

$("#user-work-content").summernote("code");

通过 summernote 编辑器的元素调用summernote 的方法,传入 code 参数就能获取summernote 的值了。

插入内容:

$("#user-work-content").summernote("code",content);

和第一个方法一样,只不过这次调用时传入了第二个参数,这个参数是你要插入的数据,可以是字符串或者是从后台获取的数据

判断内容是否为空:

var isEmpty = $("#user-work-content").summernote('isEmpty');

还是调用 summernote 的方法,不过这次的参数是 ‘isEmpty’ 这个字符串的参数,调用时会返回一个布尔值,通过这个布尔值可以判断编辑器内容是否为空,true表示空,false表示非空。

此条目发表在编程源码分类目录。将固定链接加入收藏夹。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注