My application uses CKEditor 5 to allow users to edit rich text data. These texts support some application-specific custom elements (Web Components), and I want to extend CKEditor with custom plugins that support inserting such custom elements. I seem to be almost there, but I'm having some difficulties getting these custom elements into and out of the CKEditor instance properly.
Current plugin implementations
I mainly followed the Implementing an inline widget tutorial from the CKEditor 5 documentation. As an example, I would like to support a custom element like <product-info product-id="123"></product-info>, which in CKEditor should be rendered as a simple <span> with a specific class for some styling.
In my editing plugin, I first define the extension to the schema:
const schema = this.editor.model.schema;
schema.register('product-info', {
allowWhere: '$text',
isInline: true,
isObject: true,
allowAttributes: [ 'product-id' ]
});
I then define the upcast and downcast converters, closely sticking to the tutorial code:
const conversion = this.editor.conversion;
conversion.for('upcast').elementToElement({
view: {
name: 'span',
classes: [ 'product-info' ]
},
model: (viewElement, { writer: modelWriter }) => {
const id = viewElement.getChild(0).data.slice(1, -1);
return modelWriter.createElement('product-info', { 'product-id': id });
}
});
conversion.for('editingDowncast').elementToElement({
model: 'product-info',
view: (modelItem, { writer: viewWriter }) => {
const widgetElement = createProductInfoView(modelItem, viewWriter);
return toWidget(widgetElement, viewWriter);
}
});
conversion.for('dataDowncast').elementToElement({
model: 'product-info',
view: (modelItem, { writer: viewWriter }) => createProductInfoView(modelItem, viewWriter)
});
function createProductInfoView(modelItem, viewWriter) {
const id = modelItem.getAttribute('product-id');
const productInfoView = viewWriter.createContainerElement(
'span',
{ class: 'product-info' },
{ isAllowedInsideAttributeElement: true }
);
viewWriter.insert(
viewWriter.createPositionAt(productInfoView, 0),
viewWriter.createText(id)
);
return productInfoView;
}
Expected behavior
The idea behind all this is that I need to support the custom <product-info> elements stored in user data in the backend. CKEditor, which is used by users to edit that data, should load these custom elements and transform them into a styled <span> for display purposes while editing. These should be treated as inline widgets since they should only be able to be inserted, moved, copied, pasted, deleted as a whole unit. A CKEditor plugin should allow the user to create new such elements to be inserted into the text, which will then also be <span>s in the editing view, but <product-info>s in the model, which should also be written back to the backend database.
In other words, I expected this to ensure a direct mapping between element <product-info product-id="123"></product-info> in the model, and <span class="product-info">123</span> in the view, to support inserting and moving of <product-info> elements by the user.
Actual result
In short, I seem to be unable to get CKEditor to load data containing <product-info> elements, and unable to retrieve the model representation of these custom elements for backend storage. All operations to insert data to CKEditor from source, or to retrieve CKEditor data for sending to the backend, seem to operate on the view.
For example, if I preload CKEditor contents either by setting the inner content of the element that is replaced with the editor instance, or inserting it like this:
const viewFragment = editor.data.processor.toView(someHtml);
const modelFragment = editor.data.toModel(viewFragment);
editor.model.insertContent(modelFragment);
I see the following behavior (verified using CKEditor Inspector):
When inserting the custom element, i.e. <product-info product-id="123"></product-info>, the element is stripped. It's not present in either the model nor the view.
When inserting the view representation, i.e. <span class="product-info">123</span> I get the representation that I want, i.e. that same markup in CKEditor's view, and the <product-info product-id="123"></product-info> tag in the model.
This is exactly the opposite of what I want! In my backend, I don't want to store the view representation that I created for editing purposes, I want to store the actual custom element. Additionally:
My UI plugin to insert new product info elements, uses a command that does the following:
execute({ value }) {
this.editor.model.change( writer => {
const productInfo = writer.createElement('product-info', {
'product-id': value
});
this.editor.model.insertContent(productInfo);
writer.setSelection(productInfo, 'on');
});
}
which also works as I want it to, i.e. it generates the product-info tag for the model and the span for the view. But, of course, when loading an entire source text when initialising the editor with data from the backend, I can't use this createElement method.
Conversely, in order to retrieve the data from CKEditor for saving, my application uses this.editor.getData(). There, these proper pairs of <product-info> model elements and <span> view elements get read out in their view representation, instead of their model representation – not what I want for storing this data back!
The question
My question is: what do I need to change to be able to load the data into CKEditor, and get it back out of the CKEditor, using the custom element, rather than the transformed element I want to show only for editing purposes? Put differently: how can I make sure the content I insert into CKEditor is treated as the model representation, and how do I read out the model representation from my application?
I'm confused about this because if the model representation is something that is only supposed to be used internally by CKEditor, and not being able to be set or retrieved from outside – then what is the purpose of defining the schema and these transformations in the first place? It will only ever be visible to CKEditor, or someone loading up the CKEditor Inspector, but of no use to the application actually integrating the editor.
Sidenote: an alternative approach
For a different approach, I tried to forgo the transformation to <span>s entirely, and just use the custom element <product-info>, unchanged, in both the model and the view, by using the General HTML Support functionality. This worked fine, since this time no transformation was needed, all I had to do was to set the schema in order for CKEditor to accept and pass through the custom elements.
The reason I can't go with this approach is that in my application, these custom components are handled using Angular Elements, so they will actually be Angular components. The DOM manipulation seems to interfere with CKEditor, the elements are no longer treated as widgets, and there are all manner of bugs and side effects that come with it. Elements show up fine in CKEditor at first, but things start falling apart when trying to select or move them. Hence my realisation that I probably need to create a custom representation for them in the CKEditor view, so they're not handled by Angular and preventing these issues.
How I can get access to query parameters in child resource create form?
For example if I want to have a button on parent resource edit page which redirects to
/childresource/create?parentid=123 and then on child resource create form we have <SelectInput source="parentid" /> and I want this to be preselected?
Is it somehow possible already? Would it be better with custom react routing for example to /parent/123/addchild and have whole custom create component or maybe just customer selectinput component?
I already have functional create page for child but it would be really nice to somehow prefill values.
Answer to your second question:
ProductSelect.defaultProps = {
location: PropTypes.object.isRequired,
};
// This is the component exported and known by admin-on-rest, not ProductSelect
const EnhancedProductSelect = withRouter(ProductSelect);
// Hence, this is the one which needs a defaultProp for addField
EnhancedProductSelect.defaultProps = {
addField: true
};
export default EnhancedProductSelect;
Does this help for the first question ?
https://codesandbox.io/s/pp0o4x40p0
The relevant code parts are:
the CreateCommentButton component inside src/posts.js
the CommentCreate component inside src/comments.js (note how we set the defaultValue prop on SimpleForm)
It seems Aurelia is not aware when I create and append an element in javascript and set a custom attribute (unless I am doing something wrong). For example,
const e = document.createElement('div');
e.setAttribute('custom-attr', 'some value');
body.appendChild(e);
Is there a way to make Aurelia aware of this custom attribute when it gets appended?
A little background: I am creating an app where the user can select their element type (e.g. input, select, checkbox etc.) and drag it around (the dragging is done in the custom attribute). I thought about creating a wrapper <div custom-attr repeat.for="e of elements"></div> and somehow render the elements array, but this seemed inefficient since the repeater will go through all the elements everytime I push a new one and I didn't not want to create a wrapper around something as simple as a text input that might be created.
You would have to manually trigger the Aurelia's enhance method for it to register the custom attributes or anything Aurelia related really. And you also have to pass in a ViewResources object containing the custom attribute.
Since this isn't as straight forward as you might think, I'll explain it a bit.
The enhance method requires the following parameters for this scenario:
Your HTML as plain text (string)
The binding context (in our scenario, it's just this)
A ViewResources object that has the required custom attribute
One way to get access to the ViewResources object that meets our requirements, is to require the custom attribute into your parent view and then use the parent view's ViewResources. To do that, require the view inside the parent view's HTML and then implement the created(owningView, thisView) callback in the controller. When it's fired, thisView will have a resources property, which is a ViewResources object that contains the require-d custom attribute.
Since I am HORRIBLE at explaining, please look into the example provided below.
Here is an example how to:
app.js
import { TemplatingEngine } from 'aurelia-framework';
export class App {
static inject = [TemplatingEngine];
message = 'Hello World!';
constructor(templatingEngine, viewResources) {
this._templatingEngine = templatingEngine;
}
created(owningView, thisView) {
this._viewResources = thisView.resources;
}
bind() {
this.createEnhanceAppend();
}
createEnhanceAppend() {
const span = document.createElement('span');
span.innerHTML = "<h5 example.bind=\"message\"></h5>";
this._templatingEngine.enhance({ element: span, bindingContext: this, resources: this._viewResources });
this.view.appendChild(span);
}
}
app.html
<template>
<require from="./example-custom-attribute"></require>
<div ref="view"></div>
</template>
Gist.run:
https://gist.run/?id=7b80d2498ed17bcb88f17b17c6f73fb9
Additional resources
Dwayne Charrington has written an excellent tutorial on this topic:
https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/
I have a Google Charts Dashboard instance bound to a ChartWrapper instance that has allowHtml: true, and a DataTable instance that we get from a query response:
...
data = response.getDataTable();
data.setTableProperty("allowHtml", true);
...
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'dataTable' : data,
'containerId': 'table',
'options' : {'allowHtml': true, 'showRowNumber': true} //,
});
...
dashboard.bind(filters, table);
dashboard.draw(data);
This enables the drawing of HTML fine. We return plenty of html via the response and it gets drawn to the DOM fine.
The problem comes in when we try to update a value in the chart via the DataTable object ("data" in the above code snippet). When we try to update the values of a cell using the DataTable.setCell() function call with an HTML string, the updated cell just shows the raw HTML and does not format the cell as HTML.
data.setCell(row_index, column_index, response.html);
dashboard.draw(data);
We've set both the ChartWrapper and DataTable options to allowHtml = true, and there doesn't seem to be a way to set the allowHtml property for the Dashboard.
Does anyone have any insight into this? Could it be something wrong with how the objects are bound to one another? According to Google Charts:
A ChartWrapper class is used to wrap your chart and handle all
loading, drawing, and Datasource querying for your chart.
Am I supposed to be using a different API for updating the value? I've tried setting column properties, setting table properties, etc to all be allowHtml = true but nothing I've tried has enabled me to update a table with HTML. It always shows the raw HTML string
Facepalm
Okay it turns out our serverside code at one point was encoding the HTML string via Django's render_to_string() function, so that things like "<" were being converted to <.
They showed up in the Google Charts as the right values, that is the < value rendered as "<" in the DOM. Once I took out the render_to_string call, everything worked fine.
Is it possible to dynamically load Wordpress menu via Ajax?
Best solution would be using wp_nav_menu().
If your theme needs to dynamically initialize menus with JavaScript, the pattern for the initialization code should be:
jQuery(function($) {
function initMainNavigation( container ) {
/* set up container... */
}
initMainNavigation( $( '.main-navigation' ) );
$( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {
if ( 'primary' === params.wpNavMenuArgs.theme_location ) {
initMainNavigation( params.newContainer );
/* optionally sync a previous menu state from params.oldContainer... */
}
});
});
The params being passed to the event handler consists of the following properties:
newContainer: jQuery object containing the new menu container element retrieved from Ajax; this is what you would manipulate to initialize.
oldContainer: the previous jQuery object holding the element for the replaced menu container; this is useful if there is any state in the old menu that should persist in the new menu, such as which submenus are expanded (as in Twenty Fifteen).
wpNavMenuArgs: The array of arguments passed to wp_nav_menu() in the template, such as template_location.
instanceNumber: The index for which wp_nav_menu() call being updated.
You can create a custom file to handle ajax requests in your theme, returning the HTML output of wp_nav_menu(); and call that file.
wp-content/themes/your-theme/ajax.php:
<?php wp_nav_menu(); ?>
It's simple, but efficient. Be careful with security though. Make sure to validate input and dont eval() any input!