记录一次富文本回显问题

在这里插入图片描述

使用的若依后台管理系统,已经继承了百度富文本,首先本地上传图片回显需要添加如下配置:
在这里插入图片描述
即在tomcat中配置图片的存储路径。如果是部署在服务端,则配置在tomcat中conf目录下的server.xml文件中:
在这里插入图片描述
现在图片回显是正常的,但是回显不展示图片,到数据库一看发现存入的属性不完整:

有缺失的
<p><img title="3200616279008.jpg" alt="3200616279008.jpg"/></p>
完整的
<p><img src="/fgn/fgnUpload/baidu/image/3200616279008.jpg" title="3200616279008.jpg" alt="3200616279008.jpg"/></p>

原因找到了,上传图片的时候没有将src属性保存,所以导致回显的时候图片无法展示,去网上查了查,将xss过滤开关关闭以后就正常了。
在这里插入图片描述
将xss的属性enabled改为false之后新增富文本图片就正常了

### 富文本的实现方式 富文本是指在前端界面中展示已保存的富文本内容的过程。这一过程可能涉及多个技术细节,包括但不限于组件初始化、数据绑定以及异步处理等问题。 #### 组件初始化后的赋值 如果富文本是以组件形式存在,则需要确保在其编辑器实例生成后再进行赋值操作。这是因为富文本编辑器通常依赖于 DOM 的完全加载才能正常工作。若提前赋值可能导致数据无法正确示[^2]。 可以通过监听编辑器生成事件来完成此操作: ```javascript const handleCreated = (editor) => { editorRef.value = editor; // 记录 editor 实例 content.value = props.modelValue; // 将外部传入的内容赋值到富文本编辑器中 }; ``` #### 使用 `nextTick` 解决异步渲染问题 对于某些场景下可能出现的数据未及时更新的情况,可以借助 Vue 提供的 `nextTick` 方法,在页面数据渲染完成后执行特定逻辑[^3]。这种方式能够有效解决因异步而导致的失败问题: ```javascript import { nextTick } from 'vue'; nextTick(() => { show(); // 假设这是用于刷新视图的方法 }); ``` #### 图片和视频的最大宽度调整 针对富文本中的图片或视频过大影响布局的问题,可以在获取原始 HTML 后对其进行预处理,设置合理的样式属性以适应不同设备屏幕尺寸[^5]。具体实现如下所示: ```javascript function setImgWidth(vhtml) { const tempDiv = document.createElement('div'); tempDiv.innerHTML = vhtml; [...tempDiv.querySelectorAll('img')].forEach((img) => { img.style.maxWidth = '100%'; img.style.height = 'auto'; }); [...tempDiv.querySelectorAll('video')].forEach((v) => { v.style.maxWidth = '100%'; v.style.height = 'auto'; }); return tempDiv.innerHTML; } ``` 通过上述方法可保证即使原生 HTML 中定义了固定大小,最终呈现效果仍能保持良好用户体验。 #### 取值与调用编辑器的方式 为了满足不同的业务需求,可以从多种角度出发设计取值接口[^4]。以下是几种常见模式及其特点对比表: | 方式 | 描述 | |------------|--------------------------------------------------------------------------------------| | 纯净文本 | 仅提取文字部分,忽略所有标签结构 | | 完整HTML | 返整个文档树,保留全部格式信息 | | 自定义过滤版 | 根据实际应用场景筛选必要字段 | 每种策略都有其适用范围,请依据项目具体情况灵活选用最合适的选项。 --- ###
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值