{"id":3837,"date":"2019-02-11T13:50:48","date_gmt":"2019-02-11T13:50:48","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3837"},"modified":"2019-02-11T14:05:33","modified_gmt":"2019-02-11T14:05:33","slug":"ckeditor-insert-image-with-caption","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/","title":{"rendered":"Insert Image with Caption in CKEditor"},"content":{"rendered":"<p>CKEditor provides various plugins to enhance the functionality of the <b>WYSIWYG HTML editor<\/b>. The Image plugin is one of the most useful to insert images into the editor content. By default, the Image plugin is included in the Standard and Full packages. With the image feature, you can add and customize (alignment, border, link, etc.) the image in the editor.<\/p>\n<p>Generally, the URL needs to be specified for inserting an image in the editor content. You can enhance the functionality of the Image plugin using CKEditor addons. The Enhanced Image is a most useful addon to <b>add captioned image in CKEditor<\/b>. It allows adding the image with a caption in the editor content. In this tutorial, we will show you how to insert image with caption in CKEditor using the <b>Enhanced Image plugin<\/b>.<\/p>\n<p>Before getting started to enhance the editor, <a href=\"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/\">add CKEditor to textarea<\/a> in the webpage. Once done, follow the below steps to <b>add Enhanced Image plugin<\/b> for inserting the captioned image in the CKEditor.<\/p>\n<h2>Enhanced Image Add-on Installation<\/h2>\n<ul class=\"step_list\">\n<li>Download the <a href=\"https:\/\/ckeditor.com\/cke4\/addon\/image2\" target=\"_blank\">Enhanced Image plugin<\/a>.<\/li>\n<li>Extract the downloaded plugin archive and place into the plugins folder of your CKEditor installation.\n<pre>ckeditor\/plugins\/image2<\/pre>\n<\/li>\n<li>Use the <b>extraPlugins<\/b> configuration setting to enable the plugin. Open the <code>ckeditor\/config.js<\/code> file and add the following code.\n<pre style=\"color: rgb(110, 107, 94);\">config.extraPlugins = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'image2'<\/span>;<\/pre>\n<\/li>\n<\/ul>\n<p><span class=\"note\">Note that:<\/span> all required files are included in our source code. You don&#8217;t need to download the plugin files separately.<\/p>\n<h2>Add CKEditor to Textarea<\/h2>\n<p>Create a textarea element in the webpage to add CKEditor.<\/p>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"editor\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"editor\"<\/span> <span class=\"hljs-attr\">rows<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"10\"<\/span> <span class=\"hljs-attr\">cols<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"80\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span>&gt;<\/span><\/pre>\n<p>Include the library file of CKEditor plugin.<\/p>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"ckeditor\/ckeditor.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p>Initialize the CKEditor using <b>CKEDITOR.replace()<\/b> method and replace the textarea element with CKEditor.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\n    CKEDITOR.replace(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'editor'<\/span>);\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Insert Captioned Image in CKEditor<\/h2>\n<p>When you click on insert image icon from the toolbox, a dialog will appear. At the bottom of the image dialog, <b>Captioned image<\/b> option will be provided. You need to check this option to insert a captioned image.<\/p>\n<div class=\"img_center\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3840\" src=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-insert-captioned-image-dialog-codexworld.png\" alt=\"ckeditor-insert-captioned-image-dialog-codexworld\" width=\"340\" height=\"414\" srcset=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-insert-captioned-image-dialog-codexworld.png 340w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-insert-captioned-image-dialog-codexworld-246x300.png 246w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-insert-captioned-image-dialog-codexworld-200x244.png 200w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-insert-captioned-image-dialog-codexworld-189x230.png 189w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/div>\n<p>The <b>Captioned image<\/b> option inserts the image with a caption in the CKEditor. You can also add custom captions below the images in the editor content.<\/p>\n<div class=\"img_center\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3841\" src=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-insert-image-with-caption-codexworld.png\" alt=\"ckeditor-insert-image-with-caption-codexworld\" width=\"980\" height=\"488\" srcset=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-insert-image-with-caption-codexworld.png 980w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-insert-image-with-caption-codexworld-300x149.png 300w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-insert-image-with-caption-codexworld-768x382.png 768w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-insert-image-with-caption-codexworld-200x100.png 200w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-insert-image-with-caption-codexworld-346x172.png 346w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/div>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/save-html-editor-content-in-database-php-mysql\/\">Save WYSIWYG Editor Content in Database using PHP and MySQL<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CKEditor provides various plugins to enhance the functionality of the WYSIWYG HTML editor. The Image plugin is one of the most useful to insert images into the editor content. By default, the Image plugin is <\/p>\n","protected":false},"author":1,"featured_media":3843,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[324,179,16,299,170],"class_list":["post-3837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-ckeditor","tag-html","tag-jquery","tag-plugin","tag-text-editor","cat-6-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Insert Image with Caption in CKEditor - CodexWorld<\/title>\n<meta name=\"description\" content=\"CKEditor image caption - Insert captioned image in editor content using Enhanced Image add-on. Example code to add image with caption in CKEditor using Enhanced Image plugin.\" \/>\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.codexworld.com\/ckeditor-insert-image-with-caption\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Insert Image with Caption in CKEditor - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"CKEditor image caption - Insert captioned image in editor content using Enhanced Image add-on. Example code to add image with caption in CKEditor using Enhanced Image plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-11T13:50:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-11T14:05:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\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.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Insert Image with Caption in CKEditor\",\"datePublished\":\"2019-02-11T13:50:48+00:00\",\"dateModified\":\"2019-02-11T14:05:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/\"},\"wordCount\":348,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld.png\",\"keywords\":[\"CKEditor\",\"HTML\",\"jQuery\",\"Plugin\",\"Text Editor\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/\",\"name\":\"Insert Image with Caption in CKEditor - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld.png\",\"datePublished\":\"2019-02-11T13:50:48+00:00\",\"dateModified\":\"2019-02-11T14:05:33+00:00\",\"description\":\"CKEditor image caption - Insert captioned image in editor content using Enhanced Image add-on. Example code to add image with caption in CKEditor using Enhanced Image plugin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-insert-image-with-caption\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Insert Image with Caption in CKEditor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Insert Image with Caption in CKEditor - CodexWorld","description":"CKEditor image caption - Insert captioned image in editor content using Enhanced Image add-on. Example code to add image with caption in CKEditor using Enhanced Image plugin.","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.codexworld.com\/ckeditor-insert-image-with-caption\/","og_locale":"en_US","og_type":"article","og_title":"Insert Image with Caption in CKEditor - CodexWorld","og_description":"CKEditor image caption - Insert captioned image in editor content using Enhanced Image add-on. Example code to add image with caption in CKEditor using Enhanced Image plugin.","og_url":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2019-02-11T13:50:48+00:00","article_modified_time":"2019-02-11T14:05:33+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Insert Image with Caption in CKEditor","datePublished":"2019-02-11T13:50:48+00:00","dateModified":"2019-02-11T14:05:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/"},"wordCount":348,"commentCount":1,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld.png","keywords":["CKEditor","HTML","jQuery","Plugin","Text Editor"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/","url":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/","name":"Insert Image with Caption in CKEditor - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld.png","datePublished":"2019-02-11T13:50:48+00:00","dateModified":"2019-02-11T14:05:33+00:00","description":"CKEditor image caption - Insert captioned image in editor content using Enhanced Image add-on. Example code to add image with caption in CKEditor using Enhanced Image plugin.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld.png","width":1366,"height":768,"caption":"ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/ckeditor-insert-image-with-caption\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Insert Image with Caption in CKEditor"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/02\/ckeditor-wysiwyg-html-editor-insert-image-with-caption-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-ZT","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=3837"}],"version-history":[{"count":3,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3837\/revisions"}],"predecessor-version":[{"id":3842,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3837\/revisions\/3842"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/3843"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}