Good day all.
I wanna create direct upload of images via tiny.
https://codepen.io/Cere6ellum/pen/qBdRGmx
tinymce.init({
selector: '#editor',
// images_dataimg_filter: function(img) {
// return img.hasAttribute('internal-blob');
// },
plugins: 'image code',
toolbar: 'undo redo | link image | code',
/* enable title field in the Image dialog*/
image_title: false,
image_dimensions: false,
image_description: false,
automatic_uploads: false,
/*here we add custom filepicker only to Image dialog*/
file_picker_types: 'image',
/* and here's our custom image picker*/
file_picker_callback: function (callback, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
/* call the callback and populate the Title field with the file name */
callback(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
}
});
How i can hide shown address of added image in the input field (source)?
Or if it's impossible, how i can change this shown (blob:https://) address to something like /images/75bcd4b4-217c-4d8b-91e4-425736223cd1
Or, if it's impossible too, how i can remove input field of source? Can i place only "add image" button in the form?
Related
I've setup tinyMCE to do image uploading and it displays uploaded images in the editor, but on inspecting the source of the editors HTML I can see that the src attribute is set like it would be a file path:
<img src="../../../api/images/1"/>
I have a file_picker_callback which POSTs the image to my backend server to save the image, and returns an absolute URL in the "location" key as specified in the tinyMCE docs: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url
But I am unsure why regardless of providing an absolute URL the src set on the image begins with "../../../".
The relevant tinyMCE configuration:
tinymce.init({
file_picker_types: 'file image',
file_picker_callback: function(cb, value, meta) {
let tinyMCE = this;
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*,.doc,.docx,.txt,.rtf,.odt,.pdf');
input.onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
// Register the blob in TinyMCEs image blob registry.
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinyMCE.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
backend.save(file).then(
fileLocation => {
let options = {};
if (meta.filetype == 'file') {
options = {
title: file.name,
text: 'My Attachment'
};
}
cb(fileLocation, options);
},
(/* error */) => {
blobCache.removeByUri(blobInfo.blobUri());
}
);
};
reader.readAsDataURL(file);
};
input.click();
}
});
I can see that there is an options object I can pass to the callback which sets some element attributes of the image, but I can't find a reference to what this object can contain in the docs :(
Would like some help to solve this and get absolute URLs in my image srcs, thanks
convert_urls: false,
By default all URLs are automatically converted to relative URLs. If you want to insert the real URL of the uploaded image, set convert_urls option to false. It will restore URLs to their original values.
I am using TinyMCE plugin. Currently, my font-size option comes with list dropdown but I want slider for font size.
Is this possible with the TinyMCE. Anyone know how can I achieve this with TinyMCE editor?
TinyMCE does not have a built in way to select font size via a "slider". As TinyMCE is open source you can always modify the editor's code to meet your needs.
If you look in the main tinymce.js file you will find code like this:
editor.addButton('fontsizeselect', function() {
var items = [], defaultFontsizeFormats = '8pt 10pt 12pt 14pt 18pt 24pt 36pt';
var fontsize_formats = editor.settings.fontsize_formats || defaultFontsizeFormats;
each(fontsize_formats.split(' '), function(item) {
var text = item, value = item;
// Allow text=value font sizes.
var values = item.split('=');
if (values.length > 1) {
text = values[0];
value = values[1];
}
items.push({text: text, value: value});
});
return {
type: 'listbox',
text: 'Font Sizes',
tooltip: 'Font Sizes',
values: items,
fixedWidth: true,
onPostRender: createListBoxChangeHandler(items, 'fontsize'),
onclick: function(e) {
if (e.control.settings.value) {
editor.execCommand('FontSize', false, e.control.settings.value);
}
}
};
});
This is how the current select list is implemented - you can always replace this with logic to implement font selection in a different manner.
I am having a bit of trouble setting the style on a L.geoJSON based layer,my code looks like this:
var addProperties = function addProperties(prop,map)
{
//the API does not seem to support adding properties to an existing feature,
//the idea here is simple:
//(1) currentFeature.toGeoJson() needs to be called to obtain a json representation
//(2) set the properties on the geojson
//(3) create a new feature based on the geojson
//(4) remove res and add the new feature as res
var style = function style(feature){
var markerStyle = {
draggable: 'true',
icon: L.AwesomeMarkers.icon({
icon: 'link',
prefix: 'glyphicon',
markerColor: 'red',
spin: true
})
};
if(feature.geometry.type==='Point')
return markerStyle;
};
var onEachFeature = function onEachFeature(feature,layer){
console.log("Inside on each feature,checking to see if feature was passed to it ",feature);
layer.on('click',function(e){
//open display sidebar
console.log("Checking to see if setupTabs exists ",setupTabs);
setupTabs('#display-feature-tabs');
console.log("Checking to see if featureInfo exists ",featureInfo);
var featureInfoAPI =featureInfo('feature-properties');
featureInfoAPI.swap(feature.properties);
setTimeout(function() {
sidebar.show();
}, 100);
});
};
console.log("Inside add properties");
var geoJSON,feature;
if(res != null)
{
geoJSON = res.toGeoJSON();
geoJSON.properties = prop;
console.log(geoJSON);
feature = L.geoJson(geoJSON,{style:style,onEachFeature:onEachFeature});
console.log("The new feature that has been created ",feature);
removeFeature(map);
addFeature(feature);
feature.addTo(map);
}
};
I have also tried the style method as well,I am looking to add styles to the active layer for points(styles will also be added for lines and polylines by type).
To style point features, you should use pointToLayer option instead.
I am setting up Jquery-File-Upload for my website. The script is you can see here:
http://blueimp.github.io/jQuery-File-Upload/
This script automatically creates preview thumbnails of image files, however, it allows to select any files (doc, pdf etc). If user selects such a file, the script shows error "File type not allowed" but doesn't show any thumbnail. I want to set up a default thumbnail image for all non-image files.
I modified jquery.fileupload-image.js file:
Original:
setImage:function(data,options){
if(data.preview&&!options.disabled){
data.files[data.index][options.name||'preview']=data.preview;
}
return data;
}
My modification:
setImage:function(data,options){
if(data.preview&&!options.disabled){
data.files[data.index][options.name||'preview']=data.preview;
} else {
data.files[data.index][options.name||'preview']='<img src="/images/default-thumbnail.png">';
}
return data;
}
It works perfectly but the problem is that I will use this script in different sections of my website and thumbnail size always will be different.
So, I need to define default thumbnail in my html file. I tried:
var defaultthumbnail = '<img src="/images/default-thumbnail.png">';
or in options:
defaultthumbnail: '<img src="/images/default-thumbnail.png">'
but it doesn't work. The script doesn't return image and doesn't show any error.
Any ideas?
<script>
$(function () {
var formData = $('#fileupload').serializeArray();
var defaultthumbnail = '<img src="/images/default-thumbnail.png">';
'use strict';
$('#fileupload').fileupload({
url:'//mydomain.com'
});
$('#fileupload').fileupload('option', {
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
autoUpload:false,
maxNumberOfFiles:10,
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent)
});
if ($.support.cors) {
$.ajax({
url: $('#fileupload').fileupload('option', 'url'),
type: 'HEAD'
}).fail(function () {
$('<div class="alert alert-danger"/>')
.text('Upload server currently unavailable - ' +
new Date())
.appendTo('#fileupload');
});
}
});
</script>
Looks that Jquery-File-Upload project is abandoned...
So if you want to show a default thumbnail for unsupported file types, do the following:
<script>
var defaultthumbnail = '<img src="/images/default-thumbnail.png" />';
$(function () {
var formData = $('#fileupload').serializeArray();
'use strict';
..............
..............
</script>
in jquery.fileupload-image.js file
change
setImage:function(data,options){
if(data.preview&&!options.disabled){
data.files[data.index][options.name||'preview']=data.preview;
}
return data;
}
to
setImage:function(data,options){
if(data.preview&&!options.disabled){
data.files[data.index][options.name||'preview']=data.preview;
} else {
data.files[data.index][options.name||'preview']=defaultthumbnail;
}
return data;
}
I'm looking at the example here and using the javascript provided from that example here. Basically what I want is a stand alone file chooser where I can select as many files as I want. The example that I've tried has a stand alone upload button but they don't let me shift highlight multiple files at the same time.
This code creates the button, but I can't load in multiple files at the same time:
var addFilesButton = new Ext.ux.form.FileUploadField({
buttonText: 'Add Files...',
buttonOnly: true,
listeners: {
'fileselected': function(fb, v){
var Record = myGrid.getStore().recordType;
var newFile = new Record({
fileName: v,
type: 'src',
version: '5.9',
});
myGrid.stopEditing();
myGrid.getStore().add(newFile);
myGrid.startEditing(0, 0);
}
}
});
Ext.ux.form.FileUpload uses HTML INPUT field to set a file to upload which is pretty normal thing to do.
If you are using HTML4, at most one file can be assigned to input file field.
However, from HTML5, there is a special attribute that you can set to accept multiple files.
I have modified the script accordingly and created a demo.
Note that HTML5 spec is still in draft. Feature compatibility table is available on caniuse.com
My MultiFileUploadField class:
MultiFileUploadField = Ext.extend(Ext.ux.form.FileUploadField, {
multiple: false,
createFileInput: function() {
this.fileInput = this.wrap.createChild({
id: this.getFileInputId(),
name: this.name||this.getId(),
cls: 'x-form-file',
tag: 'input',
type: 'file',
size: 1
});
if(this.multiple){
this.fileInput.dom.setAttribute('multiple', 'multiple');
}
},
bindListeners: function(){
this.fileInput.on({
scope: this,
mouseenter: function(){
this.button.addClass(['x-btn-over','x-btn-focus'])
},
mouseleave: function(){
this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
},
mousedown: function(){
this.button.addClass('x-btn-click')
},
mouseup: function(){
this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
},
change: function(){
var v = this.fileInput.dom.files;
this.setValue(v);
this.fireEvent('fileselected', this, v);
}
});
},
});