我使用tinymce-5并编写了第一个插件。我在上传女巫图片时遇到问题。如何在此代码中上传图片？
对我来说，解决方案是强制dropzone接受文件，但是理想的解决方案是包装tinymi中可用的全部图像。
另外。如果有人知道如何立即将图片和文本投入小型编辑器，我将不胜感激。
另外。我有一个问题，如何生成下面的文本和图像的预览？
(function () {
var floatright = (function () {
'use strict';
tinymce.PluginManager.add('floatright', function (editor, url) {
/*
Add a custom icon to TinyMCE
*/
editor.ui.registry.addIcon('icon-image-float-right', '' +
'<?xml version="1.0" standalone="no"?>\n' +
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"\n' +
' "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">\n' +
'<svg version="1.0" xmlns="http://www.w3.org/2000/svg"\n' +
' width="16pt" height="16pt" viewBox="0 0 512.000000 512.000000"\n' +
' preserveAspectRatio="xMidYMid meet">\n' +
'<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"\n' +
'fill="#000000" stroke="none">\n' +
'<path d="M710 4471 c-79 -24 -145 -87 -176 -167 -18 -47 -19 -106 -19 -1759\n' +
'l0 -1710 23 -47 c30 -61 93 -114 156 -133 75 -23 3657 -23 3732 0 63 19 126\n' +
'72 156 133 l23 47 0 1710 c0 1653 -1 1712 -19 1759 -23 60 -76 120 -130 149\n' +
'l-41 22 -1840 2 c-1012 1 -1851 -2 -1865 -6z m3650 -2150 c0 -770 -3 -1406 -6\n' +
'-1415 -6 -15 -173 -16 -1795 -16 l-1789 0 0 1408 c0 775 3 1412 7 1415 3 4\n' +
'811 7 1795 7 l1788 0 0 -1399z"/>\n' +
'<path d="M1095 3411 c-49 -21 -60 -47 -60 -147 0 -89 1 -95 28 -121 l27 -28\n' +
'835 0 835 0 27 28 c27 26 28 32 28 122 0 90 -1 96 -28 122 l-27 28 -823 2\n' +
'c-452 1 -831 -2 -842 -6z"/>\n' +
'<path d="M1095 2761 c-49 -21 -60 -47 -60 -147 0 -89 1 -95 28 -121 l27 -28\n' +
'835 0 835 0 27 28 c27 26 28 32 28 122 0 90 -1 96 -28 122 l-27 28 -823 2\n' +
'c-452 1 -831 -2 -842 -6z"/>\n' +
'<path d="M1095 2111 c-50 -21 -60 -47 -60 -152 0 -94 1 -100 28 -126 l27 -28\n' +
'1480 0 1480 0 27 28 c27 26 28 32 28 127 0 95 -1 101 -28 127 l-27 28 -1468 2\n' +
'c-807 1 -1476 -2 -1487 -6z"/>\n' +
'<path d="M1085 1421 c-50 -21 -60 -47 -60 -152 0 -94 1 -100 28 -126 l27 -28\n' +
'1480 0 1480 0 27 28 c27 26 28 32 28 127 0 95 -1 101 -28 127 l-27 28 -1468 2\n' +
'c-807 1 -1476 -2 -1487 -6z"/>\n' +
'</g>\n' +
'</svg>');
/*
Use to store the instance of the Dialog
*/
var _dialog = false;
/**
* Get the Dialog Configuration Object
*
* @returns {{buttons: *[], onSubmit: onSubmit, title: string, body: {}}}
* @private
*/
function _getDialogConfig()
{
return {
title: 'Float right text dialog',
body: {
type: 'panel',
items: [{
type: 'textarea',
name: 'content',
label: 'Enter your text here',
//items: _typeOptions,
flex: true
}, {
type: 'dropzone',
name: 'image',
plugin: 'image',
menubar: "insert",
toolbar: "image",
label: 'Enter image',
flex: true,
id: 'float_right_image',
images_upload_url: "/hydra/wysylka-wiadomosci/zaladuj-plik/974",
images_upload_base_path: "https://hydra/img/media/news/975/",
}],
},
onSubmit: function (e) {
// insert markup
console.log(e.getData().content);
editor.insertContent('<img src="https://hydra/img/logo.png" style="float: right; margin: 15px;" />' + '<p style="text-align: justify;">' + e.getData().content +'</p>');
e.close();
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Insert',
type: 'submit',
primary: true,
enabled: false
}
],
width: 800,
height: 800
};
}
/**
* Plugin behaviour for when the Toolbar or Menu item is selected
*
* @private
*/
function _onAction()
{
// Open a Dialog, and update the dialog instance var
_dialog = editor.windowManager.open(_getDialogConfig());
// block the Dialog, and commence the data update
// Message is used for accessibility
_dialog.block('Loading...');
// Do a server call to get the items for the select box
// We'll pretend using a setTimeout call
setTimeout(function () {
// re-build the dialog
_dialog.redial(_getDialogConfig());
// unblock the dialog
_dialog.unblock();
}, 1000);
}
// Define the Toolbar button
editor.ui.registry.addButton('floatright', {
icon: 'icon-image-float-right',
onAction: _onAction
});
// Define the Menu Item
editor.ui.registry.addMenuItem('floatright', {
text: 'Hello Menu Item',
context: 'insert',
icon: 'icon-image-float-right',
onAction: _onAction
});
// Return details to be displayed in TinyMCE's "Help" plugin, if you use it
// This is optional.
return {
getMetadata: function () {
return {
name: "Hello World example"
};
}
};
});
}());
})();