I am creating my CKEditor on a dynamically created div. It seems that CKEDITOR.instances holds the instance with an Id of 'elementX' where X is the index of the instance created.
I want to be able to managed the name myself so I can destroy the editor when the editor is closed down.
I've tried setting the 'Name' property on the CKEDITOR using the callback function in the JQuery CKEDITOR adapter wrapper and also the config object passed into the editor, but I'm not having any luck.
Can anyone suggest a way of being able to ensure that the name CKEDITOR assigns to the editor is predictable so I can destroy it?
I'm aware that CKEditor seems to name editors normally by the element ID. However, I don't have an id on the element.
The "instanceCreated" event is fired for every editor instance created.
CKEDITOR.on( 'instanceCreated', function ( event, data ) {
var editor = event.editor,
element = editor.element;
editor.name = $(element).attr('name');
} );
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 automatically generates an id like 'cke_xxx'.
Is it possible to set my own id to CKEditor instance?
Ckeditor will create the instance name based on the DOM element it was related to ( usually id attribute ), so you can customize the instance name based on that.
If you are more referring to changing the id of the actual DOM element that CKEditor creates, I don't think there is a way to set it on creation, but you can always update it after creation with something like
var editor = CKEDITOR.instances[*instace-name*];
document.getElementById( 'cke_' + editor.element.$.id ).id = newValue
However I'm not sure if this is the best practice because it may effect built in ckeditor methods that look for "cke_" + id
I am trying to attach change event handler to the instance of kendoNumercTextBox.
I am able to get the instance of kendoNumercTextBox control using its ID, however Im not able to get the instance using class name
here is the code http://dojo.telerik.com/emIWa/11
NOTE
I DO NOT want to attach event handler at the time of instantiating
the control. I want to get the existing instance and then attach the
event handler.
Also i am actually using Kendo ASP.NET MVC, however
dojo doesn't allow me to write cshtml so i am using kendo UI for
the demo purpose above. But i think end result would be same.
The NumericTextBox is created like below in cshtml
#(Html.Kendo().NumericTextBoxFor(x =>x.numerictextbox).HtmlAttributes(new {#class = "MyClass"}))
You need to use a more specific jQuery selector. This for example will get the correct element which is the one with the data-role attribute:
var numerictextboxByClassName = $(".MyClass [data-role]")
If you use the developer tools in your browser to inspect the text box, you'll see that 'MyClass' is on several elements that comprise the widget, hence the need to be more specific. It is also worth noting that the handler will only attach to the first instance found using the selector so this method cannot be used to attach a handler to several such controls at the same time.
I'm trying to remove the 'paste' option from the right-click menu. There is a recently added function which is supposed to do this, but I'm not sure how to call it.
Documentation: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#removeMenuItem
I've tried the following in CKEditor's config.js file, which don't appear to work:
CKEDITOR.editor.removeMenuItem('paste');
CKEDITOR.editor.prototype.removeMenuItem('paste');
config.removeMenuItem = 'paste'; /* in main config array */
Any suggestions? (Removing right-click menu completely is not an option as I need it for table editing)
Why your tests didn't work:
CKEDITOR.editor.removeMenuItem('paste');
The CKEDITOR object doesn't have a property "editor",
CKEDITOR.editor.prototype.removeMenuItem('paste');
Ditto, and trying to get the prototype won't help.
In both cases you have some error messages waiting for you in the error console
config.removeMenuItem = 'paste'; /* in main config array */
As you have linked, removeMenuItem is a method of the editor object, not a property of the config object.
What you can do:
CKEDITOR.instances.editor.removeMenuItem('paste');
The CKEDITOR object has a property "instances" that contains all the instances, so replace "editor" with the name of your editor and it will work. (of course, after the instance has been created, not before)
You can try this, it worked for me
CKEDITOR.instances.contentEditor.config.removePlugins = 'image,resize';
contentEditor is the name of the instance of CKEDITOR.
You can use the config and set removePlugins and pass a string with the name of the property, that you want to remove. But remember it will only work with those property names, that is present in the plugins object. Like if you want to remove 'paste' you have to do this
CKEDITOR.instances.contentEditor.config.removePlugins = 'pastefromword,pastetext';
When creating the editor in array configuration includes:
var config = {...,
'removeButtons': 'Maximize'};
by exzemplo
I found the following answer when looking for code to navigate the editors text area elements.. The code works, the onlyu problem is i dont understand why..
var documentWrapper = editorname.document; //replace by your CKEDitor instance ID
var documentNode = documentWrapper.$; // or documentWrapper['$'] ;
The answer was got from the folloing stackOverflow link :
ckeditor scrollIntoView to a div element within the editor
In particular could someone explain to me the syntax documentWrapper.$;
Ive no idea what this means??
Thanks
#oggiemc
The "$" represents the actual DOM object that the CKEDITOR class object is pointing to.
In this case you're working with the "CKEDITOR.dom.document" class. Find the documentaion here:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.document.html
Your object named "documentWrapper" is a CKEDITOR object. It would have any properties described in the CKEDITOR API docs for that class object. You would also use CKEDITOR methods on it.
When you work with "documentWrapper.$", you're working with a DOM object that's described in the Document Object Model Specifications. See Specs here:
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/
This object will have the properties described for this object type in the DOM specs. You wouldn't use CKEDITOR methods on this object, you would use the methods described in the DOM specs for this object type.
So the "$" is a generic representaion of whichever DOM object (document, head, body, div, span, p, etc.) the CKEDITOR class object is pointing to.
documentWrapper.someFunction(); would use a CKEDITOR method on a CKEDITOR class object.
documentWrapper.$.someFunction(); would use a DOM method on a DOM object.
Joe
Difference between editor passed as argument to plugins/dialogs and editor returned by getParentEditor().
They would usually be the same object. But if you have multiple editor instances on one page, you need to use getParentEditor to make sure you're working with the correct editor instance.
Especially if multiple editors are sharing one toobar: How Do I Get Multiple CKEditor Instances to Share the Same Toolbar?
http://docs.cksource.com/CKEditor_3.x/Howto/Shared_Toolbar
You can take a look at the code for dialog radio buttons in the CKEditor directory:
ckeditor\_source\plugins\forms\dialogs\radio.js
Or on the docs site:
http://docs.cksource.com/ckeditor_api/symbols/src/plugins_forms_dialogs_radio.js.html
When the plugin is loaded it uses the active editor instance to load the text for the title and labels because they will be the same for all the instances sharing the toolbar:
ckeditor_source\plugins\forms\dialogs\radio.js(5):
CKEDITOR.dialog.add( 'radio', function( editor )
(42) label : editor.lang.checkboxAndRadio.radioTitle,
(43) title : editor.lang.checkboxAndRadio.radioTitle,
But for the methods used in the dialog, it uses getParentEditor(), so that the actions will be performed on the correct editor instance:
ckeditor_source\plugins\forms\dialogs\radio.js(30):
editor = this.getParentEditor();
(22) onOk : function() ........ editor = this.getParentEditor();
Joe