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
Related
In my Vaadin (v.23.2.6) application I am creating a bean of class Book. This bean has set of tags.
Tags are retrieved from the database and contain two properties - tagName and tagDescription.
In my UI form I specified MultiSelectComboBox for Tags.
this.tagsField = new MultiSelectComboBox<>("Tags");
this.tagsField.setAllowCustomValue(true);
this.tagsField.setAutoOpen(false);
this.tagsField.setItemLabelGenerator(Tag::getTagName);
It is working, but I do want to display value of tagDescription when cursor is hovering over the tagName in the selection list.
What kind of event listener I can use for that purpose? Shall I use Notification or there is something else that can help me with this implementation?
Please advise.
While it's technically possible, you don't want to listen to hover (mouseover) events on the server. That's overkill and will lead to a lot of unnecessary network traffic. Instead, you can take care of it in the client with a Renderer. For example, using the standard HTML title attribute:
tagsField.setRenderer(LitRenderer.<Tag>of(
"<span title='${item.description}'>${item.name}</span>")
.withProperty("description", Tag::getTagDescription)
.withProperty("name", Tag::getTagName)
);
I've searched thru Corvid docs and Stack, not finding anything.
Is there a way to appendChild() in Wix Corvid(Code)?
EDIT: Wix does not allow DOM access directly. I assumed that people answering this would know i was looking for an alternative to appencChild and knew this method could not be used as is in Wix.
so to clarify: is there a way to add a child to a parent element using Wix's APIs?
It depends what you are trying to achieve,
the only thing off the top of my head is adding more items to a repeater
which you can do by first getting the initial data from the repeater, adding another item to array and reassign the data property of the repeater
const initialData = $w('#repeater').data
const newItem = {
_id: 'newItem1', // Must have an _id property
content: 'some content'
}
const newData = [...initialData, newItem]
$w('#repeater').data = newData
https://www.wix.com/corvid/reference/$w.Repeater.html#data
In Corvid, you cannot use any function which accesses the DOM.
Coming from one of the developers of Corvid:
Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w. One small exception is the $w.HtmlComponent (which is based on an iFrame). This element was designed to contain vanilla HTML and it works just fine. You just can't try to trick it by using parent, window, top, etc.
Javascript files can be added to your site's Public folder, but the same limitations apply - no access to the DOM.
Read more here: https://www.wix.com/corvid/forum/main/comment/5afd2dd4f89ea1001300319e
We have DOM object to create dynamic html input and elements.
For eg: var child = document.createElement(input);
child.type="text";
child.id="inputId";
var parent = document.getElementByTagName('body');
parent.appendChild(child);
as usual we used to create element by dom object for HTML. But how to create material components using dom object in typescript.
is there options to create dynamic way like that above for material components
for eg: var child = document.createElement(mat-form-field);
This question am asking bcz we have planned to create custom module. so which can use it in any project in future.
For my question the answer is
https://material.angular.io/guide/creating-a-custom-form-field-control
With the help of custom form field control,I think, we can create dynamic angular material.
Let me try it and post regards about it further. Thanks
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');
} );
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