在⼩程序Editor编辑器中设置初始值，获取edotor的值
⼀.场景：直接在Edotor副⽂本编辑器中渲染数值,⽤于修改数据，可以直接编辑的那种，如图
图中的副⽂本编辑器中的值，就是初次拉去的数值填充到这⾥⾯的
⼆.下⾯介绍⼀下 怎样实现上⾯的(需要⽤到的⽅法，具体参考官⽅⽂档)
1. wxml部分(这些属性和⽅法官⽅⽂档中都有)
<editor
id="editor"
class="ql-container"
placeholder="{{placeholder}}"
bindinput="editorChange"
showImgSizeasp富文本编辑器
showImgToolbar
showImgResize
bindstatuschange="onStatusChange"
read-only="{{readOnly}}"
bindready="onEditorReady">
</editor>
2. js部分(这⾥只写了初始化的时候渲染数据的部分)
// 初始化富⽂本编辑器
onLoad: function (options) {
const goods_id = ds_id
},
// 页⾯加载获取详情
async getDetail(goods_id) {
const that = this;
// 获取数据的⽅法
const getVal = () => {
// todo ...
};
// 假设result就是返回的数值
let result = getVal();
// 初始化
that.editorCtx = t;
that.editorCtx.setContents({
html: result ,
success: function () {
console.log('insert html success')
}
})
}).exec();
}
到这⾥你的数值就能渲染到你的富⽂本编辑器中了
三. that.editorCtx.setContents 参数说明
四. wxml显⽰编辑的Icon
<view class="eidt-detail-images-container" >
<view class='wrapper'>
<view class='toolbar' bindtap="format">
<i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
<i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
<i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
<i class="iconfont icon-zitishanchuxian {{formats.strike ? 'ql-active' : ''}}" data-name="strike"></i>
<i class="iconfont icon-zuoduiqi {{formats.align === 'left' ? 'ql-active' : ''}}" data-name="align" data-value="left"></i>
<i class="iconfont icon-juzhongduiqi {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align" data-value="center"></i>
<i class="iconfont icon-youduiqi {{formats.align === 'right' ? 'ql-active' : ''}}" data-name="align" data-value="right"></i>
<i class="iconfont icon-zuoyouduiqi {{formats.align === 'justify' ? 'ql-active' : ''}}" data-name="align" data-value="justify"></i>
<i class="iconfont icon-line-height {{formats.lineHeight ? 'ql-active' : ''}}" data-name="lineHeight" data-value="2"></i>
<i class="iconfont icon-Character-Spacing {{formats.letterSpacing ? 'ql-active' : ''}}" data-name="letterSpacing" data-value="2em"></i>
<i class="iconfont icon-722bianjiqi_duanqianju {{formats.marginTop ? 'ql-active' : ''}}" data-name="marginTop" data-value="20px"></i>
<i class="iconfont icon-723bianjiqi_duanhouju {{formats.micon-previewarginBottom ? 'ql-active' : ''}}" data-name="marginBottom" data-value="20p x"></i>
<i class="iconfont icon-clearedformat" bindtap="removeFormat"></i>
<i class="iconfont icon-font {{formats.fontFamily ? 'ql-active' : ''}}" data-name="fontFamily" data-value="Pacifico"></i>
<i class="iconfont icon-fontsize {{formats.fontSize === '24px' ? 'ql-active' : ''}}" data-name="fontSize" data-value="24px"></i>
<i class="iconfont icon-text_color {{lor === '#0000ff' ? 'ql-active' : ''}}" data-name="color" data-value="#0000ff"></i>
<i class="iconfont icon-fontbgcolor {{formats.backgroundColor === '#00ff00' ? 'ql-active' : ''}}" data-name="backgroundColor" data-value="#00ff00" ></i>
<i class="iconfont icon-date" bindtap="insertDate"></i>
<i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
<i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
<i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
<i class="iconfont icon-undo" bindtap="undo"></i>
<i class="iconfont icon-redo" bindtap="redo"></i>
<i class="iconfont icon-outdent" data-name="indent" data-value="-1"></i>
<i class="iconfont icon-indent" data-name="indent" data-value="+1"></i>
<i class="iconfont icon-fengexian" bindtap="insertDivider"></i>
<i class="iconfont icon-format-header-1 {{formats.header === 1 ? 'ql-active' : ''}}" data-name="header" data-value="{{1}}"></i>
<i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
<i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>
<i class="iconfont icon-format-header-4 {{formats.header === 4 ? 'ql-active' : ''}}" data-name="header" data-value="{{4}}"></i>
<i class="iconfont icon-zitixiabiao {{formats.script === 'sub' ? 'ql-active' : ''}}" data-name="script" data-value="sub"></i>
<i class="iconfont icon-zitishangbiao {{formats.script === 'super' ? 'ql-active' : ''}}" data-name="script" data-value="super"></i>
<i class="iconfont icon-quanping"></i>
<i class="iconfont icon-shanchu" bindtap="clear"></i>
<i class="iconfont icon-direction-rtl {{formats.direction === 'rtl' ? 'ql-active' : ''}}" data-name="direction" data-value="rtl"></i>
</view>
<editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindinput="editorChange" showImgSize showImgToolbar showImgResize bind statuschange="onStatusChange" read-only="{{readOnly}}" bindready="onEditorReady"></editor>
</view>
</view>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论