I use tinymce-5 and I write my first plugin. I have a problem witch image upload. How I can image upload in this code?
For me, the solution is to force dropzone to accept the file, but the ideal solution is to wrap up the full set of images available in tinymi.
Additionally. If anyone knows how to throw a picture and text immediately into the tiny editor, I will be grateful.
Additionally. I have a question, how can I generate a preview of the text and image below?
(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 = true;
/*
An array of options to appear in the "Type" select box.
*/
var _typeOptions = [];
/**
* Get the Dialog Configuration Object
*
* @returns }
* @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/",
onChange: function(){
var URL = document.dropzone.value;
var win = tinyMCEPopup.getWindowArg("window");
// insert information now
win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = URL;
// are we an image browser
if (typeof(win.ImageDialog) != "undefined") {
// we are, so update image dimensions...
if (win.ImageDialog.getImageData)
win.ImageDialog.getImageData();
// ... and preview if necessary
if (win.ImageDialog.showPreviewImage)
win.ImageDialog.showPreviewImage(URL);
}
// close popup window
tinyMCEPopup.close();
}
}]
},
onSubmit: function (api) {
// insert markup
editor.insertContent('<p>You selected Option ' + api.getData().type + '.</p>');
// close the dialog
api.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 () {
// We're assuming this is what runs after the server call is performed
// We'd probably need to loop through a response from the server, and update
// the _typeOptions array with new values. We're just going to hard code
// those for now.
_typeOptions = [
{text: 'First Option', value: '1'},
{text: 'Second Option', value: '2'},
{text: 'Third Option', value: '3'}
];
// re-build the dialog
_dialog.redial(_getDialogConfig());
// unblock the dialog
_dialog.unblock();
}, 1000);
}
// Define the Toolbar button
editor.ui.registry.addButton('floatright', {
text: "Hello Button",
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"
};
}
};
});
}());
})();
Aucun commentaire:
Enregistrer un commentaire