关键词：
微信小程序端引入富文本样式
富文本提交图片json error
一、展示示例：
1.PC端前端发布界面
可以设置文字大小，居中，可以插入图片，设置图片大小，居中。
2.小程序端展示
二、基于若依框架踩坑和实现
1.数据库字段设计
2.利用若依框架代码生成
在定义的富文本框字段【显示类型】需要选择【富文本控件】
3.富文本框添加图片踩坑
3.1
**遇到问题：**生成代码后会在添加列表的弹框中出现富文本框，但是在富文本中上传图片的时候会显示json错误，无法上传图片包括富文本下面上传封面图片的时候也会出现无法上传图片的情况。
解决方法：
在application.yml文件中把不做仿xss攻击的路径加上
来源：
富文本提交图片json error
3.2
遇到问题：
富文本下面上传封面图片的时候会出现无法上传图片的情况，图片闪一下就消失了。
解决办法：
把此文件中的这一段注释掉即可。
3.3
**遇到问题：**富文本框中的图片插入后过大，没办法改变大小
**解决办法：**通过阅读博客【若依(ruoyi)前后端分离 quill-editor 实现图片上传拖拽修改图片大小】解决
若依(ruoyi)前后端分离 quill-editor 实现图片上传拖拽修改图片大小
具体解决方法：
步骤1：在vue.config.js 文件中添加 一下内容
var webpack = require('webpack');
plugins: [ new webpack.ProvidePlugin( 'window.Quill': 'quill/dist/quill.js', 'Quill': 'quill/dist/quill.js' ), ]
步骤2：
在terminal终端命令行输入：
npm install quill-image-drop-module --save
npm i quill-image-resize-module --save
npm install quill-image-extend-module --save
步骤3：在一下内容按照图片位置放在指定位置
import ImageDrop from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop);
import ImageExtend from 'quill-image-extend-module'
// quill-image-resize-module该插件是用于控制上传的图片的大小
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageExtend);
Quill.register('modules/imageResize', ImageResize);
imageDrop: true, //图片拖拽
imageResize: // 图片缩放比例
displayStyles:
backgroundColor:'black',
border:'none',
color:'white'
,
modules:['Resize','DisplaySize', 'Toolbar'] // Resize 允许缩放， DisplaySize 缩放时显示像素 Toolbar 显示工具栏
,
以上亲测可用。
4.基于uni-app的微信小程序端展示富文本框
4.1首先用.js文件从后端获取数据
export function listHealthyLife(query)
return request(
url: '/system/healthyLife/list',
method: 'get',
params: query
)
4.2新建页面，不要忘记在page.json中注册
新建列表页面：
<template>
<view class="page">
<view class="box_1">
<view class="list_1">
<view class="list-items_1-0" v-for="(item, key) in listHealthyLife" :key="key" @click="showDetails(item.imageText)">
<view class="group_6-0">
<image class="image_2-0" :src="item.homePage" mode="aspectFill"></image>
<!-- <img src="D:\\ruoyi\\uploadPath\\upload\\2022\\06\\21\\11.jpg" class="image_2-0"></img> -->
<view class="text-wrapper_3-0">
<text lines="1" class="text_4-0">item.title</text>
<text lines="1" class="text_5-0">item.updateTime</text>
</view>
</view>
</view>
<uni-pagination style="margin-top: 50rpx;" v-show="total>0" :total="total" :current="current" :pageSize="pageSize" @change="handlePage">
</uni-pagination>
</view>
</view>
</view>
</template>
<script>
import listHealthyLife from "@/api/system/healthyLife.js"
export default
data()
return
constants: ,
listHealthyLife: [],
// 分页参数
total: 0,
current: 1,
pageSize: 7,
;
,
created()
this.getList();
,
methods:
getList()
listHealthyLife(pageNum: this.current, pageSize: this.pageSize).then(response =>
this.listHealthyLife = response.rows;
this.total = response.total;
console.log(this.total)
);
,
// 触发跳转
showDetails(index)
uni.navigateTo(
url: '/pages/jiankangshenghuo/details?detail='+encodeURIComponent(JSON.stringify(index))
);
// 分页点击事件
handlePage(params)
console.log(params) //可以打印看看params
this.current = params.current;
this.getList() // 点击的时候去请求查询列表
,
;
</script>
新建详情页面：
<template>
<view class="page">
<view class="friendsCircle-content">
<rich-text :nodes="article" class="ql-editor"></rich-text>
</view>
</view>
</template>
<script>
import '@/components/quillCSS/quill.bubble.css'
import '@/components/quillCSS/quill.core.css'
import '@/components/quillCSS/quill.snow.css'
export default
components:
uParse //注册组件
,
data()
return
article:'',
;
,
onLoad: function (option) //option为object类型，会序列化上个页面传递的参数
this.article=JSON.parse(decodeURIComponent(option.detail));
console.log(this.article)
,
methods:
</script>
**遇到问题：**但是此时，会有的富文本样式显示不出来的情况，所以需要再修改一下
解决办法：
步骤1：
在ruoyi-ui中找到quill源文件，在dist目录下可以看到
quill.bubble.css
quill.core.css
quill.snow.css
以上三个文件，把这三个文件复制到一个文件夹中，打开这三个文件把所有带*号的部分都删除
步骤2：
在微信小程序详情页面应用这三个文件
/*Vue-Quill-Editor样式*/
@import 'mdui/quill.bubble.css';
@import 'mdui/quill.core.css';
@import 'mdui/quill.snow.css';
步骤3：
在小程序富文本中加入 class=“ql-editor”，如下：
<rich-text :nodes="article" class="ql-editor"></rich-text>
再次运行即可。
参考
Vue-Quill-Editor编辑器的富文本，在uniapp开发的小程序显示错误
ruoyi若依后台管理系统-学习笔记-前后端分离项目中下拉框验证失效(代码片段)
RuoYi若依前后端分离项目-下拉框验证失效BUG效果修复对比bug代码修复后治本之法代码是用若依生成的，所以起初我一直怀疑是我的表有问题，或者若依对下拉列表的验证不支持？？？虽然我口中默念着“这不... 查看详情
若依管理系统(前后端分离版)部署并实现持续发布(代码片段)
若依管理系统是基于SpringBoot的权限管理系统，可以用它作为基础构建自己的后台管理系统。这个项目在Gitee上有1.8万个star。它有3个版本，分别是单体版、前后端分离版、微服务版。这次部署的是基于SpringBoot+Vue前后端... 查看详情
ruoyi(若依开源框架)-前后端分离版-前端流程简单分析(代码片段)
RuoYi(若依开源框架)-前后端分离版-前端流程简单分析项目结构├──build//构建相关├──bin//执行脚本├──public//公共文件│├──favicon.ico//favicon图标│└──index.html//html模板├──src//源代码│├──api//所有请求│├──... 查看详情
ruoyi(若依开源框架)-前后台分离版-后端流程简单分析(代码片段)
RuoYi(若依开源框架)-前后台分离-后端流程简单分析【项目结构】├──common//工具类│└──annotation//自定义注解│└──config//全局配置│└──constant//通用常量│└──core//核心控制│└──enums//通用枚举│└──exception//... 查看详情
分享两款智慧物业系统源码，前后端分离，前端vue，uni-app框架
分享两款智慧物业管理系统源码，源码免费分享，需要源码学习参考的小伙伴可以私信我。▶▶▶1：Java智慧物业管理系统源码(App+业主端微信小程序+物业端H5)智慧物业介绍：一、技术架构基于SpringCloud微服... 查看详情
ruoyi-vue若依前后端分离版代码生成(代码片段)
...单 2、新增菜单六、生成结束本文主要讲解关于 Ruoyi-Vue若依前后端分离版 基于代码生成的新建模块的添加。一、新建数据表注①：在原Ruoyi数据库的基础上进行新建注②：若依建表有个要求：表字段 和 表，... 查看详情
若依前后端分离代码生成修改(代码片段)
修改若依代码生成模块目标:多级目录情况下实现模块名/mvc名[controller/…]/功能名/XXXController原格式:多级目录:模块名/功能名/mvc名[controller/…]/xxxController修改共分为两部分:文件路径和模板代码中的引用路径若依代码生成配置1.修... 查看详情
ruoyi-vue（若依前后端分离版本）环境搭建用eclipse安装redis后端配置配置node环境前端配置
本地部署ruoyi-vue前后端分离版后端配置下载源码并数据库建表安装redis后端配置完成，运行RuoYi-Vue-master\\ruoyi-admin\\src\\main\\java\\com\\ruoyi下的RuoYiApplication.java文件启动前端配置配置node环境在E:\\eclipse\\spaceone\\RuoYi-Vue-master文件路... 查看详情
若依框架（前后端分离版本）总结(代码片段)
...东西。再者基础上去开发。所以还是自我做个总结吧。2.若依框架的下载及使用官方文档已经写的很详细了。若依框架前后端分离版本官网下载地址（1）环境部署 记得装好node（2）后端运行记得先导入数据库脚本... 查看详情
若依前后端分离版本（rouyi-vue）框架使用redis集群(代码片段)
更改application.yml配置，注释掉redis下面的host和port，增加cluster节点及其子节点nodes，node值为以逗号分隔的多个节点配置，如ip1:port1,ip2:port2,ip3:port3,也可以用每行一个配置的形式（配置更清晰），每行配... 查看详情
若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由(代码片段)
若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由若依框架VUE前端界面，登录后默认跳转至动态路由第一路由（第一个子菜单）一、登录后跳转第一路由界面二、设置路由的首页路径，方便后续的... 查看详情
若依框架（前后端分离）打war包部署到linux(代码片段)
一、前端部署1.找到ruoyi-ui目录。 2.安装依赖。 npminstall3.执行以下操作，解决npm下载速度慢的问题。 npminstall--registry=https://registry.npmmirror.com4.修改vue.config.js,若后端采用的是默认8080端口，则不用... 查看详情
若依配置教程若依前后端分离版部署到服务器nginx（windows版）(代码片段)
搭建若依环境要部署到服务器上，首先要在本地运行若依系统文章目录搭建若依环境后端部署1.在application.yml中修改后台端口，这里默认是8080。2.在application-druid.yml中修改正式环境数据库。3.后端打包部署前端部署下载安... 查看详情
若依管理系统前后端分离版基于elementui和springboot怎样实现excel导入和导出
场景使用若依前后端分离版实现Excel的导入和导出。前端:Vue+ElementUI后端:SpringBoot+POI+Mysql注：关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现Excel导入点击导入按钮时的效果 选中Excel后 首先是前... 查看详情
若依前后端部署之后验证码不显示(代码片段)
大家好，我是雄雄，欢迎关注微信公众号：👉雄雄的小课堂👈。最近的几天都在搞publiccms的内容，从0到1实现，在花费了大量精力下，终于将一个门户站完完全全的实现了，且还可以自定义扩... 查看详情
idea启动若依前后分离版报错captchacontroller
整体的报错信息org.springframework.beans.factory.UnsatisfiedDependencyException:Errorcreatingbeanwithname‘captchaController’:Unsatisfieddependencyexpressedthroughfield‘configService’;nestedexceptionisorg.spri 查看详情
ruoyi(若依开源框架)-前后台分离版-idea搭建运行
若依-前后台分离版-idea搭建运行环境及技术JDK>=1.8(推荐1.8版本)Mysql>=5.7.0(推荐5.7版本)Redis>=3.0Maven>=3.0Node>=10SpringBoot+SpringSecurity+MyBatis+Jwt+Vue（1）系统 查看详情
建议收藏毕设/私活/大佬必备，一个挣钱的标准开源前后端分离springboot+vue+redis+springsecurity脚手架--若依框架(代码片段)
目录java毕业设计项目《100套》推荐订阅 前言：主要特性功能：内置功能模板：本地运行系统：后端运行: 前端运行：必要配置：项目运行截图：登录：首页： 菜单模块：用户绑定角色、... 查看详情