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)
})
Related
I have a headache problem regarding the ck editor of zendesk ticket.
I am going to update the ck editor manually in chrome extension by using jQuery.
I can get the HTML value and class name and also add class name into this ck editor.
But when I change the content of this ck editor, it is never changed.
let editable_content = $("#editor-view").find("div[data-test-id='omnicomposer-rich-text-ckeditor']");
editable_content.html("<p>Test Ck Editor</p>");
editable_content.addClass("test-editor");
const editorValue = $("#editor-view").find("div[data-test-id='omnicomposer-rich-text-ckeditor']").html();
The class is added to this content successfully and the value of editorValue is "Test Ck Editor", but the content of ck editor doesn't changed.
zendesk.com/agent/ticket/1 is the URL that contains ck editor.
Please help me to fix this issue.
Thanks.
According to the CKEditor docs, you can get the CKEditor instance from a DOM element using the ckeditorInstance property.
If your HTML is like this:
<!-- The editable element in the editor's DOM structure. -->
<div class="... ck-editor__editable ..." contenteditable="true">
<!-- Editable content. --></div>
Then you can grab the CKEditor instance like this:
// A reference to the editor editable element in the DOM.
const domEditableElement = document.querySelector( '.ck-editor__editable' );
// Get the editor instance from the editable element.
const editorInstance = domEditableElement.ckeditorInstance;
// Use the editor instance API.
editorInstance.setData( '<p>Hello world!<p>' );
For ckEditor 5 (that is currently used by zendesk), all the changes need to be done via the model.
In order to access the model, you have the ckeditorInstance property on the domElement that contains it.
The ckeditorInstance appears only in a background script that is ran with the world as main.
chrome.scripting.executeScript({world: 'MAIN', ...otherOptions})
Once you are able to access the model, then it is as simple (or complex) as writing JS code to change the ckEditor contents.
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.
In CKEditor, I added my custom image button, which directly trigger a file input. However, images can only be rendered when the Image plugin is in use.
I don't want to have 2 image buttons on the toolbar, is there a way to hide the Image button, but still use it (like display: none but in a more structural way?)
Thanks in advance.
Since 'CKEditor 4.1' you have something which is called Advanced content filtering.
This allows you set enable or disable certain tags.
The easiest way to allow the images to be displayed is to add
config.allowedContent = true;
in your config.js file. But this will allow everything.
To just add the enablement of the 'img' tag you can add it in the 'extraAllowedContent' element when you create the CKEditor
var myEditor = CKEDITOR.replace(editorId, {
extraAllowedContent : 'img(*){*}[*]'
});
There is removeButton option for CKEditor config, will it work for you ?
config.removeButtons = 'Image';
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]);
So I have this situation:
I perform an ajax post to a controller action that returns me some complete html source (i.e. if the result was viewed in a browser and you right-clicked and selected view source, all of that is what gets returned).
Now I want to be able to print that html source as if was being displayed in a browser (i.e. not the markup but what a user would actually see if it was being displayed in a browser).
This must be done without opening a new tab or window or popup window. Is it possible? And if so how?
Thanks
How about with a temporary, invisible iframe?
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.contentDocument.open();
iframe.contentDocument.write(html_source_here);
iframe.contentDocument.close();
iframe.contentWindow.print();
document.body.removeChild(iframe);
Yes, You can do it by creating a DIV and add the HTML by calling the innerHTML function.
document.getElementById('yourNewDIV').innerHTML = htmlReceived;