## 演示地址： 詳見：[http://tp51admin.iyunj.cn/admin](http://tp51admin.iyunj.cn/admin)  > 單獨引用單行文本框和富文本，代碼示例如下： ```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>">設置富文本示例值為：&lt;p&gt;你好&lt;/p&gt;</button> <button type="button" class="layui-btn layui-btn-sm btn-get-val">獲取富文本示例值</button> </div> </div> <!-- markdown --> <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} ```