i'd like to show the template plugin popup window manually from a custom toolbar button but it doesnt seem to work if i execute the command "mceInsertTemplate".
It works i.e. when executing some default commands like "Bold" or similar.
tinymce.init({
selector: '.tinymce',
language: 'de',
statusbar: false,
plugins: "table lists autoresize template",
menubar: "",
toolbar: "bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | table | removeformat undo redo | template | myCustomToolbarButton | ",
templates: [
{title: 'Some title 1', description: 'Some desc 1', content: 'My content'},
{title: 'Some title 2', description: 'Some desc 2', url: 'development.html'}
],
setup: (editor) => {
editor.ui.registry.addButton('myCustomToolbarButton', {
text: 'My Custom Button',
onAction: function (_) {
editor.execCommand('mceInsertTemplate');
}
})
}
});
Maybe someone can point me to the right direction.
Thanks in advance,
Daniel
Related
I do have an error after installing the tinymce vue js in my project
Here is my Editor.vue
<editor
:init="{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}" />
Then I import
import Editor from '#tinymce/tinymce-vue';
import '#tinymce/tinymce-vue/lib/browser/tinymce-vue.min.js';
export default {
components: {
'editor':Editor
}
}
This is my error
Im using TinyMCE in a project and want the user to select and upload images to the server using its default insert image window.
I want to click the following button:
Open the browsers default file select window and add the selected image to the editor:
My code so far is as follows..
JS:
tinymce.init({
selector: '#html-editor',
language: 'pt_PT',
plugins: [
"bdesk_photo advlist autolink link image lists charmap preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code media nonbreaking",
"table contextmenu directionality paste textcolor colorpicker imagetools"
],
add_unload_trigger: false,
toolbar: "styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media preview | forecolor backcolor table",
image_advtab: true,
file_picker_callback: function (callback, value, meta)
{
$('#html-editor input').click();
//how to get selected image data and add to editor?
},
paste_data_images: true,
images_upload_handler: function (blobInfo, success, failure)
{
// no upload, just return the blobInfo.blob() as base64 data
success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
}
});
HTML:
<div id="html-editor">
<input name="image" type="file" style="width:0;height:0;overflow:hidden;">
</div>
What kind of changes must i make to the file_picker_callback event in order to get the selected file and add it to the editor?
Had the same problem. Using the following fixed it for me, remember that the browser must support FileReader (otherwise just insert your own script).
html (put this anywhere on the html page):
<input id="my-file" type="file" name="my-file" style="display: none;" onchange="" />
js (in the tinymce init config):
file_picker_callback: function (callback, value, meta) {
if (meta.filetype == 'image') {
var input = document.getElementById('my-file');
input.click();
input.onchange = function () {
var file = input.files[0];
var reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result, {
alt: file.name
});
};
reader.readAsDataURL(file);
};
}
}
Try
var imageFilePicker = function (callback, value, meta) {
tinymce.activeEditor.windowManager.open({
title: 'Image Picker',
url: '/images/getimages',
width: 650,
height: 550,
buttons: [{
text: 'Insert',
onclick: function () {
//.. do some work
tinymce.activeEditor.windowManager.close();
}
}, {
text: 'Close',
onclick: 'close'
}],
}, {
oninsert: function (url) {
callback(url);
console.log("derp");
},
});
};
tinymce.init({
selector: 'div#html-editor',
height: 200,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
paste_data_images: true,
automatic_uploads: true,
file_picker_callback: function(callback, value, meta) {
imageFilePicker(callback, value, meta);
}
});
I am trying to extend a tinymce pluggin and need to add an input element of type=file.
(I am new to such an exercise so please pardon my ignorance.. Also could not find examples/samples to work with..)
It seems you can do the following to show elements to a container that opens in a panel :
var generalFormItems = [
{name: 'alt', type: 'textbox', label: 'Image description'},
{name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
];
win = editor.windowManager.open({
title: 'Insert/edit image',
data: data,
bodyType: 'tabpanel',
body: [
{
title: 'General',
type: 'form',
items: generalFormItems
},
],
onSubmit: onSubmitForm });
I am interested in adding an input html of type=file (<input type="file".../>). So there should be the usual html button that will show the 'file dialog' on the browser to allow the user to pick a file. So something like this I am hoping :
var generalFormItems = [
{name: 'alt', type: 'textbox', label: 'Image description'},
{name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
---> {name: 'fileSelect', type: 'file', label: 'Select a File to Upload'},
];
Is it possible to do this and how?
Managed to figure this out and want to leave the answer here for others trying to do something similar.
There is a 'subtype' on each of the UI form elements that will get added to the DOM as is. So doing the below did the trick for me :
{name: 'file', type: 'textbox', subtype: 'file', label: 'Upload', onchange: uploadFile},
In TinyMCE 3.x all dialogs where HTML pages that got loaded into a iframe or window. This was changed in TinyMCE 4 to make it easier to make plugins and fully support CDN:s. But you can still load HTML based pages into TinyMCE dialogs by using the WindowManager.
// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
title: 'Insert/edit image',
url: 'dialogTemplate.html',
width: 700,
height: 600
});
Also you can inline HTML:
// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
title: 'Upload a file to attach',
html: '<input type="file" class="input" name="file" id="file_attach" style="font-size: 14px; padding: 30px;" />',
width: 450,
height: 80,
buttons: [{
text: 'Attach',
subtype: 'primary',
onclick: function() {
// TODO: handle primary btn click
(this).parent().parent().close();
}
},
{
text: 'Close',
onclick: function() {
(this).parent().parent().close();
}
}]
});
I have created a toolbar with menu item in it:
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
padding: '30 0 0 0',
width : '100%',
items: [
{
xtype: 'splitbutton',
text : 'File',
menu: Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [
{
text: 'Import',
// code here
}
]
})
}
]
});
So what I am trying to do is to be able to use Import button just like File->Open.
I know that I can add xtype: 'filebutton', but it shows the browse button with the text field.
Also I want to let the user to choose only certain file extensions. After file is selected (we click open), I want to add it to my file tree in my viewport.
Thanks for any help.
I figured it out by using xtype: 'fileuploadfield' and hiding the file name/text field.
xtype: 'fileuploadfield',
buttonText : 'Open',
buttonOnly: true,
It is as simple as it gets. Just create a toolbar and have this code in its item field.
I am trying to overide the default style of a textfield compontent in Sencha Touch 2. I have tried seperate style sheets and I have tried this as well:
xtype: 'textfield',
name: 'name',
label: 'Blah',
disabled: true,
style: 'color:#000 !important',
value: 'blah blah',
How can I change the font color to black for this texfield?
To style your label, add labelCls config.
To style your textfield, use selector:
input.x-form-field[name="name"]{
color: your_desired_color;
}