富文本编辑器summernote的基本使用
summernote比较突出的优点就是能保持复制过来的东西的原有样式,并且比较流畅。
官方文档地址:https://summernote.org/getting-started
我是用到cdn引入
<!-- 插件引入 -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<!--引入中文JS包-->
<script src="https://cdn.bootcss.com/summernote/0.8.10/lang/summernote-zh-CN.js"></script> //因为这个插件是国外的写的,一定要引入这个中文包,不然编辑器是默认的英文
HTML
<div id="summernote"></div> //内容载体
JS
// 编辑器功能=====================================
$("#summernote").summernote({
lang : 'zh-CN',// 语言
height : , // 高度
minHeight : , // 最小高度
placeholder : '请输入文章内容', // 提示
// summernote自定义配置
toolbar: [
['operate', ['undo','redo']],
['magic',['style']],
['style', ['bold', 'italic', 'underline', 'clear']],
['para', ['height','fontsize','ul', 'ol', 'paragraph']],
['font', ['strikethrough', 'superscript', 'subscript']],
['color', ['color']],
['insert',['picture','video','link','table','hr']],
['layout',['fullscreen','codeview']],
],
callbacks : { // 回调函数
// 上传图片时使用的回调函数 因为我们input选择的本地图片是二进制图片,需要把二进制图片上传服务器,服务器再返回图片url,就需要用到callback这个回调函数
onImageUpload : function(files) {
var form=new FormData();
form.append('myFileName',files[]) //myFileName 是上传的参数名,一定不能写错
$.ajax({
type:"post",
url:"${path}/Img/upload", //上传服务器地址
dataType:'json',
data:form,
processData : false,
contentType : false,
cache : false,
success:function(data){
console.log(data.data)
$('#summernote').summernote('editor.insertImage',data.data);
}
})
}
}
});
注意:
$('#summernote').summernote('insertImage', url, filename); 官方文档提供的图片插入封装函数,在本地环境下服务器返回的url并不能展示在编辑框内,所以不要怀疑这个函数的作用,当你放到生产环境的时候自然会展示在编辑框内,这个问题我花了一个下午才证明,希望不要再踩坑
最终效果图
富文本编辑器summernote的基本使用的更多相关文章
- 超好用的富文本编辑器Summernote的使用
官网地址 中文文档 源码下载地址 Summernote依赖于jquery和bootstrap3/4 所以用时记得引入这俩依赖 奉上引入方法(官网说的很清楚,api也很详细): <!-- in ...
- 富文本编辑器summerNote
载入富文本: $('.summernote').summernote({ height: 220, tabsize: 2, lang: 'zh-CN' }); 富文本获取内容: $('.summern ...
- 富文本编辑器 summernote.js
1.引用js 可在 https://summernote.org/ 官网下载 ,并查看详细的API 引入:summernote.js 和 summernote-zh-CN.js 以及样式文件:su ...
- SummerNote 富文本编辑器 - Rails 集成
使用官方提供的CDN服务 将下面一段加入layout文件中 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css ...
- summernote富文本编辑器
下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...
- summernote富文本编辑器的使用
最近在开发一个微信公众号的后台,微信公众号编辑的文章一直没有得到很好地适应,大多数人也是在其他的编辑软件中编辑好之后直接去复制到微信公众平台中,考虑到复制后会排版出现问题,所以给大家推荐一款很不错的W ...
- summernote富文本编辑器配合validate表单验证无法进行表单提交的问题
1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...
- summernote 富文本编辑器限制输入字符长度
项目中需要一个比较简单的富文本编辑器,于是选中了summernote .虽然比较轻量,但是在开发中也遇到了几个问题,在此记录一下. 1:样式和bootstrap冲突,初始化之后显示为: .note-e ...
- summernote(富文本编辑器)将附件与图片上传到自己的服务器(vue项目)
1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $('#summernote').summernote({ callback ...
随机推荐
- ABC156E
题目链接 也是简单的组合数学问题,每个位置可以移动走,也可以移动来,那么我们就需要找最终的状态,也就是最终的0的个数 假设有m个0,就有n-m个非0空位,选择0的组合数为\(\textrm{C}_{n ...
- 使用命令将单个java文件打包为jar
思路:先将java文件编译为class文件,然后再打包为jar 参考博文:https://www.cnblogs.com/sxdcgaq8080/p/8126770.html http://www.m ...
- 吴裕雄--天生自然Python Matplotlib库学习笔记:matplotlib绘图(1)
Matplotlib 可能是 Python 2D-绘图领域使用最广泛的套件.它能让使用者很轻松地将数据图形化,并且提供多样化的输出格式. from pylab import * size = 128, ...
- 使用Gogs搭建自己的Git服务--windows
Gogs介绍 官方网站:传送门... 使用Gogs可以搭建一个自己的私有Git服务. 有时候我们有一些有些不想公开的私人小项目或者练习项目,源码想放在GitHub.码云(一直觉得这名字有点蹭知名度)这 ...
- 【CSS 】js操作css
对设置和移除所有 <p> 元素的 "main" 类进行切换: $("button").click(function(){ $("p&quo ...
- js 子窗口调用父框框方法
父窗口 子窗口
- Tomcat访问控制及站点部署(以WAR包形式上传)!(重点)
访问控制 首先安装好jdk以及apache-tomcat并能访问tomcat网页 点击server status了解服务状态会报403的错误 第一步:修改user.xml配置文件 [root@loca ...
- 记一次RocketMQ源码导入IDEA过程
首先,下载源码,可以官网下载source包,也可以从GitHub上直接拉下来导入IDEA.如果是官网下载的source zip包,直接作为当前project的module导入,这里不赘述太多,只强调一 ...
- C、C++ 不得宠,微软正开发新的编程语言!
76 年迭代与更新,编程语言界,谁主沉浮? 在六百多种编程语言中,对于开发者而言,其主观印象中或只有几种主流的编程语言,如 Java.C.C++.C#.新贵 Python 等,而之所以它们能够成为主流 ...
- 深入理解 ajax系列第一篇(XHR 对象)
1999年,微软公司发布了IE5, 第一次引入新功能:允许javascript 脚本向服务器发起 hffp 请求.这个功能方式并没有被引起注意,知道2004年 Gmail 发布和 Google Map ...