## 演示地址： 详见：[http://uadmin.yunj.net.cn/admin](http://uadmin.yunj.net.cn/admin)  > 单独引用单行文本框和富文本，代码示例如下： ```html {extend name="yunj@admin/public/iframe/layout"} {block name="head_style"} <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; } .field-box .control .yunj-input-inline { width: 100%; } </style> {/block} {block name="content"} <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-body "> <!-- 单行文本框 --> <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 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> <!-- 按钮区域 --> <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"], function () { let win = window; let doc = document; let $ = layui.jquery; class SingleField { constructor() { this.formId = "test_form"; this.formFieldObj = {}; this.init(); } init() { let that = this; that.setText(); that.setEditor(); that.setEventBind(); } // 设置单行文本框 setText() { let that = this; // 配置项 let options = { formId: that.formId, key: "text_key", args: { value: "初始值" } }; yunj.formField("text", options).then(field => { // 指定父容器渲染 field.render(`.field-box.text .control`).then(res => { }); // 保存字段对象 that.formFieldObj[options.key] = field; }); } // 设置富文本 setEditor() { let that = this; // 配置项 let options = { formId: that.formId, key: "editor_key", args: { value: "富文本初始值" } }; yunj.formField("editor", options).then(field => { // 指定父容器渲染 field.render(`.field-box.editor .control`).then(res => { }); // 保存字段对象 that.formFieldObj[options.key] = field; }); } // 事件绑定 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); alert(JSON.stringify(formData)); }); } } $(doc).ready(function () { new SingleField(); }); }); </script> {/block} ```