TQEditor

pinyin 拼音 ​

拼音 ​

代码演示 ​

示shì 例lì

html 结构 ​

html
<span class='tq-mt-py'
      contenteditable='false'
      data-block-type='py'
      data-ed-value='{"pinyin":"shì lì","chinese":"示例"}'>
    <ruby>
        示<rt>shì</rt>
        例<rt>lì</rt>
    </ruby>
</span>

属性 ​

属性说明默认值
data-block-type类型py
data-ed-value内容，编辑时使用，示例：{"pinyin": "", "chinese": ""}-

田字格 ​

代码演示 ​

示例

html 结构 ​

html
<span class='tq-mt-tzg'
      contenteditable='false'
      data-block-type='tzg'
      data-ed-value='{"pinyin":"","chinese":"示例","showTZG":true}'>
    <span class='tq-mt-tz'>示</span>
    <span class='tq-mt-tz'>例</span>
</span>

属性 ​

属性说明默认值
data-block-type类型tzg
data-ed-value内容，编辑时使用，示例：{"pinyin": "", "chinese": "", "showTZG": true}-

拼音田字 ​

代码演示 ​

示shì例lì
 shì lì

html 结构 ​

html
<span
    class='tq-mt-pytzg'
    contenteditable='false'
    data-block-type='pytzg'
    data-ed-value='{"pinyin":"shì lì","chinese":"示例","showTZG":true}'>
        <ruby>
            <span class='tq-mt-tz'>示</span>
            <rt>shì</rt>
        </ruby>
        <ruby> 
            <span class='tq-mt-tz'>例</span><rt>lì</rt> 
        </ruby>
</span>

<span
    class='tq-mt-pytzg'
    contenteditable='false'
    data-block-type='pytzg'
    data-ed-value='{"pinyin":"shì lì","chinese":"","showTZG":true}'>
        <ruby>
            <span class='tq-mt-tz'>&nbsp;</span>
            <rt>shì</rt>
        </ruby>
        <ruby> 
            <span class='tq-mt-tz'>&nbsp;</span><rt>lì</rt> 
        </ruby>
</span>

属性 ​

属性说明默认值
data-block-type类型pytzg
data-ed-value内容，编辑时使用，示例：{"pinyin": "", "chinese": "", "showTZG": true}-