I'm trying to implement my own image browser in CKeditor and I don't understand how to send back the url of the chosen image to the editor.
I have created a plugin to display a button in the editor toolbar, the button works fine and opens a div with my image browser in it. Until there, no problem.
Textarea used:
<textarea id="page_article"></textarea>
CKeditor init:
CKEDITOR.replace('page_article', {"extraPlugins" : 'imagebrowser'});
My browser displays a list of image and for each image I use a button to insert the image back into the editor.
<button id="action" image_url="[Real_Image_URL]">AddImageToEditor</button>
I capture clicks on button with this function:
$( document ).on("click", "button", function()
{
// CAPTURE IMAGE URL
var img_url = $(this).attr('image_url');
}
What should I use to send back the img_url to the editor? I have tried the insertHTML but I can't get it to work.
Example:
CKEDITOR.instances.page_article.insertHtml('blablabla');
Thanks!
Laurent
Have you read through this documentation:
http://docs.ckeditor.com/#!/guide/dev_file_browser_api
You will likely need call window.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl [,data]);
Related
I'm using CKEditor and I want to allow people to place images by using a URL, but not upload. I can't figure out how to accomplish that. My toolbar is:
toolbar: {
items: [
'heading','|','bold','italic','link','bulletedList','numberedList','|','indent','outdent','alignment','|','HorizontalLine','ImageInsert','BlockQuote','InsertTable','MediaEmbed','Undo','Redo','|','FontColor','FontSize','Strikethrough','Subscript','Superscript'
]
},
Originally it had 'ImageUpload', so I removed that thinking it would work yet the image icon for ImageInsert, when clicked directly, opens the browser file dialog for an upload. You have to hit the down arrow to get the URL. What should I change it to such that clicking the icon opens the URL dialog directly?
Thanks!
PS, I inherited this, I didn't make it initially and as such I have no idea what version of CK it is nor how to determine that, sorry.
Try This :
CKEDITOR.editorConfig = function( config ) {
....
config.removePlugins = 'easyimage, cloudservices';
....
};
Then click on image tab on Editor and insert your Image Url In Url Field
I'd like to attach images to certain cells of my Google spreadsheet, to appear upon hovering the mouse upon that cell, similar to how the native text-only regular cell notes (Shift+F2) appear.
Natively, Google Sheets supports inserting images in the cell. My image sizes are however too big, and I'd have to make the row/column width/height huge for them to be displayed at 100%. Plus, I'd want the images to only appear upon mouseover, and not always be visible.
(I should add that the functionality I describe is actually very easily achievable in Excel, which allows setting a picture-background for cell comments, something that Google Sheets does not.)
I discovered a Google Sheets addon which seems to extend regular cell notes to include richer content, including images. Inconveniently, it requires each image be uploaded to an image server rather than be loaded from the PC. That would have still been fine, except I couldn't get it to achieve the above stated goal.
Finally, I found this suggested workaround, which for me does not work, in the sense that the image is not loaded as a preview upon mousing over the URL (whether it ends with .jpg or not), only the URL itself is:
Interestingly, the effect I'm after actually exists in Google Docs, when the link isn't even an image but just a page:
Issue:
There is no native way to trigger actions on hover events in Sheets, and there is no way to retrieve images that have been uploaded from the computer and don't have a valid URL. This greatly limits what you can accomplish.
Nevertheless, there are workarounds available that can get you close to the functionality you're asking for.
Workaround (showModelessDialog):
You could, for example create a modeless dialog whose purpose would be to show the image corresponding to the selected cell.
Ideally, onSelectionChange trigger would be used, since this trigger to refresh the modeless dialog with current image when the user changes the selected cell, but since creating a modeless dialog requires authorization, simple triggers cannot run services that require authorization, and onSelectionChange is only available as a simple trigger (cannot be installed), that won't be possible.
So one possible workflow could be the following:
Show a modeless dialog when the spreadsheet is opened by a user.
The user selects the cell with the image that should be shown.
User clicks a button in the modeless dialog (or the previous image) to refresh the modeless dialog with the currently selected image.
How to do this:
To achieve this, you can follow these steps:
Install onOpen trigger that creates modeless dialog when the user opens the spreadsheet (the trigger needs to be installed, since, as I mentioned, simple triggers cannot use services that require authorization). To do that, go to the Apps Script editor (selecting Tools > Script editor), copy this function to your Code.gs file, and install the trigger following these steps:
function onOpenTrigger(e) {
var html = HtmlService.createTemplateFromFile("Page").evaluate()
.setWidth(800) // Change dimensions according to your preferences
//.setHeight(600) // Change dimensions according to your preferences
SpreadsheetApp.getUi()
.showModelessDialog(html, "My image");
}
Create the HTML template corresponding to the modeless dialog. The idea here would be: when the page loads, the currently selected image is shown. If the button (or the image itself) gets clicked, the page will refresh with current image (see retrieveImage and refreshImage). Create an HTML file in the editor via File > New > HTML file, and copy the following code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body onload="retrieveImage()">
<img id="currentImage" onclick="retrieveImage()" alt="No image is selected" width="600">
<button onclick="retrieveImage()">Click to refresh image!</button>
</body>
<script>
function retrieveImage() {
google.script.run.withSuccessHandler(refreshImage).getSelectedImage();
}
function refreshImage(imageUrl) {
if (imageUrl) document.getElementById("currentImage").src = imageUrl;
}
</script>
</html>
Back in your script file (.gs), create a function to retrieve the image URL from current cell (in case this cell has an image). This function will get called by the modeless dialog when it loads and when its button is clicked. It could be like this (regex is used to retrieve that — see this answer:
function getSelectedImage() {
var formula = SpreadsheetApp.getActiveRange().getFormula();
var regex = /=image\("(.*)"/i;
var matches = formula.match(regex);
return matches ? matches[1] : null;
}
Note:
You can adapt the dimensions of both the selected image (<img width="" height="">) and the modeless dialog (.setWidth, .setHeight) according to your preferences.
Reference:
Dialogs and Sidebars in G Suite Documents
Installable Triggers: Managing triggers manually
getActiveRange()
We currently have code that handles all our image uploads via Dropzone.js. This includes functionality to paste from the clipboard and upload via dropzone.js, which currently works. This is that event code:
document.onpaste = function(event)
{
alert('pasted');
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (index in items) {
var item = items[index];
if (item.kind === 'file') {
// adds the file to your dropzone instance
myDropzone.addFile(item.getAsFile());
}
}
}
Following this, we have added a CKEditor (v4.10) html text editor to that page. The CKEditor has its own clipboard handling built in. If you activate the CKEditor (for example by clicking the text area), the CKEditor effectively takes control of the clipboard from that point. Which is correct, because we want the editor to be able to copy and paste text still.
However, CKEditor does not natively have image uploading built into it. It requires a plugin. But we would prefer not to use this plugin, and rather intercept the paste event, and if the data pasted is an image, pass that along to our dropzone.js handler instead.
While I am able to intercept that event, I am not sure what event data (if any) I can extract from the CKEditor paste event to pass along to the Dropzone handler. Here is the code so far:
var editor = CKEDITOR.instances.NoteText;
editor.on( 'paste', function( event )
{
alert('pasted ck');
console.dir(event);
//myDropzone.addFile(item.getAsFile());
} );
I have tried inspecting the event to see if anything is available for me to use, but don't seem to find anything.
Is what I'm trying to accomplish possible? Is it possible for me to somehow find and pass along the pasted event data from CKEditor to DropZone? Or am I going to have to implement the CKEditor image upload plugin?
Thanks.
I am trying to save a link in DotNetNuke (DNN) using the CKEditor for the HTML module.
When I save, the editor will automatically adjust the link.
I am trying to save it as
data-src="#bronze"
The reason for the hashtag is for displaying a fancybox pop-up with hidden content. https://fancyapps.com/fancybox/3/docs/#inline
But the editor adds /portals/2/ in front of this URL.
I have looked at this article below.
CKEditor - Change image source
I assume the CKEditor is saving the SRC and Href links in protected mode for browsers. Is there a way that I can turn this off in the settings?
I did try to change to RAW mode, but it still does the same thing.
I face the same problem on data-fancybox-href, the only solution I can think of is using jQuery / javascript to change back to correct value:
var src = $(".more_info_btn")
$.each(src, function(){
var href = src.attr("data-src")
var hrefArr = href.split("#")
href = "#" + hrefArr[hrefArr.length-1]
$(this).attr("data-src", href)
})
I'd like to append a radio button for each preview element like a default or primary photo function. How can I do it without touching the dropzone.js code and how to post the dropzone form even if there's no newly uploaded file, e.g. the dropzone form is showing files from server and I only want to tick a default picture.
myDropzone.on("addedfile", function(file) {
// Add default option box for each preview.
var defaultRadioButton = Dropzone.createElement('<div class="default_pic_container"><input type="radio" name="default_pic" value="'+file.name+'" /> Default</div>');
file.previewElement.appendChild(defaultRadioButton);
});