I have a site where people post news, it is written in PHP.
Up to now, people who post stories had a textarea for the text input, and a form field to upload an image for the story.
Now I am upgrading the site, and I am considering giving people more flexibility, so I plan to use a javascript WYSIWYG text editor.
After reviewing the most popoular, or at least the ones I found googling, I think tinyMCE is the best documented and thats why I think I'm going to go with it, though I've just worked with it for around 4-5 hours, so I don't really care if I'll have to switch to another editor.
When you drag-drop images in the textarea, tinyMCE encodes the image in base64 and uses it as the src attribute for the image tag.
I was wondering, is there a way to make tinyMCE upload the images to the server as files so that I can handle them with php (make thumbnails, name and store them as I wish)?
If not, is there an editor where that would be an option?
I recommend "Responsive File Manager"
Which is a free open-source file manager and image manager made with the jQuery library, CSS3, PHP and HTML5 that offers a nice and elegant way to upload and insert files, images and videos.
GREAT FEATURES :
Upload files with a simple drag & drop.
Use as stand-alone file manager, as TinyMCE, CKEditor or CLEditor plugin or as crossdomain.
Many customisation parameters such as Automatic resizing of uploaded
images, Optional limiting of image dimensions, Files allowed lists.
Full preview of uploaded images, videos and audios.
Automatic creation of thumbnails and Automatic realignment of thumbnails after external changes
and ...
There is another plugin for tiny mce which is free and open source. You can use this
http://justboil.me/tinymce-images-plugin/
There is a paid plugin file manager called MCImageManager
Or you could integrate uplodify or such into the add image popup, then when an image is uploaded update the tinyMCEImageList.js file.
Here's a simple option for uploading images from TinyMCE directly from a toolbar button using Plupload without needing additional popup windows. Note - this allows you to select the file using your file picker but doesn't support drag drop.
Add a button to tinymce with an ID 'mybutton' and no click event:
tinymce.init({selector:'.use-tinymce',
plugins: "code link visualblocks",
menubar: false,
extended_valid_elements : "span[!class]",
toolbar: "undo redo | formatselect | link code | mybutton",
visualblocks_default_state: true,
setup: function(editor) {
editor.addButton('mybutton', {
type: 'button',
title: 'Insert image',
icon: 'image',
id: 'mybutton'
});
editor.on('init', function(e) {
var pluploadHandler = new PluploadHandler(jQuery, plupload);
});
}
});
Reference this button in the Plupload initialization:
var PluploadHandler = function( $, plupload ) {
...
this.uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : document.getElementById('mybutton'),
url : '/path/to/upload/the/image',
You'll need to write the server side code for your upload path /path/to/upload/the/image to save the image and respond with the URL to the new image.
Lastly catch the uploaded response and add your image tag to TinyMCE:
this.uploader.init();
this.uploader.bind("FilesAdded", handlePluploadFilesAdded);
this.uploader.bind("FileUploaded", handlePluploadFileUploaded);
function handlePluploadFilesAdded(up, files) {
console.log("+ handlePluploadFilesAdded");
up.start();
}
function handlePluploadFileUploaded(up, file, res) {
console.log("++ res.response: " + JSON.stringify(res.response));
var img = "<img src='" + res.response + "?" + Date.now() + "'>";
tinymce.activeEditor.execCommand('mceInsertContent', false, img);
}
}
Full source code is here (Tested on TinyMCE 4.1.9; Plupload 2.1.2):
https://gist.github.com/danielflippance/e1599fd58ada73b56bfb
Try PDW File Browser. Unlike its web page, it is really good (and intuitive, in my opinion, since it offers GUI similar to MS Windows File Explorer).
Related
I'm using tinymce with image upload using the package "laravel-tinymce-simple-imageupload". When the user enters some content in the textarea and clicks the form submit button I want to put the content in the textarea in a pdf file. I have the code below.
The issue is that in the pdf file, if is inserted an image in the textarea, the image doesn't appear in the pdf and in the pdf appears "Image not found or type unknown".
Do you know what can be the issue?
The image is stored like this in the content column of the certificates table:
<p>test<img src="/img/image_15zdbBr.jpeg" alt="" width="1200" height="900" /></p>
Code to get the pdf:
$certificateContent = RegistrationType::with('certificate')->where('id', $request->registrationType)->first();
$pdf = app()->make('dompdf.wrapper');
$pdf->loadHTML($certificateContent->certificate->content);
return $pdf->download('test.pdf');
Tinymce code has relative_urls as false:
tinymce.init({
selector:'textarea',
plugins: 'image code link',
relative_urls: false,
file_browser_callback: function(field_name, url, type, win) {
// trigger file upload form
if (type == 'image') $('#formUpload input').click();
}
});
I already use "setOptions(['isHtml5ParserEnabled' => true, 'isRemoteEnabled' => true])" but also dont works with that, it show the same error.
It seems that the issue can be because is necessary to change the url path of the image. But Im not understanding how to do that since the user only selects a image in the the tinymce textarea how to change the absolute path of that image.
This is a reported issue: https://github.com/dompdf/dompdf/issues/1659 .
Suggest you:
set relative_urls to true (this will set the image as img/image_15zdbBr.jpeg, and
set $dompdf->setBasePath($base_path) where $base_path is where the files sit. (https://github.com/dompdf/dompdf/wiki/Usage#setbasepath)
Edit with salient bits from chat:
As you are using a wrapper for Laravel, You need to get a handle on the domPDF class which you will do through $pdf->getDomPDF()->setBasePath();
As the relative file path is ../../../image/file.jpg, this means "start at the "base directory, go back one, go back one, go back one, go into img/, find file". So the "base directory" needs to be ahead of the the files to take accound for the fact you're going back.
Working example:
Your actual file is located (for real) in /home/john/projects/proj/public/img/image.jpeg
Relative file path (provided) = ../../../img/image.jpeg
So you configure your setBasedirectory = /home/john/projects/proj/public/a/b/c/
Combined this gives you /home/john/projects/proj/public/a/b/c/../../../img/image.jpeg
Which is the same as /home/john/projects/proj/public/a/b/../../img/image.jpeg
Which is the same as /home/john/projects/proj/public/a/../img/image.jpeg
Which is the same as /home/john/projects/proj/public/img/image.jpeg = Bingo.
If this doesn't work, adjust your setBaseDirectory until you get the right path.
I'm wondering what the best approach would be for the following problem, keeping page speed in mind.
A connector syncs product data (including product images) from retail software to a PHP-based eCommerce solution like Magento.
This connector only syncs product images at a 550x550 resolution.
There is no way to alter the connector or grab larger images from the retail solution.
The person in question has a directory with higher resolution images that -for arguments sake- will match the filename from the original file with an -optional- size suffix.
How can we automatically and dynamically, on page load / image load, replace the low resolution image src with the high resolution image src?
In short: how to replace src="/path/to/low/resolution/image/shoe1.jpg with src="/path/to/high/resolution/image/shoe1-1024x1024.jpg" dynamically without writing rules specifically for that single image. As in: shoe2.jpg > shoe2-1024x1024.jpg should also work
Additionally: we do -not- have to check for missing images in the high resolution image directory. We just want to -always- replace the low resolution source url.
I was thinking about replacing the values through javascript with/without jQuery. Would that do the job?
Here's a jQuery solution:
var highRezPath = "/path/to/high/resolution/image/",
appendToFilename = "-1024x1024";
$(document).ready(function(){
$('img').each(function(ind, img){
var $img = $(img),
oSrc = $img.attr('src').split('/'),
fileName = oSrc[oSrc.length-1].replace('.', appendToFilename +'.'),
newSrc = highRezPath + fileName;
$img.attr('src', newSrc);
});
});
See it in action here (use the web inspector to see the altered src attributes)
I'm using Extjs along with PHP (no framework) in one of my projects. I've a requirement to play video on the same panel/tab without opening a new one. I can download videos by clicking on the download button or clicking on the link to video, present on the panel. But I need to play the video on the same page without affecting it's quality. (Generally using .mp4 videos).
I've not found any helpful method/feature with Extjs so far.
I set up a website with ExtJS 4.2 and included several mp4 videos. It is pretty easy. If you want to place the video into a window, here is some code that might help you.
window = Ext.widget('window',{
x:5,
y:5,
renderTo: Ext.getBody(),
width: 410,
height: 265,
html: '<video width="400" controls><source src="test.mp4" type="video/mp4"><source src="test.ogg" type="video/ogg"></video>'
}).show();
You should use some html5\flash video player (for example flowplayer), then render player (read player docs how to do this) to specific html element.
container.add({
xtype: "panel",
html: '<div id="place-for-video"></div>',
listeners: {
show: function() {
// Create your player instance and render him to html element with id "place-for-video"
}
}
});
//
I'm creating a slideshow with 5 frames (each of which will have its own slideshow of images) with huge images and it takes some time for the first few images in each frame to be loaded(the rest of the images are loaded really fast). So I was thinking I could preload a simple black images (the background is black) and then start my slideshow once I know the images have loaded. Also, the slideshow images are dynamic, ie their urls change every day.
Does anyone know how I could do that? Because what I've found online only preloads an image but says nothing about how to start my slideshow after that.
Or if anyone has a better solution, please let me know!
FYI, for the slideshow I've used PHP to extract the image urls into a file and JavaScript to read them from it and display them in the slideshow.
Thanks!
A good way to preload images is to load them outside of the frame using css with position: absolute, i can remember reading that using display: none; it would not get downloaded by Safari.
This seems to be an elegant way to precache the images.
"Per Paul Irish, the canonical plugin for detecting image load complete events is now at:
https://github.com/desandro/imagesloaded"
Source: jQuery event for images loaded
This should work
/*You could populate this array through an xml to something if there are too many images*/
var arrUrls = ["image1.jpg", "image2.jpg", "image3.jpg"];
var nLoadCount = 0;
for(var i=0;i<arrUrls.length;i++)
{
var oImage = new Image ();
oImage.onload = function ()
{
nLoadCount++;
if(nLoadCount == arrUrls.length)
{
/*Show your content here*/
}
}
oImage.src = arrUrls[i];
}
Simple question with yes/no answer and if yes...then how?
Suppose you have an HTML page with an image on it without any sort of watermark.
Is it possible to place a watermark on that image if a user saves it to their computer?
I need a simple function that watermarks an image upon download or save...
I do understand that once the image loads in the browser, it is technically downloaded, so is there a way to display the image without a watermark on screen, and if the user opens browser cache, he/she finds a watermarked copy?
If anybody has done this using any platform (PHP, GD, jQuery, etc.), your contribution would be appreciated.
One trick might be to combine 2 images, so they become one.
I have image A:
Then I add image B (watermark version)
So when you display the image for the user you use one as background and the other one as image, so when user tries to download, they will get only one part. Of course as already mentioned, the user will be able to get all they can see on the screen, but most users won't be able to combine the images properly.
Please note that the image on top must be transparent.
I would recommend doing this server side and cache the modified images when you have cut out the watermark
Here you can read how to do it with PHP: http://www.sitepoint.com/watermark-images-php/
I personally don't think that it is possible with javascript, because as you already have said yourself, it is already downloaded.
But don't nail me on that.
On the server side it is for sure possible, as you can see in the above link.
A possible alternate solution is to contain the image inside an element with a hidden overflow.
For example:
Your image has a height of 200px, you add an extra 20px watermark (when uploading) at the bottom of the image (so it isn't actually on top of the image). So the total image now has a height of 220px; but you place it inside an element give that element a 200px height and a hidden overflow.
You can change the source of the image when a user right-clicks it. This way you can change the source to the watermarked version when the user tries to save the image.
Yes, the user will already have the non-watermarked version in their cache, but only advanced users are going to know how to get to those images.
$('img').on('mousedown', function (event) {
//check which mouse button was clicked, 1 == left, 2 == middle, 3 == right
if (event.which == 3) {
//update the source of this image
this.src = this.src.replace('.jpg', '_watermarked.jpg');
}
});
Here is a demo: http://jsfiddle.net/s6A9m/
Anything that the user can see they can take. There is no way to watermark ONLY if downloaded. When an image is displayed in the browser it has already downloaded.
There are several approaches you could take. I would recommend you use PHP to add the watermark to the image before it is displayed. This means that all protected images on the site will display a visible watermark. A second approach I have seen used is to display a low quality version that is not watermarked, but restrict the full quality version to only those who are supposed to see it.
Yes it is possible. All you have to do is,
Call the download function, in which we can implement the downloading of watermarked images.
I have used AngularJS, HTML, JQuery and watermarkJS which you find here(http://brianium.github.io/watermarkjs/)
HTML:
Download Sample
Javascript:
$scope.selectedWatermarkType = 'Text';
$scope.selectedPosition = 'Bottom-left';
$scope.text = 'Sample Watermark';
$scope.size = '45';
$scope.selectedFont = 'Arial';
$scope.ColorCodeGlobalObj.colorcode = 'ffff';
$scope.DownloadSample = function () {
if ($scope.selectedWatermarkType == 'Text') {
if ($scope.selectedPosition == 'Bottom-left') {
watermark(['/assets/js/node_modules/watermarkjs/examples/img/shepherd.jpg'])
.image(watermark.text.lowerRight($scope.text, $scope.size + 'px ' + $scope.selectedFont, '#' + $scope.ColorCodeGlobalObj.colorcode, 0.5))
.then(function (img) {
saveImageAs(img);
});
}
}
'img' is the watermarked image object which can be used to download the image.
function saveImageAs(imgOrURL) {
imgOrURL.src.replace('image/png', 'image/octet-stream');
if (typeof imgOrURL == 'object')
imgOrURL = imgOrURL.src;
var link = document.createElement("a");
link.setAttribute("href", imgOrURL);
link.setAttribute("download", 'watermarkSample.png');
link.click();
}
This code performs download of watermarked image. Still the unwatermarked image is available in the mentioned srcpath which can be appended to an 'img' tag and can be viewed.
Hope this helps !