小程序
小游戏
企业微信
微信支付
扫描小程序码分享
关于editor组件中使用有序和无须列表出现的问题，
下图是利用editor组件的有序和无序排列编辑的界面
下面是跳转后利用rich-text展示出现的效果
问题：
在editor组件编辑的序号是与第一行文本内容对齐的，而rich-text组件显示内容的时候明显是不对齐的
如何自己设置editor组件中关于有序排列和无序排列的样式，使序号和后面内容之间不出现空格？
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
<!--pages/preview/preview.wxml-->
<
view
class
=
"warp"
>
"title"
>{{title}}</
"author"
>{{author}}</
"show-rich"
rich-text
"rich"
nodes
"{{nodes}}"
space
"nbsp"
></
</
button
type
"primary"
"btn"
bindtap
"clickToNotice"
>发布</
// pages/preview/preview.js
Page({
data: {
title:
""
,
author:
nodes:
},
onLoad:
function
(){
const that =
this
;
var
pages = getCurrentPages();
prevPage = pages[pages.length - 2];
that.setData({
title:prevPage.data.title,
author:prevPage.data.author,
nodes: prevPage.data.nodes
})
clickToNotice() {
wx.showToast({
'成功'
icon:
'success'
duration: 1500,
mask:
true
success:
() {
setTimeout(
wx.reLaunch({
url:
'/pages/workbench/workbench'
}, 1500);
}
/* pages/preview/preview.wxss */
.warp{
height
:
100%
display
: flex;
flex-
direction
: column;
padding
20
rpx;
.title{
text-align
left
15
font-size
40
word-wrap:break-word;
/* word-break: break-all; */
.author{
color
#aaa
35
.show-rich{
/* text-indent: 2em; */
line-height
1.5
.rich{
0
.btn{
margin
30
rpx
10px
我的nodes是从editor组件中的onContentChange获取的
// 获取内容
onContentChange(e) {
nodes: e.detail.html
console.log(that.data.nodes);
有完整代码贴出来吗？
https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
初步猜测有可能是 配置nodes的样式问题
添加
ul {
padding: 0;
margin: 0;
就可以解决了
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
<!--pages/preview/preview.wxml--><viewclass="warp"><viewclass="title">{{title}}</view><viewclass="author">{{author}}</view><viewclass="show-rich"><rich-textclass="rich"nodes="{{nodes}}"space="nbsp"></rich-text></view></view><buttontype="primary"class="btn"bindtap="clickToNotice">发布</button>// pages/preview/preview.jsPage({data: {title:"",author:"",nodes:""},onLoad:function(){const that =this;varpages = getCurrentPages();varprevPage = pages[pages.length - 2];that.setData({title:prevPage.data.title,author:prevPage.data.author,nodes: prevPage.data.nodes})},clickToNotice() {wx.showToast({title:'成功',icon:'success',duration: 1500,mask:true,success:function() {setTimeout(function() {wx.reLaunch({url:'/pages/workbench/workbench',})}, 1500);}})}})/* pages/preview/preview.wxss */.warp{height:100%;display: flex;flex-direction: column;padding:20rpx;}.title{text-align:left;padding:15rpx;font-size:40rpx;word-wrap:break-word;/* word-break: break-all; */}.author{text-align:left;padding:15rpx;color:#aaa;font-size:35rpx;}.show-rich{/* text-indent: 2em; */word-wrap:break-word;font-size:35rpx;padding:15rpx;line-height:1.5;}.rich{padding:0;}.btn{margin:30rpx10px;}我的nodes是从editor组件中的onContentChange获取的
// 获取内容onContentChange(e) {const that =this;that.setData({nodes: e.detail.html})console.log(that.data.nodes);},有完整代码贴出来吗？
https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
初步猜测有可能是 配置nodes的样式问题
添加
ul {
padding: 0;
margin: 0;
}
就可以解决了