{"id":4897,"date":"2025-03-16T22:58:42","date_gmt":"2025-03-16T14:58:42","guid":{"rendered":"https:\/\/blog.odjbinail.cn\/?p=4897"},"modified":"2025-03-16T22:58:42","modified_gmt":"2025-03-16T14:58:42","slug":"tinymce%e9%9b%86%e6%88%90%e5%a4%9a%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=4897","title":{"rendered":"Tinymce\u96c6\u6210\u591a\u56fe\u7247\u4e0a\u4f20\u63d2\u4ef6"},"content":{"rendered":"<h2>\u6f14\u793a\u6548\u679c<\/h2>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/03\/2025031622454026.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/03\/2025031622454026.png\" alt=\"\" \/><\/p><\/noscript>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/03\/2025031622465380.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/03\/2025031622465380.png\" alt=\"\" \/><\/p><\/noscript>\n<h3>\u591a\u56fe\u7247\u4e0a\u4f20\u63d2\u4ef6\u6587\u4ef6\u4f4d\u7f6e<\/h3>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/03\/2025031622482030.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/03\/2025031622482030.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u4ee3\u7801<\/h2>\n<p><a href=\"https:\/\/blog.odjbinail.cn\/index.php\/2024\/10\/27\/%e5%9c%a8vue3-0%e9%a1%b9%e7%9b%ae%e4%b8%ad%e4%bd%bf%e7%94%a8tinymce%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8\/\" title=\"\u5728 vue3.0 \u9879\u76ee\u4e2d\u4f7f\u7528 Tinymce \u5bcc\u6587\u672c\u7f16\u8f91\u5668\">\u5728 vue3.0 \u9879\u76ee\u4e2d\u4f7f\u7528 Tinymce \u5bcc\u6587\u672c\u7f16\u8f91\u5668 [\u70b9\u51fb\u524d\u5f80]<\/a><\/p>\n<p><strong>\u5728\u6b64\u4ec5\u5c55\u793a\u96c6\u6210\u591a\u56fe\u7247\u4e0a\u4f20\u63d2\u4ef6\u7684\u4ee3\u7801, vue3 \u9879\u76ee\u4f7f\u7528 Tinymce \u5bcc\u6587\u672c\u7f16\u8f91\u5668\u8be6\u89c1\u4ee5\u4e0a\u94fe\u63a5<\/strong><\/p>\n<ul>\n<li>plugin.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>tinymce.PluginManager.add(&#039;axupimgs&#039;, function (editor, url) {\n    var pluginName = &#039;\u591a\u56fe\u7247\u4e0a\u4f20&#039;;\n    window.axupimgs = {}; \/\/\u6254\u5916\u90e8\u516c\u5171\u53d8\u91cf\uff0c\u4e5f\u53ef\u4ee5\u6254\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684\u4f4d\u7f6e\n    const baseURL = import.meta.env.VITE_BASE_URL\n\n    \/\/ var baseURL=tinymce.baseURL;\n    var iframe1 = &#039;\/upfiles.html&#039;;\n    console.log(&#039;editor&#039;,editor)\n    axupimgs.images_upload_handler = editor.getParam(&#039;images_upload_handler_not_loading&#039;, undefined, &#039;function&#039;);\n    axupimgs.images_upload_base_path = editor.getParam(&#039;images_upload_base_path&#039;, &#039;&#039;, &#039;string&#039;);\n    axupimgs.axupimgs_filetype = editor.getParam(&#039;axupimgs_filetype&#039;, &#039;.png,.gif,.jpg,.jpeg&#039;, &#039;string&#039;);\n    axupimgs.res = [];\n    var openDialog = function () {\n        return editor.windowManager.openUrl({\n            title: pluginName,\n            size: &#039;large&#039;,\n            url: iframe1,\n            buttons: [\n                {\n                    type: &#039;cancel&#039;,\n                    text: &#039;Close&#039;\n                },\n                {\n                    type: &#039;custom&#039;,\n                    text: &#039;Save&#039;,\n                    name: &#039;save&#039;,\n                    primary: true\n                },\n            ],\n            onAction: function (api, details) {\n                switch (details.name) {\n                    case &#039;save&#039;:\n                        var html = &#039;&#039;;\n                        var imgs = axupimgs.res;\n                        var len = imgs.length;\n                        for (let i = 0; i &lt; len; i++) {\n                            if (imgs[i].url) {\n                                html += &#039;&lt;img src=&quot;&#039; + imgs[i].url + &#039;&quot; \/&gt;&#039;;\n                            }\n                        }\n                        editor.insertContent(html);\n                        axupimgs.res = [];\n                        api.close();\n                        break;\n                    default:\n                        break;\n                }\n\n            }\n        });\n    };\n\n    editor.ui.registry.getAll().icons.axupimgs || editor.ui.registry.addIcon(&#039;axupimgs&#039;, &#039;&lt;svg viewBox=&quot;0 0 1280 1024&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; width=&quot;24&quot; height=&quot;24&quot;&gt;&lt;path d=&quot;M1126.2,779.8V87.6c0-24-22.6-86.9-83.5-86.9H83.5C14.7,0.7,0,63.7,0,87.7v692c0,36.2,29.2,89.7,83.5,89.7l959.3-1.3c51.7,0,83.5-42.5,83.5-88.3zm-1044,4V86.3h961.6V783.7H82.2v0.1z&quot; fill=&quot;#53565A&quot;\/&gt;&lt;path d=&quot;M603,461.6L521.1,366.3,313,629.8,227.2,546.8,102.4,716.8H972.8v-170L768.2,235.2,603.1,461.6zM284.6,358.4a105.4,105.4,0,0,0,73.5-30c19.5-19.1,30.3-45,30.2-71.8,0-56.8-45.9-103-102.4-103-56.6,0-102.4,46.1-102.4,103C183.4,313.5,228,358.4,284.6,358.4z&quot; fill=&quot;#9598A0&quot;\/&gt;&lt;path d=&quot;M1197.7,153.6l-0.3,669.3s13.5,113.9-67.4,113.9H153.6c0,24.1,23.9,87.2,83.5,87.2h959.3c58.3,0,83.6-49.5,83.6-89.9V240.8c-0.1-41.8-44.9-87.2-82.3-87.2z&quot; fill=&quot;#53565A&quot;\/&gt;&lt;\/svg&gt;&#039;);\n\n    editor.ui.registry.addButton(&#039;axupimgs&#039;, {\n        icon: &#039;axupimgs&#039;,\n        tooltip: pluginName,\n        onAction: function () {\n            openDialog();\n        }\n    });\n    editor.ui.registry.addMenuItem(&#039;axupimgs&#039;, {\n        icon: &#039;axupimgs&#039;,\n        text: &#039;\u56fe\u7247\u6279\u91cf\u4e0a\u4f20...&#039;,\n        onAction: function () {\n            openDialog();\n        }\n    });\n    return {\n        getMetadata: function () {\n            return {\n                name: pluginName,\n                url: &quot;http:\/\/tinymce.ax-z.cn\/more-plugins\/axupimgs.php&quot;,\n            };\n        }\n    };\n});\n<\/code><\/pre>\n<ul>\n<li>Tinymce.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;script setup&gt;\nimport &#039;@\/assets\/axupimgs\/plugin.js&#039;\/\/\u5f15\u5165\u591a\u56fe\u4e0a\u4f20\u63d2\u4ef6\n\nconst props = defineProps({\n  \/\/\u6dfb\u52a0 axupimgs\n  plugins: {\n    type: [String, Array],\n    default:\n        &quot;preview searchreplace autolink directionality visualblocks visualchars fullscreen image axupimgs link media template code codesample table pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave&quot;,\n     },\n  \/\/\u6dfb\u52a0 axupimgs\n  toolbar: {\n    type: [String, Array],\n    default: [\n      &quot;fullscreen undo redo | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | blockquote subscript superscript removeformat &quot;,\n      &quot;styleselect formatselect fontselect fontsizeselect |  table image axupimgs media  pagebreak insertdatetime  selectall visualblocks searchreplace | code preview | indent2em lineheight formatpainter&quot;,\n    ],\n  },\n  })\n\n&lt;\/script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u6f14\u793a\u6548\u679c \u591a\u56fe\u7247\u4e0a\u4f20\u63d2\u4ef6\u6587\u4ef6\u4f4d\u7f6e \u4ee3\u7801 \u5728 vue3.0 \u9879\u76ee\u4e2d\u4f7f\u7528 Tinymce \u5bcc\u6587\u672c\u7f16\u8f91\u5668 [\u70b9\u51fb\u524d\u5f80 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4897","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4897"}],"version-history":[{"count":8,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4897\/revisions"}],"predecessor-version":[{"id":4976,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4897\/revisions\/4976"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}