{"id":3015,"date":"2018-01-04T17:59:25","date_gmt":"2018-01-04T17:59:25","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3015"},"modified":"2018-01-04T18:05:51","modified_gmt":"2018-01-04T18:05:51","slug":"add-local-file-picker-to-image-dialog-in-tinymce","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/","title":{"rendered":"Add a Local File Picker to Image Dialog in TinyMCE"},"content":{"rendered":"<p>TinyMCE is web-based WYSIWYG editor that converts HTML elements to an editor. It provides an instant ability to <b>add HTML editor to textarea<\/b> in the web page. You can easily add TinyMCE editor to HTML element by writing minimal JavaScript Code.<\/p>\n<p>In our earlier tutorial, we have shown how you can <a href=\"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-website\/\" target=\"_blank\">add an editor to textarea using TinyMCE<\/a> jQuery plugin. TinyMCE has many advanced features which make your WYSIWYG editor more powerful and user-friendly. Along with the text content, the image is the most useful element to insert in the editor. In this tutorial, we will show you how to add a local file picker to insert image in TinyMCE editor.<\/p>\n<p>In the example code, we will integrate image uploading functionality in TinyMCE editor. This will <b>add local file picker to the Image dialog<\/b> and allow the user to <b>upload image in TinyMCE editor<\/b>.<\/p>\n<h2>HTML Code<\/h2>\n<p>Specify an HTML element (textarea) to add a WYSIWYG HTML Editor.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">textarea<\/span> <span style=\"color:#bf4f24\">name<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"editor\"<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"editor\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">textarea<\/span>>\r\n<\/pre>\n<h2>TinyMCE jQuery Plugin<\/h2>\n<p>At first download the TinyMCE jQuery plugin from here and include the TinyMCE JS library in the web page.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"text\/javascript\"<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"tinymce\/tinymce.min.js\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<p><span class=\"note\">Note that:<\/span> All the necessary TinyMCE libraries are included in our source code. So, you don&#8217;t need to download the TinyMCE jQuery plugin separately.<\/p>\n<p><b>JavaScript Code:<\/b><br \/>\nThe following JavaScript code will replace textarea with TinyMCE editor instance by passing the selector #editor. <\/p>\n<ul class=\"bullet_disk_list\">\n<li>An image tool will be provided to insert and edit the image.<\/li>\n<li>An image dialog will appear to select an image.<\/li>\n<li>A local file picker will be added to the Image dialog for upload image from computer.<\/li>\n<\/ul>\n<pre>&lt;<span style=\"color:#bf4f24\">script<\/span>>\r\ntinymce.init({\r\n  selector: <span style=\"color:#0b6125\">'#editor'<\/span>,\r\n  plugins: <span style=\"color:#0b6125\">'image code'<\/span>,\r\n  toolbar: <span style=\"color:#0b6125\">'undo redo | link image | code'<\/span>,\r\n  <span style=\"color:#5a525f;font-style:italic\">\/\/ enable title field in the Image dialog<\/span>\r\n  image_title: <span style=\"color:#811f24;font-weight:700\">true<\/span>, \r\n  <span style=\"color:#5a525f;font-style:italic\">\/\/ enable automatic uploads of images represented by blob or data URIs<\/span>\r\n  automatic_uploads: <span style=\"color:#811f24;font-weight:700\">true<\/span>,\r\n  <span style=\"color:#5a525f;font-style:italic\">\/\/ add custom filepicker only to Image dialog<\/span>\r\n  file_picker_types: <span style=\"color:#0b6125\">'image'<\/span>,\r\n  <span style=\"color:#bf4f24\">file_picker_callback<\/span>: <span style=\"color:#a71d5d;font-style:italic\">function<\/span>(cb, value, meta) {\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> input <span style=\"color:#794938\">=<\/span> <span style=\"color:#691c97\">document<\/span>.<span style=\"color:#693a17\">createElement<\/span>(<span style=\"color:#0b6125\">'input'<\/span>);\r\n    input.<span style=\"color:#693a17\">setAttribute<\/span>(<span style=\"color:#0b6125\">'type'<\/span>, <span style=\"color:#0b6125\">'file'<\/span>);\r\n    input.<span style=\"color:#693a17\">setAttribute<\/span>(<span style=\"color:#0b6125\">'accept'<\/span>, <span style=\"color:#0b6125\">'image\/*'<\/span>);\r\n\r\n    <span style=\"color:#691c97\">input<\/span>.<span style=\"color:#bf4f24\">onchange<\/span> <span style=\"color:#794938\">=<\/span> <span style=\"color:#a71d5d;font-style:italic\">function<\/span>() {\r\n      <span style=\"color:#a71d5d;font-style:italic\">var<\/span> file <span style=\"color:#794938\">=<\/span> <span style=\"color:#234a97\">this<\/span>.files[<span style=\"color:#811f24;font-weight:700\">0<\/span>];\r\n      <span style=\"color:#a71d5d;font-style:italic\">var<\/span> reader <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">FileReader<\/span>();\r\n      \r\n      <span style=\"color:#691c97\">reader<\/span>.<span style=\"color:#bf4f24\">onload<\/span> <span style=\"color:#794938\">=<\/span> <span style=\"color:#a71d5d;font-style:italic\">function<\/span> () {\r\n        <span style=\"color:#a71d5d;font-style:italic\">var<\/span> id <span style=\"color:#794938\">=<\/span> <span style=\"color:#0b6125\">'blobid'<\/span> <span style=\"color:#794938\">+<\/span> (<span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>()).<span style=\"color:#693a17\">getTime<\/span>();\r\n        <span style=\"color:#a71d5d;font-style:italic\">var<\/span> blobCache <span style=\"color:#794938\">=<\/span>  tinymce.activeEditor.editorUpload.blobCache;\r\n        <span style=\"color:#a71d5d;font-style:italic\">var<\/span> base64 <span style=\"color:#794938\">=<\/span> reader.result.<span style=\"color:#693a17\">split<\/span>(<span style=\"color:#0b6125\">','<\/span>)[<span style=\"color:#811f24;font-weight:700\">1<\/span>];\r\n        <span style=\"color:#a71d5d;font-style:italic\">var<\/span> blobInfo <span style=\"color:#794938\">=<\/span> blobCache.create(id, file, base64);\r\n        blobCache.<span style=\"color:#693a17\">add<\/span>(blobInfo);\r\n\r\n        <span style=\"color:#5a525f;font-style:italic\">\/\/ call the callback and populate the Title field with the file name<\/span>\r\n        cb(blobInfo.blobUri(), { title: file.<span style=\"color:#b4371f\">name<\/span> });\r\n      };\r\n      reader.readAsDataURL(file);\r\n    };\r\n    \r\n    input<span style=\"color:#693a17\">.click<\/span>();\r\n  }\r\n});\r\n&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<div class=\"img_center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-file-picker-upload-image-from-computer-codexworld.png\" alt=\"tinymce-file-picker-upload-image-from-computer-codexworld\" width=\"700\" height=\"486\" class=\"alignnone size-full wp-image-3017\" srcset=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-file-picker-upload-image-from-computer-codexworld.png 700w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-file-picker-upload-image-from-computer-codexworld-300x208.png 300w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-file-picker-upload-image-from-computer-codexworld-200x139.png 200w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-file-picker-upload-image-from-computer-codexworld-331x230.png 331w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/div>\n<h2>Saving TinyMCE Editor Content<\/h2>\n<p>To save the TinyMCE editor content, an HTML form needs to be submitted. Once the &lt;<span style=\"color:#bf4f24\">form<\/span>> is submitted, you can get the editor HTML content using $_POST variable in PHP.<\/p>\n<pre><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'editor'<\/span><span style=\"color: #007700\">];<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/tinymce-html-export-to-word-doc\/\">How to Export TinyMCE Content to MS Word Document<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>TinyMCE is web-based WYSIWYG editor that converts HTML elements to an editor. It provides an instant ability to add HTML editor to textarea in the web page. You can easily add TinyMCE editor to HTML <\/p>\n","protected":false},"author":1,"featured_media":3016,"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":[10],"tags":[16,213,170,183],"class_list":["post-3015","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-jquery","tag-jquery-plugin","tag-text-editor","tag-tinymce","cat-10-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>Add a Local File Picker to Image Dialog in TinyMCE - CodexWorld<\/title>\n<meta name=\"description\" content=\"TinyMCE file picker - Add local file picker to the image dialog in TinyMCE editor. The example code to integrate image uploading functionality in TinyMCE editor. Allow user to upload image from computer and insert in TinyMCE editor.\" \/>\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\/add-local-file-picker-to-image-dialog-in-tinymce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add a Local File Picker to Image Dialog in TinyMCE - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"TinyMCE file picker - Add local file picker to the image dialog in TinyMCE editor. The example code to integrate image uploading functionality in TinyMCE editor. Allow user to upload image from computer and insert in TinyMCE editor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/\" \/>\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=\"2018-01-04T17:59:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-04T18:05:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/add-local-file-picker-to-image-dialog-tinymce-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\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Add a Local File Picker to Image Dialog in TinyMCE\",\"datePublished\":\"2018-01-04T17:59:25+00:00\",\"dateModified\":\"2018-01-04T18:05:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/\"},\"wordCount\":313,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/add-local-file-picker-to-image-dialog-tinymce-codexworld.png\",\"keywords\":[\"jQuery\",\"jQuery Plugin\",\"Text Editor\",\"TinyMCE\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/\",\"name\":\"Add a Local File Picker to Image Dialog in TinyMCE - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/add-local-file-picker-to-image-dialog-tinymce-codexworld.png\",\"datePublished\":\"2018-01-04T17:59:25+00:00\",\"dateModified\":\"2018-01-04T18:05:51+00:00\",\"description\":\"TinyMCE file picker - Add local file picker to the image dialog in TinyMCE editor. The example code to integrate image uploading functionality in TinyMCE editor. Allow user to upload image from computer and insert in TinyMCE editor.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/add-local-file-picker-to-image-dialog-tinymce-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/add-local-file-picker-to-image-dialog-tinymce-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"add-local-file-picker-to-image-dialog-tinymce-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-local-file-picker-to-image-dialog-in-tinymce\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add a Local File Picker to Image Dialog in TinyMCE\"}]},{\"@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":"Add a Local File Picker to Image Dialog in TinyMCE - CodexWorld","description":"TinyMCE file picker - Add local file picker to the image dialog in TinyMCE editor. The example code to integrate image uploading functionality in TinyMCE editor. Allow user to upload image from computer and insert in TinyMCE editor.","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\/add-local-file-picker-to-image-dialog-in-tinymce\/","og_locale":"en_US","og_type":"article","og_title":"Add a Local File Picker to Image Dialog in TinyMCE - CodexWorld","og_description":"TinyMCE file picker - Add local file picker to the image dialog in TinyMCE editor. The example code to integrate image uploading functionality in TinyMCE editor. Allow user to upload image from computer and insert in TinyMCE editor.","og_url":"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2018-01-04T17:59:25+00:00","article_modified_time":"2018-01-04T18:05:51+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/add-local-file-picker-to-image-dialog-tinymce-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\/add-local-file-picker-to-image-dialog-in-tinymce\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Add a Local File Picker to Image Dialog in TinyMCE","datePublished":"2018-01-04T17:59:25+00:00","dateModified":"2018-01-04T18:05:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/"},"wordCount":313,"commentCount":11,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/add-local-file-picker-to-image-dialog-tinymce-codexworld.png","keywords":["jQuery","jQuery Plugin","Text Editor","TinyMCE"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/","url":"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/","name":"Add a Local File Picker to Image Dialog in TinyMCE - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/add-local-file-picker-to-image-dialog-tinymce-codexworld.png","datePublished":"2018-01-04T17:59:25+00:00","dateModified":"2018-01-04T18:05:51+00:00","description":"TinyMCE file picker - Add local file picker to the image dialog in TinyMCE editor. The example code to integrate image uploading functionality in TinyMCE editor. Allow user to upload image from computer and insert in TinyMCE editor.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/add-local-file-picker-to-image-dialog-tinymce-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/add-local-file-picker-to-image-dialog-tinymce-codexworld.png","width":1366,"height":768,"caption":"add-local-file-picker-to-image-dialog-tinymce-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Add a Local File Picker to Image Dialog in TinyMCE"}]},{"@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\/2018\/01\/add-local-file-picker-to-image-dialog-tinymce-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-MD","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3015","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=3015"}],"version-history":[{"count":3,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3015\/revisions"}],"predecessor-version":[{"id":3020,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3015\/revisions\/3020"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/3016"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}