Ckeditor's Link Dialog incomplete? - ckeditor

In an Xpage running on Domino 9.0.1 I'm using a rich text control with some custom toolbar configuration using the control's "attr" property as it is described here: https://frostillic.us/f.nsf/posts/quick-and-dirty-ckeditor-toolbar-setup-for-xpages
I added the link toolbar template using
<xp:this.attrs>
<xp:attr name="toolbar">
<xp:this.value><![CDATA[[["Link", "Unlink", "Anchor"]]]]></xp:this.value>
</xp:attr>
</xp:this.attrs>
All three buttons are displayed fine, esp. I'm able to define an anchor link target.
But trying to reference the anchor target I find that the Link dialog is somewhat incomplete as I can't define my link to use a relative target on the same page. I tried entering a reference in the dialog's URL field as #myAnchorId, but that results in a link looking like this:
....
Here's an image of the dialog that pops up from my Xpage when I hit the "URL link" button:
And this is what the dialog looks like that I can test from the CKEditor Samples page:
I'm aware that the samples page uses CKEditor V 4, so the dialog is somewhat different, but even V 3.6 should be able to reference anchor links using the dialog.
I already looked up on the installed ckeditor's version; \DominoData\domino\html\ckeditor\version.txt says:
cke_version=3.6.6.2
cke_revision=20130606-1534
Question is: what's missing here? Do I have to somehow modify the dialog?

Oh my, finally got it to work; #IBM: this feature truly could use some proper documentation! I'll mark this answer as a community wiki.
Indeed a different dialog is used here, which btw appears to apply to all the dialogs in use with Domino's CKEditor implementation. The trick in my case is to use one of the custom toolbar items instead of the standard one; up to now I found three of those customized items:
use MenuLink instead of the standard Link item; this item
consists of two sub items ('URL Link' and 'Anchor Link'), each calling its own dialog version; the resulting toolbar definition then looks like this: ['MenuLink', 'Unlink', 'Anchor']
use MenuPaste instead of the standard Paste item; again, this
item consists of two sub items ('Paste' and 'Paste as text'), again
each calling its own dialog version
use LotusSpellChecker to add IBM's own spell checking feature, where CKE's standard spell checker isn't working
I found hints to those three custom items inside my local \DominoData\domino\html\ckeditor\config.js. Don't know if those are all custom items available to day.
EDIT:
IBM's Domino Designer Xpages User Guide mentions another means of customizing the toolbar; the section unfortunately is incorrect in describing the options for the toolbarType attribute: be aware that all named types must start with capital letters, e.g. Basic, Slim, Medium, Large, Full, while the also mentioned Lite type isn't working at all; mistyping or using a non-existing value results in the editor not being displayed at all.

The link dialog that you're using is not the default one, so you should check how to modify it or replace it with the default one.

Related

Create a field in FlexForm / TCA / FormEngine (TYPO3) with multiple on / off options and several presets

I am referring to Flexform here, but the same applies for non-Flexform TCA fields.
I would like to create a field in a Flexform which will contain several options which can be set on / off. For this field it should be possible to define one or more "presets": If a preset button is clicked, all options in that preset are selected (and the others deselected).
Such as:
The idea is if you press on one of the buttons ("Default", "Contact", etc.) the settings will be preselected based on this preset.
TYPO3 already supplies a bunch of types for selecting several options, such as selectSingleBox, selectCheckBox or check. In the screenshot, selectCheckBox is used. But how to do the preset part?
I am wondering if something like this already exists. If not, how best to do it because what I researched is a bit hackish or does not yield a nice result.
I have a working solution:
I but am not really happy with it because:
I created a custom fieldControl which is displayed on the right. For this reason I use selectSingleBox, but I would rather use selectCheckBox, but this does not support fieldControl
I would actually prefer selectCheckBox and display the presets at the top next or below the "Toggle all" and "Revert selection" (as in the first screenshot). I don't think this is configurable in FormEngine this way, so I would have to (messily) extend the class and modify the HTML or modify this via JavaScript.
I guess you could use a "fieldInformation" to display it above the field but this is a bit ugly because you use an "informational" field for functionality. Also
HTML returned by fieldInformation is limited
I like how TCA / FormEngine works in a modular way so you can "plug in" various renderTypes and not make a complete mess of it.

How can I disable a custom toolbar button in CKEditor 5?

I implemented a version of the image insert Simple Plugin example from CKEditor 5's framework docs.
But the example doesn't cover how to disable the item when the editor's isReadOnly property is set (like it does by default for all the standard buttons). I found docs for an isEnabled prop as well as a bind method for ButtonView, but it quotes examples using a command item, rather than a view item. Problem is, the Simple Plugin example doesn't create a command to bind to.
So question is whether I need to create a command, or if there is some other way to make the view item's state sensitive to the readonly state of the editor instance.
Thanks, and my apologies if I've left out any needed context (new to posting here on SO). Feedback is welcome (and I know y'all will whip me into shape).
D'oh, I think I figured it out:
view.bind('isEnabled').to(editor, 'isReadOnly', isReadOnly => !isReadOnly);
Just needed to bind to the observable property of the editor. Seems to be working as I desired/expected.

Where can I find the specifications for HTML select widget?

HTML select widget is very constrained in how it can be styled. To work around this, there are many libraries attempting to reimplementing it using JavaScript, but most lack one or another feature which is available in the native version. Here are a few features which are hard to find in a single implementation:
arrow keys can be used to go through the options of a focused select element without opening the popup
possible to jump to an option by typing letters it starts with
the popup opens at the top if there's not enough space at the bottom or if opening it at the bottom would require making the options popup scrollable.
Is there a specification somewhere listing all the features the native select widget supports?
I'm aware the implementations might be platform-dependent, but it would be useful to have docs for any of them.
The best I could find was information on a similar component - combobox:
https://wiki.openjdk.java.net/display/OpenJFX/ComboBox+User+Experience+Documentation
https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
https://developer.gnome.org/gtk3/stable/GtkComboBoxText.html
In the HTML terminology, it's called the select element.
You can find its specification in the HTML 5.2
W3C Recommendation, section 4.10.7
You can also look at the same section in working draft of the upcoming HTML 5.3.

Joomla 3 Overwrite/Change "Menu Manager: Edit Menu Item"

Like the topic say I want to overwrite/change the "Menu Manager: Edit Menu item" layout. To illustrate my question:
In the picture whiche is shown I want to change the labels: Layout, Option, Integration.... and add some other options to it. How can I do it? Or is this even possible?
In order to change the text, simply use language overrides, google is your friend.
In order to add functionality, let's first of all explain what we're talking about to ensure we're on the same page.
Joomla components have views which can have one or more layouts, i.e.
/components/com_content/views/category/tmpl/ contains two layouts, blog and default.
A layout can additionally contain an .xml manifest (in our case, blog.xml and default.xml) allowing us to create a menu item for the specific view/layout combination. The .xml file contains the parameters that the user will set, you can add your own as well.
When you want to change Joomla, usually there is a way to do so without touching the core, which would be pretty bad, as any Joomla! updates would break your work.
For the view layouts a special feature called template override was developed, which allows you to create an alternative to the view layout in a safe place (under your template folder, in this case your admin template), and this is the most elegant and effective way to achieve your result.
Beware though, you are just creating a layout, most likely you will want to add functionality, if it's complex you might be better off creating a dedicated component to keep the code clean. Or you can just put all the logic in your view, query the database from there. But in this latter case, get paid, and run away. Never answer the phone to the customer again.
A final alternative is to write a system plugin that will manipulate the page markup after it was generated in the event onAfterRender(). This is a simple and good approach if you only want to add a button or make minor changes, but if you do anything more than that, see the above advise about running away.

how to localize and and or in jqgrid advanced search window

By clicking search button in toolbar, advanced search window is opened.
In first row it contains combobox with selections AND and OR
How to replace those words with words in other language in this window ?
The problem with localization is the bug in the lines where jqFilter method will be called by searchGrid method. The method jqFilter supports groupOps option which are already set in many localization files grid.locale-XX.js, but the jqFilter method will be called without setting of the option.
To fix the problem one should just add
groupOps: p.groupOps,
to the list of options used in the call of jqFilter method. You can search for the text ).jqFilter({ in the jquery.jqGrid.src.js or in the jquery.jqGrid.min.js to find the corresponding place. In jquery.jqGrid.min.js of jqGrid 4.3.1 the p is renamed to f so one have to use groupOps:f.groupOps.
How you can see on the demo the grouping operation in the Advanced Searching dialog will be localized after applying the fix:
If your localized version of grid.locale-XX.js don't contains the texts for AND and OR operation you can set there manually
$.jgrid.search.groupOps = [
{op: "My And", text: "my AND operation"},
{op: "My Or", text: "my OR operation"}
];
see the next demo:
Without the described bug fix you can follow my suggestion from the answer on the close question.
UPDATED: I posted the corresponding bug report to trirand. I hope that the fix will be included in the main code of jqGrid.
UPDATED 2: The bug fix is already included in the main code of the jqgrid (see here).

Resources