使用编辑器控件，如何使用从数据库获取数据的预定义字段编写 html 文档？

Question

使用 Kendo UI JQuery 编辑器控件，如何将 html 文档编写为具有从数据库获取数据的预定义字段的模板？

例如，如果用户输入姓名：[fname] [lname] 它被数据库中的名字和姓氏数据替换。我用 PHP.

Answer 1

编辑提供reference to the HTML element which represents the editor's content area。因此，您可以在编辑器的内容中设置 DOM 元素的内容：

    <input id="ddl" />

<textarea id="editor" rows="10" cols="30" style="width:100%; height:450px" aria-label="editor">
  <div >
    <div>Hello <span id="fname" contenteditable="true">___</span>,</div>
    </br>
  <div>your email is: <span contenteditable="true" id="email">___</span></div>
  </div>
</textarea>

<script>
$(document).ready(function () {
  // create Editor from textarea HTML element with default set of tools
  $("#editor").kendoEditor({
    resizable: {
      content: true,
      toolbar: true
    }
  });

  //make the editor content non-editable and only some elements editable by setting the contenteditable attribute for the desired elements
  var editor = $("#editor").data("kendoEditor"),
      editorBody = $(editor.body);

  editorBody.attr("contenteditable", false)

  $("#ddl").kendoDropDownList({
    optionLabel:"--Select user--",
    dataTextField:"user",
    dataValueField:"id",
    dataSource:[
      {id:1, user: "John", fname:"John",lname:"Doe",email:"john@email.com"},
      {id:2, user: "Jane", fname:"Jane",lname:"Smith",email:"jane@email.com"}
    ],
    change:function(e){
      var item = e.sender.dataItem();
      editorBody.find("#fname").text(item.fname);
      editorBody.find("#email").text(item.email);
    }
  })
});
</script>

Here is an example

使用编辑器控件，如何使用从数据库获取数据的预定义字段编写 html 文档？

Using the Editor control, How I can write html document with predefined fields that get data from database?

telerik

kendo-ui