I am using ck editor in my custom portlet.Liferay version 6.2 CE
I want to place content in the caret position in ck editor with ajax call.
You can use setData method from CKEditor's API for replace existing data:
$.ajax("url")
.done(function(data) {
CKEDITOR.instances["<instance_name>"].setData(data);
});
For insert data into current caret position is method insertHtml:
$.ajax("url")
.done(function(data) {
CKEDITOR.instances["<instance_name>"].insertHtml(data);
});
Good explanation for setting caret position is in this thread
Hi Thanks for the answer but. the Api is a bit different in Liferay compared with ck editor.
The methods insertHtml and get ranges are not there in Liferay ck editor
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.
Ckeditor is magic, but it was programmed to mess with me.
I've linked to the CDN and instantiated a textarea that is given the id cke_quotation. In the original textarea, I had a jquery function that on keyup and focusout, there was a count for characters. Now I want to link this function to the ckeditor quotation, which has the id cke_quotation. It won't work, though. What am I doing wrong?
CKEditor doesn't work on plain textarea - it's working with contenteditable element instead. If you would like to listen for key events you'd need to listen to, so called, editable.
var editor = CKEDITOR.instances.quotation;
editor.editable().on( 'keydown', function( evt ){
console.log( 'keydown', evt );
// You could call editor.getData() to get current editor
// contents and then count anything you like.
} );
But instead of looking for events like keydown you should be more interested in more "input agnostic" event like change (because change might be caused by different sources, like paste, cut, drag and drop).
Then again if you're looking for word counting feature for CKE then why bother with creating your own plugin? You could simply use something like wordcount plugin.
My question is related to set focus on ace editor
This time I want to delete the content whenever there is a validation error.
I have the used the pattern like
/^[0-4]$/ and /^([1-9][0-9]{0,3}|[1-5][0-9]{4}|60000)$/;
to check the value between 0-4 and 1-60000 respectively. When user provides invalid data my text area is cleared but not the ace editor. I also tried
$scope.close = function () {
rowObj.entity.value = editor.getValue();
editor.setValue("",0);
};
but that is not working.
to clear editor simply call editor.setValue("")
I am working with CKEditor 4.0.1.1 in an intranet and try to validate my code with W3C markup validation service.
The validation markup service find this error :
Error Line 547, Column 2455: there is no attribute "data-cke-saved-src"
<img alt="" data-cke-saved-src="http://portail-rep/Contents/images/Java…
How can i disable this functionnality of ckeditor protecting code to make my code ok for W3C validation ?
CKEditor uses many special attributes and elements to implement some of its features. However, they are used only internally and should be stripped out when getting data by editor.getData(). Therefore editor produces valid markup.
E.g. open http://ckeditor.com/demo, switch to source mode and you'll see that the image doesn't have the data-cke-saved-src attribute. However, if you'll use Firebug or Webkit's dev tools you'll find that the image has this attribute.
PS. In fact, data-cke-saved-src is a valid attribute in HTML5.
I had same problem now. This problem has been solved by using CKEDITOR config on blur event.
I'am using inline editing on element.
My ck config contain on blur event which have destroy method.
CKEDITOR.config.on = {
blur: function() {
this.destroy();
}
}
Using is simply:
On element click will create instance of new editor and it enable inline editing.
Now if user click outside of editor and on blur event invoked, editor destroy it self and if no editor instance exist, the content of the data is cleaned from data-cke attributes.
I am using a modal popup up control in jQuery, the popup has an input text powered by jQuery Tokenize input plugin. The problem is when i type something on modal popup text box, the search results by tokenize plugin are shown hidden under the popup. Actually they should apprear on top of all controls. Would someone please help me as I am a beginner.
Try to seek help from thread below, zindex is not working.
https://github.com/loopj/jquery-tokeninput/issues/190
here is the input control that i am using.
http://loopj.com/jquery-tokeninput/demo.html
Thank you.
It works by setting the z-index manually:
$(".token-input-dropdown").css("z-index","9999")
The function given in
https://github.com/loopj/jquery-tokeninput/issues/190
does not work in my coffeescript:
$('#book_author_tokens').tokenInput('/authors.json', {
zindex: 9999
});
I think that a better solution is to add it to the css file (instead of doing it via js):
div.token-input-dropdown-facebook {
z-index: 11001 !important;
}
Of course, drop the "-facebook" suffix if you're using the default theme.