【若依(ruoyi)】summernote富文本编辑器的使用
前言
- ruoyi 4.6
介绍
官网: https://summernote.org/
中文站: https://www.summernote.cn/
源码: https://github.com/summernote/summernote
gitee镜像: https://gitee.com/mirrors/summernote
学习手册:
- 入门手册
- 深入学习
在若依(ruoyi)中使用
若依(ruoyi)的使用介绍
- 引入 js 和 css
<th:block th:include="include :: summernote-css" />
<th:block th:include="include :: summernote-js" />
- 添加 html
<div class="form-group"> <label class="col-sm-3 control-label">内容:</label><div class="col-sm-8"><input type="hidden" class="form-control" name="content"><div class="summernote" id="content"></div></div>
</div>
- 添加 js
<script th:inline="javascript">$(function() {$('.summernote').summernote({lang: 'zh-CN',height : 350,placeholder: '请输入内容',callbacks: {onChange: function(contents, $edittable) {$("input[name='" + this.id + "']").val(contents);},onImageUpload: function(files) {var obj = this;var data = new FormData();data.append("file", files[0]);$.ajax({type: "post",url: ctx + "common/upload",data: data,cache: false,contentType: false,processData: false,dataType: 'json',success: function(result) {if (result.code == web_status.SUCCESS) {$('#' + obj.id).summernote('insertImage', result.url);} else {$.modal.alertError(result.msg);}},error: function(error) {$.modal.alertWarning("图片上传失败。");}});}}});});
</script>
高度控制
高度控制参考官方说明。
height
控件高度。设置高度后,该控件高度固定。minHeight
控件最小高度。设置最小高度后,该控件初始高度为最小高度值。当所需高度超过最小高度时,控件自动调整高度。
【若依(ruoyi)】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 富文本编辑器插件的用发——导入篇
首先在这里吐槽一下,网上不少教程实在太坑人,错误的代码也敢发上来真的是误人子弟,这篇文章是我踩了无数个坑写上来的,可能也会有不足之处所以自己以后可能也会进行更正. 好吧,先说说最近的情况,忙着学校的期 ...
最新文章
- [转载] CSS模块化【封装-继承-多态】
- mysql自定义函数实现,自定义oracle中decode方法
- Activity采用栈式管理的理解
- socket udp
- tomcat ssi配置及升级导致ssi include错误问题解决
- pve远程连接 spcie_proxmox折腾 篇一:解决j3455直通iommu分组问题,PVE内核编译教程...
- 只有本地用户才能安装sql_为何只有安装了新风换气机才能打造好的家居环境?听听厂家怎么说...
- Android 基础 —— 活动的生存周期
- react 前端解析二进制流_一年半前端跳槽面试经验(头条、微信、shopee)
- Java自动类型转换和强制类型转换
- AndroidStudio_android中实现ImageView的清空操作---Android原生开发工作笔记235
- 2008年9月三级网络技术考试试卷 参考答案1
- ubantu的二三事
- 学堂云大学计算机答案,学堂云的答案哪里找?
- 设计类-Gliffy Diagram的安装使用
- 屏下摄像头,实现这一全面屏终极方案有多难?
- 单月销量破万台,FITURE治好了健身镜的“水土不服”?
- 中式红木装修,古雅灵动、温婉雅致、独具风情
- Python学习教程(Python学习路线):Day14A-网络编程入门
- 首席信息官将被首席数据官取代?
热门文章
- URAL 1348. Goat in the Garden 2[求点到线段的距离]
- submit()和execute()区别
- Codeforces 356D Bacterial Melee dp
- 欧洲为何没有牛逼的互联网公司?
- 信息学奥赛一本通1095:数1的个数 AC——王曙翰
- Fixturlaser对中仪维修GO/NXA Pro系列
- 爱尚实训html入门基础篇,爱尚实训网页设计与网页制作的区别
- docker网络模式与none模式配置网络
- 【Google 开发者大会】一篇看懂 TensorFlow 如何助力高效开发
- 大型企业及运营商国际出口使用的BGP技术,BGP基础配置