uni-app editor insertText 报Bug

uni-app editor insertText 报Bug

开发环境 版本号 项目创建方式
Windows 64 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

PC开发环境操作系统版本号：
64

HBuilderX类型：
正式

HBuilderX版本号：
3.1.2

手机系统：
Android

手机系统版本号：
Android 11

手机厂商：
小米

手机机型：
Mi10

页面类型：
vue

打包方式：
云端

项目创建方式：
HBuilderX

示例代码：

uniapp editor如果 :class="[textareaValueText ? ‘’ : (noteType == 1 ? ‘placeholderclass’ : ‘placeholderclass1’)]"

.placeholderclass { position: relative; &:after { position: absolute; content: ‘分享你的探店感受,推荐优质门店及体验实物产品~(最少50字)’; color: #CCCCCC; left: 0; top: 0; font-size: 30rpx; } } 不能这么模拟placeholder 吗？如果不这么模拟的话 默认的是斜的，如果这么模拟的话 insertText位置又不对


操作步骤：


uniapp editor如果 :class="[textareaValueText ? '' : (noteType == 1 ? 'placeholderclass' : 'placeholderclass1')]"

.placeholderclass {
position: relative;
&:after {
position: absolute;
content: '分享你的探店感受,推荐优质门店及体验实物产品~(最少50字)';
color: #CCCCCC;
left: 0;
top: 0;
font-size: 30rpx;
}
}
不能这么模拟placeholder 吗？如果不这么模拟的话 默认的是斜的，如果这么模拟的话  insertText位置又不对

预期结果：

uniapp editor如果 :class="[textareaValueText ? ‘’ : (noteType == 1 ? ‘placeholderclass’ : ‘placeholderclass1’)]"

.placeholderclass { position: relative; &:after { position: absolute; content: ‘分享你的探店感受,推荐优质门店及体验实物产品~(最少50字)’; color: #CCCCCC; left: 0; top: 0; font-size: 30rpx; } } 不能这么模拟placeholder 吗？如果不这么模拟的话 默认的是斜的，如果这么模拟的话 insertText位置又不对


实际结果：


uniapp editor如果 :class="[textareaValueText ? '' : (noteType == 1 ? 'placeholderclass' : 'placeholderclass1')]"

.placeholderclass {
position: relative;
&:after {
position: absolute;
content: '分享你的探店感受,推荐优质门店及体验实物产品~(最少50字)';
color: #CCCCCC;
left: 0;
top: 0;
font-size: 30rpx;
}
}
不能这么模拟placeholder 吗？如果不这么模拟的话 默认的是斜的，如果这么模拟的话  insertText位置又不对

更多关于uni-app editor insertText 报Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app editor insertText 报Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个关于uni-app editor组件placeholder样式和insertText定位的问题。通过CSS伪元素模拟placeholder确实会影响insertText的定位，因为绝对定位的伪元素不会影响编辑器内容流。

建议改用editor组件的placeholder属性来设置提示文本，这样不会影响insertText的位置：

<editor 
  :placeholder="noteType == 1 ? '分享你的探店感受...' : '其他提示文本'"
  :placeholder-style="'color:#CCCCCC;font-size:30rpx'"
></editor>
回到顶部