first commit

zhiqim_ui/document/tutorial/uim/tool/zeditor.htm

@@ -0,0 +1,106 @@
+<#def title = "富文本编辑器"/>
+<#def keyword = "ZhiqimUI"/>
+<#def desc = " 实现源码编辑、撤销、重做、字体样式、文本对齐、超链接、图片上传、复制粘贴等功能。"/>
+<#def prevUrl = "uploadLarge.htm"/>
+<#def nextUrl = "qrcode.htm"/>
+${zhiqim_com_head()}
+<#var zRTEditor.css=context.getRootPath("/src/zRTEditor/zRTEditor.css")/>
+<#var zRTEditor.js=context.getRootPath("/src/zRTEditor/zRTEditor.js")/>
+${Styles.src(zRTEditor.css)}
+${Scripts.src(zRTEditor.js)}
+${zhiqim_com_head_main()}
+${zhiqim_com_head_end()}
+
+${zhiqim_com_mobileUI_scrollJs()}
+${zhiqim_com_body()}
+${zhiqim_com_topnav("ui")}
+
+<!--容器开始 -->
+<div id="container" class="container">
+
+${zhiqim_com_container_ui("ZmUI", "tool", "zeditor")}
+
+<!--主体-->
+<div id="mainbody" class="mainbody">
+
+${zhiqim_com_breadcrumb("UI", "ZmUI", "工具", "富文本编辑器")}
+
+<!-- content开始 -->
+<div id="mobileUI_content" class="content">
+
+<!-- 左侧详情 -->
+<div class="mobileUI-left">
+
+<#-- 标题 -->
+<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
+    <p class="z-text-blue">富文本编辑器：</p>
+    <p class="z-color-333" style="text-indent:38px;">
+        实现源码编辑、撤销、重做、字体样式、文本对齐、超链接、图片上传、复制粘贴等功能。
+    </p>
+</div>
+
+<#-- 一、示例样式 -->
+<div class="tutorial title">一、示例</div>
+
+<table class="z-table z-bordered z-pd10">
+<tr bgcolor="#f5f5f5">
+    <td width="">效果预览</td>
+    <!--
+    <td width="50%">代码</td>
+    -->
+</tr>
+<tr>
+    <td class="example">
+    <script>
+        Z.onload(function()
+        {
+            var editor = new Z.ZhiqimEditor();
+            editor.setId("test");
+            editor.setAjaxClass("com.zhiqim.zhiqim.ui.FteUploadImagePresenter");
+            editor.execute();
+        });
+    </script>
+    <textarea id="test" name="test" class="z-textarea z-w100p z-h500"></textarea>
+    <button type="button" class="z-button z-mg-t15" onclick='Z("#result").html(Z("#test").val())'>点击查看输入内容</button>
+    
+    <div class="z-mg-t40 z-mg-b40">
+        <div>查看结果</div>
+        <pre id="result"></pre>
+    </div>
+    
+    </td>
+    <!--
+    <td><pre class="z-text-preline"></pre></td>
+    -->
+</tr>
+</table>
+</div>
+
+<!-- 右侧demo ZmUI代码 -->
+${zhiqim_turorial_ZmUI_demo_start()}
+<div class="z-bar-top">
+    <a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
+    <div class="z-title">ZhiqimUI.mobile</div>
+</div>
+<div class="z-bar-bottom">
+    <a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
+    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
+    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
+    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
+</div>
+<div class="z-container">
+    <div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
+</div>
+${zhiqim_turorial_ZmUI_demo_end()}
+
+<!-- content结束 -->
+</div>
+
+${zhiqim_com_chapter()}
+<!-- 主体结束  -->
+</div>
+
+<!-- 容器结束  -->
+</div>
+
+${zhiqim_com_footer()}