示例 · 云静Admin TP5.1

## 演示地址：详见：[http://tp51admin.iyunj.cn/admin](http://tp51admin.iyunj.cn/admin) ![](https://img.kancloud.cn/c9/2b/c92b19c1f517942922aef3abfe116e94_1920x903.png) > 单独引用单行文本框和富文本，代码示例如下： ```html {extend name="$adminPage"} {block name="headStyle"} <style type="text/css"> .field-box { padding: 15px 0; } .field-box:not(:first-child) { border-top: 1px dashed #c2c2c2; } .field-box .title { margin-bottom: 15px; } </style> {/block} {block name="content"} <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-body layui-form" lay-filter="test_form">  <div class="field-box text"> <div class="title">单行文本框示例</div> <div class="control"></div> <div class="btn-box" data-field-key="text_key"> <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="你好">设置单行文本框示例值为：你好 </button> <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取单行文本框示例值</button> </div> </div>  <div class="field-box checkbox"> <div class="title">复选框示例</div> <div class="control"></div> <div class="btn-box" data-field-key="checkbox_key"> <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="2">设置复选框示例值为：香蕉 </button> <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取复选框示例值</button> </div> </div>  <div class="field-box editor"> <div class="title">富文本示例</div> <div class="control"></div> <div class="btn-box" data-field-key="editor_key"> <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="<p>你好</p>">设置富文本示例值为：<p>你好</p></button> <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取富文本示例值</button> </div> </div>  <div class="field-box markdown"> <div class="title">Markdown示例</div> <div class="control"></div> <div class="btn-box" data-field-key="markdown_key"> <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="## 你好"> 设置Markdown示例值为：## 你好 </button> <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取Markdown示例值</button> </div> </div>  <div class="field-box btn-box"> <button type="button" class="layui-btn layui-btn-sm btn-clear-val">清空所有字段值</button> <button type="button" class="layui-btn layui-btn-sm btn-reset-val">重置所有字段值</button> <button type="button" class="layui-btn layui-btn-sm btn-all-val">获取所有字段值</button> </div> </div> </div> </div> {/block} {block name="script"} <script type="text/javascript"> layui.use(['yunj', "jquery", "validate"], function () { let win = window; let doc = document; let $ = layui.jquery; let validate = layui.validate; class SingleField { constructor() { this.formId = "test_form"; this.formFieldObj = {}; this.init(); } init() { let that = this; that.setText(); that.setCheckbox(); that.setEditor(); that.setMarkdown(); that.setEventBind(); } // 设置单行文本框 setText() { let that = this; // 配置项 let options = { formId: that.formId, key: "text_key", args: { default: "初始值", verifyTitle: "单行文本框" } }; yunj.formField("text", options).then(field => { // 指定父容器渲染 return field.render(`.field-box.text .control`); }).then(field => { // 保存字段对象 that.formFieldObj[options.key] = field; }).catch(err => { console.log(err); }); } // 设置复选框 setCheckbox() { let that = this; // 配置项 let options = { formId: that.formId, key: "checkbox_key", args: { default: 1, options: { 1: "苹果", 2: "香蕉", 3: "西瓜" }, verifyTitle: "复选框" } }; yunj.formField("checkbox", options).then(field => { // 指定父容器渲染 return field.render(`.field-box.checkbox .control`); }).then(field => { // 保存字段对象 that.formFieldObj[options.key] = field; }).catch(err => { console.log(err); }); } // 设置富文本 setEditor() { let that = this; // 配置项 let options = { formId: that.formId, key: "editor_key", args: { default: "富文本初始值", verifyTitle: "富文本" } }; yunj.formField("editor", options).then(field => { // 指定父容器渲染 return field.render(`.field-box.editor .control`); }).then(field => { // 保存字段对象 that.formFieldObj[options.key] = field; }).catch(err => { console.log(err); }); } // 设置Markdown setMarkdown() { let that = this; // 配置项 let options = { formId: that.formId, key: "markdown_key", args: { default: "Markdown初始值", verifyTitle: "Markdown" } }; yunj.formField("markdown", options).then(field => { // 指定父容器渲染 return field.render(`.field-box.markdown .control`); }).then(field => { // 保存字段对象 that.formFieldObj[options.key] = field; }).catch(err => { console.log(err); }); } // 事件绑定 setEventBind() { let that = this; // 根据字段对象设置单个字段值 $(".field-box .btn-box .btn-set-val").on("click", function () { let fieldKey = $(this).parents(".btn-box").eq(0).data("fieldKey"); let fieldObj = that.formFieldObj.hasOwnProperty(fieldKey) ? that.formFieldObj[fieldKey] : null; if (!fieldObj) { alert(`字段key=[${fieldKey}]还未完成渲染`); return; } let value = $(this).data("value"); fieldObj.setValue(value); }); // 根据字段对象获取单个字段值 $(".field-box .btn-box .btn-get-val").on("click", function () { let fieldKey = $(this).parents(".btn-box").eq(0).data("fieldKey"); let fieldObj = that.formFieldObj.hasOwnProperty(fieldKey) ? that.formFieldObj[fieldKey] : null; if (!fieldObj) { alert(`字段key=[${fieldKey}]还未完成渲染`); return; } alert(`字段[${fieldKey}] = ` + fieldObj.getValue()); }); // 根据表单id清空所有字段值 $(".field-box.btn-box .btn-clear-val").on("click", function () { yunj.formClear((that.formId)); }); // 根据表单id重置所有字段值 $(".field-box.btn-box .btn-reset-val").on("click", function () { yunj.formReset(that.formId); }); // 根据表单id获取所有字段值 $(".field-box.btn-box .btn-all-val").on("click", function () { let formData = yunj.formData(that.formId, validate); alert(JSON.stringify(formData)); }); } } $(doc).ready(function () { new SingleField(); }); }); </script> {/block} ```