{"id":3648,"date":"2016-07-27T15:00:29","date_gmt":"2016-07-27T11:00:29","guid":{"rendered":"http:\/\/dhtmlx.com\/blog\/?p=3648"},"modified":"2026-04-03T15:33:26","modified_gmt":"2026-04-03T12:33:26","slug":"custom-item-dhtmlxform-example-ckeditor-integration","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/custom-item-dhtmlxform-example-ckeditor-integration\/","title":{"rendered":"Custom Item in dhtmlxForm by the Example of CKEditor Integration"},"content":{"rendered":"

\n

\n
\n \n <\/path>\n <\/svg>\n\n INFO\n <\/div>\n\n
\n

\n If you are using an outdated version of DHTMLX Suite 5 and require the documentation for it, \n please contact us<\/a>,
and we will send it to you.\n <\/p>\n <\/div>\n <\/div>\n
\nUpdate: Now DHTMLX has its own WYSIWYG editor – Rich Text Editor<\/a> launched in December 2018.<\/strong><\/p>\n

Using of DHTMLX UI components goes beyond the standard functionality described in docs. We’d like to share a simple way of adding a custom item in dhtmlxForm control. For more informative demonstration, we’ll integrate CKEditor<\/a>, a popular WYSIWYG Editor, with our Form<\/a>.<\/p>\n

\"CKEditor<\/p>\n

Each item requires a number of basic functions that are called depending on operations, in particular:<\/p>\n

– render<\/strong> is an initial item rendering method that is called 1 time. You can also specify any configuration settings here.<\/p>\n

– setValue<\/strong> is an internal method that sets up the value to an item at myForm.setFormData() and myForm.setItemValue() commands.<\/p>\n

– getValue<\/strong> returns the value of the item and is called at form\u2019s commands myForm.getItemValue() and myForm.getFormData()<\/p>\n

– additionally we need getFormData_[itemname] and getFormData_[itemname] wrappers for set\/getFormData<\/p>\n

Now we move on to the CKEditor settings:
\n
\nrender<\/em> – here we create a usual text area and call init of the CKEditor itself. Then we need to pass the parameters from formData to it, i.e.:<\/p>\n

CKEDITOR.replace<\/span>(<\/span>item._ckId,<\/span> {<\/span>
\n      width:<\/span> data.inputWidth<\/span>||<\/span>"auto"<\/span>,<\/span>
\n      height:<\/span> data.inputHeight<\/span>||<\/span>"auto"<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

In addition, we will add an event for CKEditor. It will call the onChange event of the form when the value in the editor will be changed. The onChange event will fire when the user will finish editing and move the mouse pointer out of the input.<\/p>\n

CKEDITOR.instances<\/span>[<\/span>item._ckId]<\/span>.on<\/span>(<\/span>"blur"<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n      var<\/span> v =<\/span> CKEDITOR.instances<\/span>[<\/span>item._ckId]<\/span>.getData<\/span>(<\/span>)<\/span>;<\/span>
\n      if<\/span> (<\/span>!<\/span>item._unloading &&<\/span> v !=<\/span> item._value)<\/span> {<\/span>
\n            item._value =<\/span> v;<\/span>
\n            item.getForm<\/span>(<\/span>)<\/span>.callEvent<\/span>(<\/span>"onChange"<\/span>,<\/span> [<\/span>item._idd,<\/span> item._value]<\/span>)<\/span>;<\/span>
\n      }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

To implement the possibility of working with several editors at once, we have added the item._ckId attribute and assigned a unique value to it.<\/p>\n

To set values in the editor, we use the following code:<\/p>\n

CKEDITOR.instances<\/span>[<\/span>item._ckId]<\/span>.setData<\/span>(<\/span>...)<\/span>;<\/span><\/div><\/div>\n

In order to get the values, the code below is used:<\/p>\n

CKEDITOR.instances<\/span>[<\/span>item._ckId]<\/span>.getData<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

To unload the editors, use the code as follows:<\/p>\n

CKEDITOR.instances<\/span>[<\/span>item._ckId]<\/span>.destroy<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

To set focus, apply the following method:<\/p>\n

CKEDITOR.document<\/span>.getById<\/span>(<\/span>item._ckId)<\/span>.focus<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

All other functions will be inherited from the standard input type.<\/p>\n

Thank you for reading our mini-tutorial! We hope that the given instructions were useful for you. Feel free to write your questions and comments below or in the forum topic<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Update: Now DHTMLX has its own WYSIWYG editor – Rich Text Editor launched in December 2018. Using of DHTMLX UI components goes beyond the standard functionality described in docs. …<\/p>\n","protected":false},"author":2,"featured_media":3649,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,43,31,14,10],"class_list":["post-3648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-dhtmlx-tips","tag-form","tag-tips","tag-dhtmlxsuite"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=3648"}],"version-history":[{"count":3,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3648\/revisions"}],"predecessor-version":[{"id":15355,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3648\/revisions\/15355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3649"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=3648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=3648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=3648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}