若依框架富文本框的实现：

前端部分

引入summernote的js跟css

<head><th:block th:include="include :: header('新增工程')" /><th:block th:include="include :: summernote-css" /><th:block th:include="include :: bootstrap-fileinput-css" /></head>

<th:block th:include="include :: summernote-js" />

写入富文本样式的标签

<div class="col-sm-6"><div class="form-group"><label class="col-sm-3 control-label">现状描述：</label><div class="col-sm-8"><input name="xzms" id="xzms"  type="hidden"><div class="summernote"></div></div></div></div>

写入js代码

$('.summernote').summernote({placeholder: '请输入现状描述',height: 150,lang: 'zh-CN',followingToolbar: false,callbacks: {onImageUpload: function (files){sendFile(files[0],this);}}});function sendFile(file,obj) {var data = new FormData();data.append('file',file);$.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).summernote('editor.insertImage',result.url,result.fileName);}else    {$.modal.alertError('result.msg');}},error: function(error) {$.modal.alertWarning("图片上传失败！");}});}

后端部分

/*** 通用上传请求（单个）*/@PostMapping("/upload")@ResponseBodypublic AjaxResult uploadFile(MultipartFile file) throws Exception{try{// 上传文件路径String filePath = RuoYiConfig.getUploadPath();// 上传并返回新文件名称String fileName = FileUploadUtils.upload(filePath, file);String url = serverConfig.getUrl() + fileName;AjaxResult ajax = AjaxResult.success();ajax.put("url", url);ajax.put("fileName", fileName);ajax.put("newFileName", FileUtils.getName(fileName));ajax.put("originalFilename", file.getOriginalFilename());return ajax;}catch (Exception e){return AjaxResult.error(e.getMessage());}}function submitHandler() {if ($.validate.form()) {var sHTML = $('.summernote').summernote('code');$("#xzms").val(sHTML);var data = $("#form-gongcheng-add").serializeArray();$.operate.saveTab(prefix + "/add", data);}}

实现效果

若依框架富文本框的实现相关推荐

java 富文本框_java-富文本（wangEditor框架）的使用教程
富文本的使用教程(wangEditor框架) 一,相信很多人用过很多富文本的框架,现在我向大家推荐一个很实用的一个富文本框架,具有丰富的功能项,容易使用. 所以本博客介绍这个富文本编辑器的使用哈!觉得 ...
若依框架图片上传、富文本框编辑器功能
文章目录一.前言二.效果三.编码过程 1.前端: index.vue projectShow.js 富文本框: Editor/index.vue 图片上传:ImgUploadCropper/in ...
ueditor 不显示工具栏_Python 之Django富文本框Ueditor的使用
Django框架是用Python进行Web开发的重要框架,进行Web开发通常会用到网页编辑器,百度的Ueditor网页编辑器功能非常强大,不直接支持python,但有Django第三方插件支持这就是D ...
django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用...
一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts importr ...
html表单控件富文本框,表单控件之富文本框实践
多行文本输入框(不是富文本框)的html代码如下: 学历及经历: ${emp.details} 富文本的js代码如下: // create Editor from textarea HTML elem ...
若依前后端分离发布富文本框内容 | uni-app微信小程序展示富文本框内容
微信小程序端引入富文本样式富文本提交图片json error 一.展示示例: 1.PC端前端发布界面可以设置文字大小,居中,可以插入图片,设置图片大小,居中. 2.小程序端展示二.基于若依框架踩 ...
html5文本域边框管理,表单控件之富文本框实践
多行文本输入框(不是富文本框)的html代码如下: 学历及经历: ${emp.details} 富文本的js代码如下: // create Editor from textarea HTML elem ...
解决Vue用v-html、v-text渲染后台富文本框文本内容样式修改问题，用自定义css样式无法渲染出对应效果的问题
举例: 如果您要加载富文本框内容的DOM id是detail 那么就这么写scss样式 #detail {font-size: 14px;text-align: center;&>> ...
常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ；和CKEditor实例...
目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多年历史的富文本编辑器了,使用简单,而且一般的使用是免费的,但是不开源,上传图片上传附件等功能没有,扩展性差. CuteEdit ...

若依框架富文本框的实现

若依框架富文本框的实现：

前端部分

后端部分

实现效果

若依框架富文本框的实现相关推荐

最新文章

热门文章