Applet editor rich text editing and rich text parsing

Today, I tried to use it in an applet editor Rich text editor , Then use the details page rich-text To parse rich text html.

Download first editor Components , And put it in the project directory ,（ Component download address ）

After document storage , open richText.wxml You can modify the code according to your needs ,richText.js Empathy .

And then when you need to json Introduce in the file

"usingComponents": {
    "richText":"../../components/richText/richText"
},

In need of wxml Components used in

<richText 
  id='richText' 
  readOnly='{
   {readOnly}}'
  placeholder='{
   {placeholder}}' 
  formatDate='YY/MM/DD'
  buttonTxt=' preservation '
  bind:clearBeforeEvent='clearBeforeEvent'
  bind:clearSuccess='clearSuccess'
  bind:undo='undo'
  bind:restore='restore'
  bind:onEditorReady='onEditorReady' 
  bind:bindfocus='bindfocus' 
  bind:bindblur='bindblur' 
  bind:bindinput='bindinput' 
  bind:insertImageEvent='insertImageEvent' 
  bind:getEditorContent='getEditorContent'></richText>

Here are the methods and properties of components

readOnly                       Whether the editor is read-only

clearBeforeEvent          Callback before emptying editor content        

clearSuccess                Callback when emptying editor content succeeds        

undo                              Callback when the content is successfully revoked            

restore                           Callback when the content is restored successfully              

onEditorReady              Callback when editor initialization is complete , You can get component instances  

bindfocus                      Triggered when the editor is focused              

bindblur                          Trigger when the editor loses focus            

bindinput                        Triggered when editor input , Return rich text content in real time             

insertImageEvent           Call back when the insert picture button is clicked            

getEditorContent            Call back when the Save button is clicked , Return rich text content       

This is the rich text editor in the applet ：

Next, let's talk about , When you enter good information in the rich text editor and submit it to the cloud database , How to query and display data in the details page , At this time, we need to use the official rich-text Component . You can go to the official document to see the detailed properties of this component （ Portal ）.

Before getting the data on the details page , Let's first look at the data format submitted to the cloud database in the rich text editor ,

  What we want is html Format , use rich-text Component to resolve . In the look at details page, how to query data and render it to the page

<view class="warp">
			<view class="details">
			
				<view class="detailsContent">
					<rich-text nodes="{
   {html}}" ></rich-text>
				</view>
			</view>
</view>

const db = wx.cloud.database();// Call the database reference of the default cloud environment 
const app = getApp();
Page({
  data: {
    details:{}
  },
  onLoad: function(options) {
    let that=this;
    db.collection("details").doc(options.id).get().then(res=>{// Get the data set first , Query data ,  
    console.log(" Details :",res.data)
      this.setData({
        html: res.data[0].html.replace('<img ', '<img style="max-width:100%;height:auto;"'),
      })
    })
  },
})

You may see that .replace('<img ', '<img style="max-width:100%;height:auto;"'), This is for images added in rich text , The default will be very large . If you set it like this , The picture can be adapted .

This is the effect in the details page ：