We're evaluating an upgrade from ckeditor 4 to the new ckeditor 5, but I need to be able to extend the Image plugin/package with some custom elements, e.g. a text input for licensing information about the image, a button/checkbox for toggling the image to be a thumbnail or not etc.
How can I add these custom elements in the image package and write my own javascript code to handle the values from these elements?
The image toolbar is being controlled by the config.image.toolbar property. It accepts names of UI components registered in the editor.ui.components factory. In other words, it works like the main editor toolbar which is configurable via editor.toolbar and you can learn more how to create buttons here: Creating a simple plugin.
Related
CKeditor5 by default has image plugins that support toolbar icons which can insert an image by (a) uploading the image and (b) insert an IMG tag into the HTML.
We do not want any capability to upload an image, but we need a simple widget that takes user input and inserts an image tag with attributes (user supplied) including e.g. SRC, HEIGHT, WIDTH, CLASS.
Seems strange that this isn't available in the standard build, have I missed it somehow?
Do we have to write our own plugin?
Custom build your CKeditor here:
https://ckeditor.com/ckeditor-5/online-builder/
Use toolbar item 'imageInsert'
relevant plugins:
Image,
ImageCaption, // adds ability to caption image via the toolbar
ImageInsert,
ImageResize, // this will cause resize handles to appear in the editor, operates by applying CSS to the enclosing <figure> tag
Also useful plugin
LinkImage, // adds link capability when editing an inserted image
Found the relevant doc here
https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/images-inserting.html
I'm very new to Webflow. I am somewhat familiar with CSS and web design concepts.
I downloaded one of the clonable templates to use as a practice:
https://webflow.com/made-in-webflow/website/Spaces-Urbanistic
With this template, I try to replace the logo image on the upper left.
I have a colorful webpage logo and inside the designer, I see all the colors.
When I click on preview, the logo turns into a grayscale image.
Webflow has Effects option that I could enable, but it is currently set to off, for Logo image element as well as all parent nodes up to the body tag.
When I inspect the logo in chrome dev tools, the immediate parent has this CSS:
element.style {
filter: invert(100%)
grayscale(100%)
contrast(128%);
}
My question is, where do those filter parameters are stored in webflow interface, if not under Style->Effects->Filters? Is there any other place I don't yet know about where the above code can be injected?
Thank you,
edit-1: I just noticed this code on top of the main HTML file:
Still, doesn't help me to identify where this code comes from. Thank you,
We have implemented checkbox in popover. There we are using checked.bind , but in the view model its not reflecting its value on change of the checkboxes.
Sample Gist Run Provided below:
Gist Run
Thanks in Advance
Programmatically injected HTML needs to be compiled manually
The integration with bootstrap I provided to you earlier cannot do this. The bootstrap plugin assigns the innerHTML property of the popover and it does this outside of aurelia's rendering pipeline. The HTML is therefore not compiled by aurelia, which is why bindings (and other aurelia behaviors) will not work.
The templating framework takes care of this for you automatically as long as you are following conventions (such as custom elements). In any other case you'll need to manually work with the ViewCompiler.
In case you're interested, you can see an example with programmatically generated HTML in this gist. Also see this question if you want to know more about it. I do not recommend it in this scenario however.
Use aurelia-dialog
A tooltip (or popover) is just that: a tip on how to use the tool. It should not need more than some plain markup, text and styling (of course this is subjective to some degree, and some people may disagree)
For collecting user input in-between pages or screens, I'd argue a modal dialog is a better fit because of its property to "pop out" more and to de-emphasize the rest of the screen until the user either proceeds or cancels.
More importantly, by using aurelia-dialog your bindings and behaviors will simply work because, well, it's an aurelia plugin :-)
I am using the popup menu in Extension Library like this
<xe:popupMenu id="pop">
<xe:this.treeNodes>
<xe:basicContainerNode image="/vwicn148.gif" label="Container">
<xe:this.children>
<xe:basicLeafNode label="Child" image="/vwicn148.gif"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
</xe:this.treeNodes></xe:popupMenu>
And it look like this with an image added before the label
As my site is using only "font icons" from FontAwesome I want to display these instead of normal images. how can I do that?
You have 4 options (and they are not pretty):
use a custom renderer as Tim suggested
subclass the control so label is rendered passthrou
lobby the ExtLib team to add new properties
use an XSP.OnLoad script to add the font awesom tags
I have to re-engineer a Java program which uses the old version 5 of JGraph. I have to replace this package with the new version 6.
It was possible in version 5 to create a cell with an HTML-Object, so I could change the style of a cell into a style which looks like a database table.
Is it possible to change the style of a mxCell like this with user object oder other methods in the new version?
You can create custom vertices that may use any Swing components when rendering. Create a custom vertex that uses a Swing component that supports HTML (and a good number of them do). Displaying the HTML label string directly to the component will cause it to render the HTML correctly.