summernote富文本编辑器
2024-05-13 12:31:06
- 一、文档
- 二、使用
- 四、他山之石
一、文档
- 官网地址 https://summernote.org/
- github https://github.com/summernote/summernote
- 选择版本下载 https://github.com/summernote/summernote/tags
二、使用
- bootstrap线上地址在官网找
- summernote线上地址在官网找
- 文件上传以Tp5为例，参考这篇：kindeditor自定义上传文件（图片视频文件）方（后台PHP）
- 成功返回
return ['error' => 0, //成功时'url' => '图片,视频上传后的地址'];
- 失败返回
return ['error' => 1, //失败时'message' => $file->getError()];
效果图
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>summernote富文本编辑器</title><!-- 引用线上的bootstrap.css --><link rel="stylesheet" type="text/css"href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/><!-- 引用线上的summernote.css --><link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.css" rel="stylesheet">
</head>
<body>
<div id="vue-mount-element" style="padding: 20px"><textarea name="content" id="editor">{{info.content}}</textarea>
</div>
</body><!-- 引用线上的jquery.js -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- 最新的 summernote 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.js"></script>
<!-- 引用线上的vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>let vueObject = new Vue({el: '#vue-mount-element', //vue挂载的元素data() {return {info: {id: 1, content: "<b>加粗内容</b>，正常内容"}};}})$(document).ready(function () {$('#editor').summernote({ //富文本挂载的元素id=editor// height: 500,// width: 1000,minHeight: 300, //宽高，根据自己的需求设置：如果是手机上显示，就把宽设小一点，比如410pxmaxwidth: 1000,minwidth: 200,maxHeight: 500,focus: false,callbacks: {onImageUpload: function (files, editor) {var $files = $(files);// 通过each方法遍历每一个file$files.each(function () {var file = this;// FormData，新的form表单封装，具体可百度，但其实用法很简单，如下var data = new FormData();// 将文件加入到file中，后端可获得到参数名为“file”data.append("file", file);// ajax上传$.ajax({data: data,type: "POST",url: "/upload/image",// div上的actioncache: false,contentType: false,processData: false,// 成功时调用方法，后端返回json数据success: function (response) {// console.log(response)if (response.error != 0) {alert("上传失败：" + response.message);} else {// 插入到summernote$('#editor').summernote('insertImage', response.url);}},});})}, onFileUpload: function (files) { //文件上传，默认没有，具体怎么加，请看下一篇var $files = $(files);// 通过each方法遍历每一个file$files.each(function () {var file = this;// FormData，新的form表单封装，具体可百度，但其实用法很简单，如下var data = new FormData();// 将文件加入到file中，后端可获得到参数名为“file”data.append("file", file);// ajax上传$.ajax({data: data,type: "POST",url: "/upload/file",// div上的actioncache: false,contentType: false,processData: false,// 成功时调用方法，后端返回json数据success: function (response) {// console.log(response)if (response.error != 0) {alert("上传失败：" + response.message);} else {$(".note-video-url").val(response.url);//Insert Video之前是输入线上视频url地址后去除禁用，现在是我们上传之后给Video URL输入框赋值后去除禁用$(".note-video-btn").removeAttr("disabled");}},});})}}});})
</script>
</html>四、他山之石
- summernote富文本编辑器的使用
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富文本编辑器 点击文章预览的功能实现
一般如果要在网页项目中使用文章编辑器的话,都会考虑summernote富文本编辑器,毕竟使用简便,而且是开源的,一般的用法就是: <div class="form-group" ...
- summernote富文本编辑器的自定义附件上传：不限于图片类型
summernote富文本编辑器的自定义附件上传 前言 一.自定义上传附件按钮和弹窗 二.结合PHP上传文件进行后端处理 三.用jq模拟点击添加链接方式去处理上传附件 前言 summernote的上传 ...
- 【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇
首先在这里吐槽一下,网上不少教程实在太坑人,错误的代码也敢发上来真的是误人子弟,这篇文章是我踩了无数个坑写上来的,可能也会有不足之处所以自己以后可能也会进行更正. 好吧,先说说最近的情况,忙着学校的期 ...
最新文章
- 【Paper】2019_带有不匹配干扰的多智能体系统有限时间积分滑模控制
- TF之DCGAN：基于TF利用DCGAN测试MNIST数据集并进行生成过程全记录
- 比尔盖茨跌落第二！世界首富换人了
- javascript进阶教程第二章对象案例实战
- AirFlow官方入门DAG示例
- 1.5 编程基础之循环控制 35 求出e的值
- LeetCode 383. Ransom Note
- .Net下RabbitMQ的使用(4) -- 订阅和发布
- 解决浏览器打开就是被篡改的桔梗网界面
- Mac下简单socket连接代码
- vim如何修改只读文件
- 6 猜数字游戏 (15分)——数学分析能力
- JAVA计算机毕业设计校园闲置物品信息管理系统Mybatis+源码+数据库+lw文档+系统+调试部署
- java刻画三角形和梯形和圆形_三角形、梯形和圆形的类封装
- 基于Python pdfplumber实现PDF转WORD
- matlab中f分布,在matlab中用哪个函数求F分布的分位点(分子分母的自由度和概率均已知)...
- Hadoop面试连环炮
- android 视频开发2分之2（仿美拍，糗百）
- 使用CAShapeLayer与UIBezierPath画动态柱状图
- 写一本书作者到底能拿到多少稿酬？
热门文章
- Android Studio 笔记4.2 安卓触摸事件
- 个人读书思维导图笔记之mysql-innodb之changebuff
- GCD全解-dispatch_after/dispatch_time-t延迟操作
- 教程 | VeriStand硬件在环仿真测试第二章
- GIT 技巧命令讲解笔记2020 （三）
- C语言switch执行原理,Switch 底层执行原理
- 【Element】卸载Element
- 使用cf_nise_installer安装使用CloudFoundry笔记
- 江苏科技大学计算机学硕调剂,江苏科技大学2021考研调剂公告
- js将excel转为html,js中表格转为excel文件如何实现多sheet形式