【实践】简洁大方的summernote 富文本编辑器插件的用发—

首先在这里吐槽一下，网上不少教程实在太坑人，错误的代码也敢发上来真的是误人子弟，这篇文章是我踩了无数个坑写上来的，可能也会有不足之处所以自己以后可能也会进行更正。

好吧，先说说最近的情况，忙着学校的期末作品考核，有一部分用到了富文本编辑器于是百度一下，发现了一个不错的挺漂亮的富文本编辑器就是今天的主角： summernote！

源代码下载在这里：http://summernote.org/

好了说说自己的经历：

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

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

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

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

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

然后是导入这个插件：

css：直接在html 页面头部导入即可注意依赖性：

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/summernote.css"><link rel="stylesheet" type="text/css" href="css/normal.css"><link rel="stylesheet" type="text/css" href="css/personalPage.css?date=20170529-2">
<!--normal.css 是自己的css 文件不是规定内的文件-->

js：本人用的是模块化管理插件 require.js 所以在导入js 文件方面有点特殊

（如果按照往常在页面里面导入js 文件也要主义依赖性）

代码如下：

//jquery 1.9.1模块不符合 AMD 格式所以需要自定义
require.config({shim:{'jquery.min':{exports: '$'},'bootstrap.min':{deps: ['jquery.min']},'summernote.min': {deps: ['jquery.min','bootstrap.min']},'summernote-zh-CN.min': {deps: ['summernote.min']}}})

关于require.js 这里不作太多介绍，本人之前写过一篇日志可以去看一下

导入完核心文件后就可以初始化了！详情请看下一节~

summernote——实例篇

转载于:https://www.cnblogs.com/stitchgogo/p/6921107.html

【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇相关推荐

summernote富文本编辑器基本使用
summernote富文本编辑器的基本使用一.简介二.下载: 三.基本使用: 1.引入js/css 2.建立一个div 3.用 js初始化操作 4.上传图片的Controller 5.过去编辑器内 ...
vue+summernote富文本编辑器
vue+summernote富文本编辑器最近项目中有新增编辑报告的需求需使用富文本编辑器,在网上找了几篇相关博客,于是选择了summernote ,summernote是一款轻量级的富文本编辑器,比 ...
bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站欢迎关注今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了但是图片上传到 ...
Django使用summernote富文本编辑器，完整前后端
今天项目中要使用summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 &l ...
Django中summernote富文本编辑器完整前后端
summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 Summernote ...
summernote富文本编辑器的基本使用
summernote富文本编辑器的基本使用(一) 本文主要是跟官网的一些翻译,也锻炼下英语水平.原英文网址http://summernote.org/getting-started/ 基础API 初始 ...
summernote富文本编辑器
一.文档二.使用四.他山之石一.文档官网地址 https://summernote.org/ github https://github.com/summernote/summernote 选 ...
前端 summernote富文本编辑器点击文章预览的功能实现
一般如果要在网页项目中使用文章编辑器的话,都会考虑summernote富文本编辑器,毕竟使用简便,而且是开源的,一般的用法就是: <div class="form-group" ...
summernote富文本编辑器的自定义附件上传：不限于图片类型
summernote富文本编辑器的自定义附件上传前言一.自定义上传附件按钮和弹窗二.结合PHP上传文件进行后端处理三.用jq模拟点击添加链接方式去处理上传附件前言 summernote的上传 ...

【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇

【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇相关推荐

最新文章

热门文章