richtext ui.richtext

富文本编辑器

<div class="ui-richtext editor">
    <div class="head">
        <ul>
            <li class="ctr-size">
                <a class="ico" href="javascript:;"></a>
                <div class="dropdown">
                    <a class="smaller" href="javascript:;" data-size="2">小号
                        <em>14px</em>
                    </a>
                    <a class="small" href="javascript:;" data-size="3">中号
                        <em>16px</em>
                    </a>
                    <a class="middle" href="javascript:;" data-size="4">大号
                        <em>18px</em>
                    </a>
                    <a class="big" href="javascript:;" data-size="5">超大号
                        <em>24px</em>
                    </a>
                </div>
            </li>
            <li class="ctr-bold">
                <a class="ico" href="javascript:;"></a>
            </li>
            <li class="ctr-italic">
                <a class="ico" href="javascript:;"></a>
            </li>
            <li class="ctr-line">
                <a class="ico" href="javascript:;"></a>
            </li>
            <li class="ctr-color">
                <a class="ico" href="javascript:;"></a>
            </li>
            <li class="ctr-bgcolor">
                <a class="ico" href="javascript:;"></a>
            </li>
            <li class="ctr-align">
                <a class="ico" href="javascript:;"></a>
                <div class="dropdown" style="display: none;">
                    <a class="left" href="javascript:;" data-align="left"></a>
                    <a class="middle" href="javascript:;" data-align="center"></a>
                    <a class="right" href="javascript:;" data-align="right"></a>
                </div>
            </li>
        </ul>
    </div>
    <div class="content">
        <div class=" editable" contenteditable="true">
            <div style="text-align: right;">
                <span style="color: rgb(128, 0, 0); font-size: xx-large;">this</span>
            </div>
            <div>
                <font size="6" color="#ff00ff">is</font>
            </div>
            <div style="text-align: center;">
                <font size="6">a</font>
            </div>
            <div style="text-align: right;">
                <font size="6" color="#ff0000">test</font>
            </div>
        </div>
    </div>
    <textarea name="richtext">&lt;div style="text-align: right;"&gt;&lt;span style="color: rgb(128, 0, 0); font-size: xx-large;"&gt;this&lt;/span&gt;&lt;/div&gt; &lt;div&gt;&lt;font size="6" color="#ff00ff"&gt;is&lt;/font&gt;&lt;/div&gt;&lt;div style="text-align: center;"&gt;&lt;font size="6"&gt;a&lt;/font&gt;&lt;/div&gt;&lt;div style="text-align: right;"&gt;&lt;font size="6" color="#ff0000"&gt;test&lt;/font&gt;&lt;/div&gt;</textarea>
</div>

• 使用richtext控件时会自动生成样式
• 所有richtext控件需遵循这样的一个结构

呈现样式

具体效果可参见 http://www.kuaizhan.com/ui/ui-create

创建一个richtext

使用接口 ui.richtext 可以动态地创建一个富文本编辑器控件

参数（以JS Object形式给出）：
    name: input hidden标签的name
    value: 内容html
    theme: 为空则使用默认样式，设置为simple则使用简化样式
    class: 设置富文本编辑器div包裹的class，用于自定义样式

示例代码:

//richtext
var form = $("#js-form-richtext"),
    placeholder = $("#js-put-richtext"),
    //生成富文本编辑器html
    rt = ui.richtext.create({
        name: "richtext",
        value: '<div style="text-align: right;"><span style="color: rgb(128, 0, 0); font-size: xx-large;">this</span></div> <div><font size="6" color="#ff00ff">is</font></div><div style="text-align: center;"><font size="6">a</font></div><div style="text-align: right;"><font size="6" color="#ff0000">test</font></div>'
    });

placeholder.replaceWith(rt);
//绑定对应的事件
ui.richtext.init(form);
//对应的数据处理
form.on("change", "textarea[name='richtext']", function(e, v) {
    console.log(v);
});