"html富文本"组件:<richtext> —— 快应用原生组件






<template>
    <div class="container-full">
        <richtext type="html">{{content}}</richtext>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            content: <div class="item-content"  style="background-color: #FFFFFF">
             <style>h1{color: red;}</style>
             <p class="item-title">h1</p>
             <h1>文本测试</h1>
             <p class="item-title">h2</p>
             <h2>文本测试</h2>
             <p class="item-title">h3</p>
             <h3>文本测试</h3>
             <p class="item-title">h4</p>
             <h4>文本测试</h4>
             <p class="item-title">h5</p>
             <h5>文本测试</h5>
             <p class="item-title">h6</p>
             <h6>文本测试</h6>

             <h3 class="item-title">mark标签</h3>
             You can use the mark tag to <mark>highlight</mark> text.
             <h3 class="item-title">del标签：被删除的文本</h3>
             <del>This line of text is meant to be treated as deleted text.</del>
             <h3 class="item-title">s标签：无用的文本</h3>
             <s>This line of text is meant to be treated as no longer accurate.</s>
             <h3 class="item-title">ins标签：额外插入的文本</h3>
             <ins>This line of text is meant to be treated as an addition to the document.</ins>
             <h3 class="item-title">u标签：为文本添加下划线</h3>
             <u>This line of text will render as underlined</u>
             <h3 class="item-title">small标签：小号文本</h3>
             <small>This line of text is meant to be treated as fine print.</small>
             <h3 class="item-title">文本强调</h3>
             <strong>This line of text is meant to be treated as fine print.</strong>
             <em>This line of text is meant to be treated as fine print.</em>

             <p class="item-title">a</p>
             <div>
               <a href="https://www.quickapp.cn/" style="color: #09ba07;text-decoration: underline">文本测试</a>
             </div>
             <p class="item-title">img</p>
             <div>
               <img src="https://bbs.quickapp.cn/template/dingzhi_x_oneplus/dingzhi/logo.png" style="width: 100%;"/>
             </div>
             <p class="item-title">p</p>
             <p>文本测试</p>
             <p class="item-title">span</p>
             <p><span>文本测试</span></p>
             <p class="item-title">strong</p>
             <p><strong>文本测试</strong></p>
             <p class="item-title">del</p>
             <p><del>文本测试</del></p>
             <p class="item-title">b</p>
             <p><b>文本测试</b></p>
             <p class="item-title">i</p>
             <p><i>文本测试</i></p>
           </div>
           }
<script>

扫码体验