本文主要是介绍【若依(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富文本编辑器的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
