{"id":17911,"date":"2024-03-15T15:57:24","date_gmt":"2024-03-15T15:57:24","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/"},"modified":"2024-03-21T12:02:43","modified_gmt":"2024-03-21T12:02:43","slug":"how-to-use-the-rich-text-editor-kindeditor","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/","title":{"rendered":"How to use the rich text editor KindEditor?"},"content":{"rendered":"<p>To use the rich text editor KindEditor, you first need to download and include KindEditor&#8217;s JS and CSS files. Then, create a textarea element on the page as the editor&#8217;s input box.<\/p>\n<p>Next, after the page is loaded, initialize the KindEditor editor using JavaScript code. The specific steps are as follows:<\/p>\n<ol>\n<li>To include the JS and CSS files of KindEditor on the page, you can add the following code in the head tag to import the CSS file of KindEditor.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/css\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"kindeditor\/themes\/default\/default.css\"<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>To import the KindEditor JavaScript file, add the following code just before the closing body tag of the page.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"kindeditor\/kindeditor.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<ol>\n<li>Create a textarea element as the input box for the editor, and give it a unique id attribute. For example:<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">textarea<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"editor\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">textarea<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<ol>\n<li>After the page is fully loaded, use JavaScript code to initialize the KindEditor editor. For example:<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code>&lt;script type=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;\r\n    <span class=\"hljs-title class_\">KindEditor<\/span>.<span class=\"hljs-title function_\">ready<\/span>(<span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">K<\/span>) {\r\n        <span class=\"hljs-keyword\">var<\/span> editor = K.<span class=\"hljs-title function_\">create<\/span>(<span class=\"hljs-string\">'#editor'<\/span>);\r\n    });\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<p>This completes the initialization of the KindEditor editor. You can customize the style and functionality of the editor as needed by configuring parameters. For detailed configuration parameters, please refer to the official documentation of KindEditor.<\/p>\n<p>After the initialization is complete, you can use the editor object to manipulate the editor, such as setting content, getting content, and so on. You can set the content of the editor using the following code:<\/p>\n<pre class=\"post-pre\"><code>editor.<span class=\"hljs-title function_\">html<\/span>(<span class=\"hljs-string\">'&lt;p&gt;This is the content of the editor.&lt;\/p&gt;'<\/span>);\r\n<\/code><\/pre>\n<p>You can retrieve the content of the editor using the following code:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">var<\/span> content = editor.<span class=\"hljs-title function_\">html<\/span>();\r\n<\/code><\/pre>\n<p>Aside from setting and retrieving content, KindEditor also offers a wide range of APIs for handling images, inserting links, adding styles, and other operations. To learn more about these functions, you can refer to the official KindEditor documentation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To use the rich text editor KindEditor, you first need to download and include KindEditor&#8217;s JS and CSS files. Then, create a textarea element on the page as the editor&#8217;s input box. Next, after the page is loaded, initialize the KindEditor editor using JavaScript code. The specific steps are as follows: To include the JS [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-17911","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use the rich text editor KindEditor? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use the rich text editor KindEditor?\" \/>\n<meta property=\"og:description\" content=\"To use the rich text editor KindEditor, you first need to download and include KindEditor&#8217;s JS and CSS files. Then, create a textarea element on the page as the editor&#8217;s input box. Next, after the page is loaded, initialize the KindEditor editor using JavaScript code. The specific steps are as follows: To include the JS [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T15:57:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T12:02:43+00:00\" \/>\n<meta name=\"author\" content=\"Sophia Anderson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sophia Anderson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/\"},\"author\":{\"name\":\"Sophia Anderson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\"},\"headline\":\"How to use the rich text editor KindEditor?\",\"datePublished\":\"2024-03-15T15:57:24+00:00\",\"dateModified\":\"2024-03-21T12:02:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/\"},\"wordCount\":266,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/\",\"name\":\"How to use the rich text editor KindEditor? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T15:57:24+00:00\",\"dateModified\":\"2024-03-21T12:02:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use the rich text editor KindEditor?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\",\"name\":\"Sophia Anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"caption\":\"Sophia Anderson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to use the rich text editor KindEditor? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/","og_locale":"en_US","og_type":"article","og_title":"How to use the rich text editor KindEditor?","og_description":"To use the rich text editor KindEditor, you first need to download and include KindEditor&#8217;s JS and CSS files. Then, create a textarea element on the page as the editor&#8217;s input box. Next, after the page is loaded, initialize the KindEditor editor using JavaScript code. The specific steps are as follows: To include the JS [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T15:57:24+00:00","article_modified_time":"2024-03-21T12:02:43+00:00","author":"Sophia Anderson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Sophia Anderson","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/"},"author":{"name":"Sophia Anderson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30"},"headline":"How to use the rich text editor KindEditor?","datePublished":"2024-03-15T15:57:24+00:00","dateModified":"2024-03-21T12:02:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/"},"wordCount":266,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/","name":"How to use the rich text editor KindEditor? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T15:57:24+00:00","dateModified":"2024-03-21T12:02:43+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-rich-text-editor-kindeditor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use the rich text editor KindEditor?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30","name":"Sophia Anderson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","caption":"Sophia Anderson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=17911"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17911\/revisions"}],"predecessor-version":[{"id":51554,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17911\/revisions\/51554"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=17911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=17911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=17911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}