rich-text

富文本。

space 的合法值

nodes

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点

元素节点：type = node

文本节点：type = text

受信任的HTML节点及属性

全局支持class和style属性 注意：不支持id属性，节点详细说明查看 HTML 元素参考。

示例代码：

<!--pages/component/pages/rich-text/rich-text.mcml-->
<view class="container">
  <view class="statement">富文本。</view>
  <view class="cssname">nodes:array， space:nbsp</view>
  <view>
    <rich-text nodes="{{nodes_array}}" space="nbsp"></rich-text>
  </view>
  <view class="cssname">nodes:string， space:emsp</view>
  <view>
    <rich-text nodes="{{nodes_html}}" space="emsp">abc</rich-text>
  </view>
</view>

// pages/component/pages/rich-text/rich-text.js
Page({
  data: {
    nodes_html: '<div style="background-color:#eee">HTML 元素参考</div><table style="width:100%"><colgroup><col width="90px"></col><col></col></colgroup><thead><tr><th>元素</th><th>示例</th></tr></thead><tbody><tr><td colspan="2" class="classify">内容分区</td></tr><tr><td>&lt;address&gt;<br/>&lt;article&gt;<br/>&lt;aside&gt;<br/>&lt;footer&gt;<br/>&lt;header&gt;<br/>&lt;h1&gt;<br/>&lt;h2&gt;<br/>&lt;h3&gt;<br/>&lt;h4&gt;<br/>&lt;h5&gt;<br/>&lt;h6&gt;<br/>&lt;main&gt;<br/>&lt;nav&gt;<br/>&lt;section&gt;<br/></td><td><article><header><h1>Choosing an Apple</h1></header><nav><ol><li><a href="#">Introduction</a></li><li>Criteria</li></ol></nav><main><p>Choosing an Apple</p></main><section><h2>Introduction</h2><aside><p>This document provides a guide to help with the important task of choosing the correct Apple.</p></aside></section><section><h2>Criteria</h2><aside><p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...</p></aside></section><footer><p><address><a href="mailto:example@example">example@example.com</a></address></p><p>© 2020 Gandalf</p></footer></article></td></tr><tr><td colspan="2" class="classify">文本内容</td></tr><tr><td>&lt;blockquote&gt;<br/>&lt;dd&gt;<br/>&lt;div&gt;<br/>&lt;dl&gt;<br/>&lt;dt&gt;<br/>&lt;figcaption&gt;<br/>&lt;figure&gt;<br/>&lt;hr&gt;<br/>&lt;li&gt;<br/>&lt;ol&gt;<br/>&lt;p&gt;<br/>&lt;pre&gt;<br/>&lt;ul&gt;<br/></td><td><ul><li>first item</li><li>second item</li><li>third item</li></ul><hr><p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p><hr><p>§2: The second rule of Fight Club is: Always bring cupcakes.</p><hr><figure><blockquote cite="https://www.huxley.net/bnw/four.html"><div><p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p></div></blockquote><figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption></figure><hr><dl><dt>Firefox</dt><dd>A free, open source, cross-platform, graphical web browserdeveloped by the Mozilla Corporation and hundreds of volunteers.</dd></dl><hr><pre>&lt;pre&gt;</pre></td></tr><tr><td colspan="2" class="classify">内联文本语义</td></tr><tr><td>&lt;a&gt;<br/>&lt;abbr&gt;<br/>&lt;b&gt;<br/>&lt;bdi&gt;<br/>&lt;bdo&gt;<br/>&lt;br&gt;<br/>&lt;cite&gt;<br/>&lt;code&gt;<br/>&lt;data&gt;<br/>&lt;dfn&gt;<br/>&lt;i&gt;<br/>&lt;kbd&gt;<br/>&lt;mark&gt;<br/>&lt;q&gt;<br/>&lt;rb&gt;<br/>&lt;rp&gt;<br/>&lt;rt&gt;<br/>&lt;rtc&gt;<br/>&lt;ruby&gt;<br/>&lt;s&gt;<br/>&lt;samp&gt;<br/>&lt;small&gt;<br/>&lt;span&gt;<br/>&lt;strong&gt;<br/>&lt;sub&gt;<br/>&lt;sup&gt;<br/>&lt;time&gt;<br/>&lt;u&gt;<br/>&lt;var&gt;<br/>&lt;wbr&gt;<br/></td><td><a href="https://www.morecross.cn">morecross.cn</a><hr><p>You can use <b>CSS</b> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p><hr><ul><li><bdi class="name">Evil Steven</bdi>: 1st place</li><li><bdi class="name">François fatale</bdi>: 2nd place</li><li><span class="name">تیز سمی</span>: 3rd place</li><li><bdi class="name">الرجل القوي إيان</bdi>: 4th place</li><li><span class="name" dir="auto">تیز سمی</span>: 5th place</li></ul><p>In the computer\'s memory, <br> this is stored as <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo></p><hr><p>Regular text. <code>This is code.</code> Regular text.</p><hr><p>New Products:</p><ul><li><data value="398">Mini Ketchup</data></li><li><data value="399">Jumbo Ketchup</data></li><li><data value="400">Mega Jumbo Ketchup</data></li></ul><hr><p><i>In HTML 5, what was previously called</i><em>block-level</em> content is now called <em>flow</em> content.</p><hr><p><mark>Save</mark> the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p><hr><p>Everytime Kenny is killed, Stan will announce<q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">Oh my God, you/they killed Kenny!</q>.</p><hr><ruby><rb>漢</rb>字<rp>(</rp><rt>han</rt>zi<rp>)</rp><rtc>San Francisco</rtc></ruby><hr><s>Today\'s Special: Salmon</s> SOLD OUT<br><hr><p>Regular text. <samp>This is sample text.</samp> Regular text.</p><hr><p><small>The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.</small></p><p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p><hr><p>The chemical formula of water: H<sub>2</sub>O</p><p>This text is <sup>superscripted</sup></p><hr><p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p><hr><p>You could use this element to highlight <u>speling</u> mistakes, so the writer can <u>corect</u> them.</p><hr><p> A simple equation: <var>x</var> = <var>y</var> + 2 </p><hr><p>https://www<wbr>.morecross<wbr>.cn<wbr>/home</p></td></tr><tr><td colspan="2" class="classify">图片和多媒体</td></tr><tr><td>&lt;audio&gt;<br/>&lt;img&gt;<br/>&lt;track&gt;<br/>&lt;video&gt;<br/></td><td><img class="fit-picture" width="100%" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt="Grapefruit slice atop a pile of other slices"><hr><audio style="width:100%" controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">Your browser does not support the<code>audio</code> element.</audio><hr><video controls playsinline webkit-playsinline width="100%"><source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm"><source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">Sorry, your browser doesn\'t support embedded videos.</video></td></tr><tr><td colspan="2" class="classify">内嵌内容</td></tr><tr><td>&lt;iframe&gt;<br/>&lt;object&gt;<br/>&lt;picture&gt;<br/>&lt;source&gt;<br/></td><td><iframe id="inlineFrameExample" title="Inline Frame Example" width="100%" height="200" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"></iframe><hr><object type="application/pdf" data="https://interactive-examples.mdn.mozilla.net/media/examples/In-CC0.pdf" width="200" height="200"></object><hr><picture><source srcset="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg" media="(min-width: 80px)"><img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg" alt="" /></picture><hr></td></tr><tr><td colspan="2" class="classify">编辑标识</td></tr><tr><td>&lt;del&gt;<br/>&lt;ins&gt;<br/></td><td><p>“You\'re late!”</p><del><p>“I apologize for the delay.”</p></del><ins cite="../howtobeawizard.html" datetime="2018-05"><p>“A wizard is never late …”</p></ins></td></tr><tr><td colspan="2" class="classify">表单</td></tr><tr><td>&lt;fieldset&gt;<br/>&lt;legend&gt;<br/>&lt;label&gt;<br/>&lt;meter&gt;<br/>&lt;progress&gt;<br/></td><td><fieldset><legend>Choose your favorite monster</legend><input type="radio" id="kraken" name="monster"><label for="kraken">Kraken</label><br/><input type="radio" id="sasquatch" name="monster"><label for="sasquatch">Sasquatch</label><br/><input type="radio" id="mothman" name="monster"><label for="mothman">Mothman</label></fieldset><hr><div class="preference"><label for="cheese">Do you like cheese?</label><input type="checkbox" name="cheese" id="cheese"></div><hr><p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p><hr><progress value="70" max="100">70 %</progress></td></tr><tr><td colspan="2" class="classify">交互</td></tr><tr><td>&lt;details&gt;<br/>&lt;summary&gt;<br/></td><td><details open><p>Requires a computer running an operating system. The computermust have some memory and ideally some kind of long-term storage.An input device as well as some form of output device isrecommended.</p></details></td></tr><tr><td colspan="2" class="classify">过时的和弃用的元素</td></tr><tr><td>&lt;big&gt;<br/></td><td><p>This is the first sentence. <span style="font-size:1.2em">This wholesentence is in bigger letters.</span></p></td></tr></tbody><tfoot><tr><td>footer td 1</td><td>footer td 2</td></tr></tfoot></table>',
    nodes_array: [],
  },
  onLoad: function (options) {
    var array = [{
        name: 'div',
        attrs:{
          class: 'rich-text'
        },
        children: [{
            name: 'h1'
        }, {
            name: 'p',
            children: [{
                type: 'text',
                text: 'Hello '
            }, {
                type: 'node',
                name: 'i',
                attrs: {
                    style: 'color:red;'
                },
                children: [{
                    type: 'text',
                    text: 'MoreCross'
                }]
            }, {
                type: 'text',
                text: '&nbsp;!'
            }]
        }]
    }];
    this.setData({
      nodes_array: array,
      nodes_array_string: JSON.stringify(array, null, 2)
    })
  }
})

/* pages/component/pages/rich-text/rich-text.mcss */
.rich-text{
  color: blue;
}
.rich-text h1{
  color: red;
}
.classify{
  text-align: center;
  background-color: #eee;
}