summernote使用心得分享

原创 一只熊的北极 教程 前端必备 515阅读 2017-08-30 15:53:24 举报

今日因项目需要所以使用了很有名气的富文本编辑器summernote,分享使用方法如下!
1、首先你的引入summernote的js和css,而在使用之前你也必须引入bootstrap.js和bootstrap的css,最主要的是你得引入jq,如图

summernote使用心得分享
2、接下来开始啦,在页面创建:
<div id="summernote">Hello 一只熊的北极</div>

summernote使用心得分享

3、接下来启动summernote
$(document).ready(function() {
$('#summernote').summernote({
height: 500, //编辑器高度
minHeight: 500, //最小高度
maxHeight: 500, //最大高度
focus: true
})
})

summernote使用心得分享
启动在浏览器打开如图:

summernote使用心得分享
4、你会发现一个富文本编辑器怎么可能会没有设置字体大小的功能,当然加入字体大小在工具栏就ok啦

summernote使用心得分享
刷新你会发现有啦

summernote使用心得分享
5、当然你还会发现提示的英文的,那怎么改呢?看图

summernote使用心得分享

summernote使用心得分享
你会发现有一个目录叫lang里面有一个js叫summernote-zh-CN.js,引入页面设置就ok,

summernote使用心得分享

当然你想设置什么语言就引入相应的文件就行啦!

$('#summernote').summernote('fontName', '黑体') //设置默认显示字体
var markupStr = $('#summernote').summernote('code'); //获取内容
var markuoStr1 = '一只熊的北极'
$('#summernote').summernote('code', markupStr1) //动态插入

summernote官网
好了结束

我是一只来自深山老林的北极熊!分享技术,共同进步!欢迎大家积极分享言论! 想一起学习交流的欢迎来Q群:565996731 (申请注明来自前端网)

评论 ( 2 )
最新评论