{"id":5074,"date":"2026-08-30T05:20:33","date_gmt":"2026-08-29T20:20:33","guid":{"rendered":"https:\/\/donguri3.net\/server-tech\/wp-admin-export-image-mind-map-plugin-2\/"},"modified":"2026-08-30T05:20:34","modified_gmt":"2026-08-29T20:20:34","slug":"wp-admin-export-image-mind-map-plugin","status":"publish","type":"post","link":"https:\/\/donguri3.net\/en\/server-tech\/wordpress-blog-seo\/wp-admin-export-image-mind-map-plugin\/","title":{"rendered":"Mind Elixir \u00d7 WordPress Custom Plugin: Implementing SVG\/PNG Export Features"},"content":{"rendered":"<p>By utilizing Mind Elixir&#8217;s export APIs (<code>exportSvg<\/code> \/ <code>exportPng<\/code>) within the custom WordPress plugin that integrates Mind Elixir, we have added &#8220;SVG Download&#8221; and &#8220;PNG Download&#8221; buttons to the mind map editor in the administration screen.<\/p>\n<ul>\n<li class=\"\"><strong>Button Addition<\/strong>: Outputs the buttons in the admin screen using PHP<\/li>\n<li class=\"\"><strong>JavaScript Implementation<\/strong>: Implements image generation and downloading using jQuery&#8217;s <code>.on('click',\u2026)<\/code> handler<\/li>\n<li class=\"\"><strong>Preventing Garbled Text<\/strong>: Text rendering utilizing the <code>noForeignObject: true<\/code> option<\/li>\n<\/ul>\n<hr class=\"\" \/>\n<h2 class=\"\">Environment Setup<\/h2>\n<h3 class=\"\">Plugin Structure<\/h3>\n<ul>\n<li class=\"\">Plugin file: <code>wp-mind-elixir-admin.php<\/code><\/li>\n<li class=\"\">Script: <code>js\/wp-mind-elixir-admin.js<\/code><\/li>\n<li class=\"\">CSS: <code>css\/wp-mind-elixir-admin.css<\/code><\/li>\n<\/ul>\n<h3 class=\"\">Mind Elixir Image Export API Overview<\/h3>\n<p>Mind Elixir provides the following methods:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">exportSvg(noForeignObject?: boolean, injectCss?: string)<\/pre>\n<ul>\n<li class=\"\">Eliminates <code>&lt;foreignObject&gt;<\/code> with <code>noForeignObject = true<\/code> and renders with pure <code>&lt;text&gt;<\/code> elements<\/li>\n<li class=\"\">Allows passing a CSS string to <code>injectCss<\/code> to embed inside the SVG<\/li>\n<\/ul>\n<hr class=\"\" \/>\n<h2 class=\"\">Outputting Buttons (PHP Side)<\/h2>\n<p>Add download buttons at the top of the mind map editor screen.<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\"> &lt;button id=&quot;mea-export-svg&quot; class=&quot;button&quot;&gt;SVG Download&lt;\/button&gt;\n&lt;button id=&quot;mea-export-png&quot; class=&quot;button&quot;&gt;PNG Download&lt;\/button&gt;<\/pre>\n<ul>\n<li class=\"\">The button IDs are set to <code>#mea-export-svg<\/code> and <code>#mea-export-png<\/code> to make them easy to select with jQuery.<\/li>\n<\/ul>\n<hr class=\"\" \/>\n<h2 class=\"\">Implementation in JavaScript<\/h2>\n<p>Write the following code inside <code>js\/wp-mind-elixir-admin.js<\/code>.<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\"> async function downloadImage(type) {\nlet blob;\ntry{\nif (type === &#039;png&#039;) {\nblob = await mind.exportPng(true, &#039;&#039;);\n} else {\nblob = mind.exportSvg(true, &#039;&#039;);\n}\n} catch (err) {\nconsole.error(&#039;Export failed:&#039;, err);\nreturn;\n}\nif (!blob) return;\nconst url = URL.createObjectURL(blob);\nconst a = document.createElement(&#039;a&#039;);\na.href = url;\na.download = `mindmap.${type}`;\na.click();\nURL.revokeObjectURL(url);\n}\n\n$(&#039;#mea-export-png&#039;).on(&#039;click&#039;, function(){\ndownloadImage(&#039;png&#039;);\n})\n$(&#039;#mea-export-svg&#039;).on(&#039;click&#039;, function(){\ndownloadImage(&#039;svg&#039;);\n})<\/pre>\n<hr class=\"\" \/>\n<h2 class=\"\">5. Notes and Applications<\/h2>\n<ul>\n<li>Setting <code>noForeignObject<\/code> to <code>false<\/code> in <code>exportSvg<\/code> \/ <code>exportPng<\/code> caused an issue where the bottom of the text was cut off, so <code>noForeignObject<\/code> is set to <code>true<\/code> for the time being.<br \/>While utilizing <code>injectCss<\/code> might allow for cleaner formatting, prioritizing this workaround came first.<\/li>\n<\/ul>\n<hr class=\"\" \/>\n<h2 class=\"\">Summary<\/h2>\n<ol>\n<li class=\"\">Added SVG\/PNG download buttons to the administration screen<\/li>\n<li class=\"\">Called the Mind Elixir export API using jQuery&#8217;s <code>.on('click',\u2026)<\/code> to implement Blob generation and downloading<\/li>\n<li class=\"\">Avoided garbled text using <code>noForeignObject: true<\/code>, and adjusted styles using <code>injectCss<\/code> or post-processing as needed<\/li>\n<\/ol>\n<p>This allows users to export mind maps in high-quality SVG\/PNG formats with a single click right from the plugin&#8217;s administration screen. Be sure to try implementing it!<\/p>\n<h2>References<\/h2>\n<ul>\n<li><span class=\"ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]\"><a class=\"flex h-4.5 overflow-hidden rounded-xl px-2 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out\" href=\"https:\/\/docs.mind-elixir.com\/ja\/docs\/guides\/image-export\" target=\"_blank\" rel=\"noopener\"><span class=\"relative start-0 bottom-0 flex h-full w-full items-center\"><span class=\"flex h-4 w-full items-center justify-between overflow-hidden\"><span class=\"max-w-full grow truncate overflow-hidden text-center\">Hello from Mind Elixir | Mind Elixir<\/span><\/span><\/span><\/a><\/span><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>By utilizing Mind Elixir&#8217;s export APIs (exportSvg \/ exportPng) within the custom WordPress plugin that i [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":1561,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"https:\/\/donguri3.net\/?p=1560","footnotes":""},"categories":[1166],"tags":[387,534,61,576,179,153,531,533,278],"class_list":["post-5074","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-blog-seo","tag-java","tag-mind-elixir","tag-wordpress","tag-wordpress-","tag-179","tag-153","tag-531","tag-533","tag-278","en-US"],"_links":{"self":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/5074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/comments?post=5074"}],"version-history":[{"count":1,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/5074\/revisions"}],"predecessor-version":[{"id":5077,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/5074\/revisions\/5077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/media\/1561"}],"wp:attachment":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/media?parent=5074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/categories?post=5074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/tags?post=5074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}