Programmatically change bold, underline, italic of text selection using CKEditor API - ckeditor

I'm using my own UI to drive CKEditor's API. The following API works to toggle the selected text with bold and italic respectively, but does not work for underline.
editorInstance.execCommand( 'bold' );
editorInstance.execCommand( 'italic' );
editorInstance.execCommand( 'underline' ); // does not work
I've checked the source and have verified that the underline command is indeed present.
How do I programmatically underline selected text using CKEditor?

You're dealing here with the Advanced Content Filter. Precisely with its effect on commands' states. In the standard preset, which I assume you use, the Underline button is removed from toolbar and therefore the related command is disabled. When command is disabled, it cannot be executed.
You can verify this with:
editor.getCommand( 'underline' ).state == CKEDITOR.TRISTATE_DISABLED;
I anticipate that you'll try to remove the entire toolbar plugin. To save you some time - it's the toolbar plugin what registers most of the features (by registering enabled buttons). So if you remove the toolbar, then all features (commands are part of features) which are registered this way will be disabled. You should find this guide helpful - Plugins integration with the ACF.

Related

In the Trumbowyg editor, what's the difference between the built in undo/redo and the History plugin?

I've read the doc and tried the demo, but I can't tell the difference between the built in undo/redo and the History plugin.
The default buttons are:
['undo', 'redo'],
The plugin buttons are:
['historyUndo','historyRedo'],
I've now noticed two differences:
With the plugin, the undo/redo buttons are greyed out and unclickable if there are no changes to undo or redo, which is a good improvement. The default undo/redo buttons are not greyed out.
With the plugin, it one undo/redo removes or re-adds whole words. The default does a single character or a few characters at a time, seemingly inconsistently.
Curiously, if both the default and plugin buttons are displayed, then clicking either of the default undo/redo buttons will make the plugin's undo button clickable as if there is a change to undo.

Themed title bar not working in sublime text 4

I updated my sublime text 3 to version 4 and in there article, they said that:
The Adaptive theme on Windows and Linux now features custom title bars.
But i can't figure out how to use it. I tried adding this settings:
"ui_native_titlebar": true,
"themed_title_bar": true,
But no luck there. And i am using the ayu theme.
Here's how it looks right now:
Please anyone can help me that would be great!
Also i am on Linux mint.
Have a great day!
This is outlined in the comment on the preference:
// Adaptive theme only: controls if a custom or default title bar is used.
// Note that on Windows, the hamburger menu is used whenever this is
// enabled and the adaptive theme is in use.
"themed_title_bar": true,
The key part being that this is only supported by default in the Adaptive theme.
In order for the title bar to be themed, the theme itself needs to provide a theme rule that does it, and (ideally) that theme rule would be tied to the setting here.
In order to get themed title bar in other themes, you would need to either ask the author of the theme to support it, or create a customization.
Selecting UI: Customize Theme from the command palette will open a window similar to the settings window that allows you to add rules to your current theme.
Something like this would add support for the setting; you may need to adjust the colors to something that matches better. Also, if the right hand pane already has other customizations by you, just copy the rule into the appropriate part of the file instead.
// Documentation at https://www.sublimetext.com/docs/themes.html
{
"variables":
{
},
"rules":
[
{
"class": "title_bar",
"settings": ["themed_title_bar"],
"fg": "color(white)",
"bg": "color(var(--background) blend(white 85%))",
},
]
}
[edit]
themed_title_bar only works on Windows and MacOS; under Linux it doesn't do anything because it's the job of the window manager theme to customize the window decorations.
On Linux there is a different option for this, gtk_client_side_window_decorations which controls whether client side window decorations are enabled or not. The default value for this is true if you're using gnome and false otherwise.
You can set it explicitly in your user preferences to turn it on or off (a restart of Sublime Text is required).
For more details, see Sublime Text 4 hide title bar.

How to Change Style of CheckBox Control

I have a Checkbox in my application, and it is meant to be checked, but also disabled. When disabled, I've noticed that the foreground of the checkbox as well as the content textbox are a darker color than when enabled. I would like to leave the checkbox disabled, but change the foreground of the content textbox to the same color as when the checkbox is disabled. How might I accomplish this?
Methed you have to learn how to edit your existing/default style of your control. I can't give you the exact which will work for your but you can use Blend or Visual Studio to edit a copy of a control's current template by right clicking on the control and then selecting Edit Style, Edit Template or Edit Additional Templates as appropriate. In the submenu, you can select Edit a Copy... which will present a window that allows you to create a copy of the default (or current template/stlye if you have already modified it) and customize it.
Here is a basic tutorial for this http://www.jeff.wilcox.name/2010/08/using-blend-to-find-default-style-xaml/

Can the editor state be sync'd with the button state for basic styles

When deleting a text block with a basic style applied, the editor remains in the active state (bold, for example) while the button for that style is deactivated. Typing a character will reactivate the button.
I have verified that this is occurs on the CKEditor demo as well, so it shouldn't be related to any changes in our installation.
Steps to reproduce:
Use standard CKEditor: http://ckeditor.com/demo#standard
Select all and delete existing contents
Type 'Hello, World'
Select 'World'
Click 'Bold' button (or Ctrl+B)
Move cursor to end of content
Remove via backspace until bold content is removed
This results in the button displaying as inactive (default state), but typing any content will enter the text in bold and reactivate the button.
I've reproduced this (with slightly different rules regarding blank content and trailing spaces) on Chrome, Firefox, and IE10.
Is there a way to pull the state at which new content would be entered into the editor and use that to update the button state so that a user can see what their entered content will input as?
I know this TC very well:
delete entire bold, bold button is inactive,
start typing again,
bold is applied :|
It occurs on Webkit (Chrome and Safari) because of a very ugly behaviour of Webkit's contenteditable behaviour.
This is reported here:
http://dev.ckeditor.com/ticket/9998 - CKEditor (ticket grouping all Webkit's backspace handling bugs)
https://code.google.com/p/chromium/issues/detail?id=226941 - Chromium
https://bugs.webkit.org/show_bug.cgi?id=114791 - Webkit
Unfortunately neither Chromium's nor Webkit's developers replied and perhaps as most of the contenteditable bugs, this one won't be fixed soon (there are critical issues that haven't been fixed for years). So perhaps, in the near future we'll fix this on the CKEditor's side by overriding entire backspace logic with our own. Then such issues should not exist.
PS. Regarding the rest of the browsers I know that there are small inconsistencies, but you won't be able to fix them. Like for the Webkit's bug, to fix these cases we need to create custom backspace handling.

Ckeditor: Using Firefox built in spellchecker

I feel a little caught between a rock and a hard place here. I want to use Firefox's built in spell checking without disabling Ckeditor's context menu as this renders it impossible to work with tables. Is there a way of getting the best of both worlds here?
You could try setting the disableNativeSpellChecker property to false - it should then be possible to see the native spell checker markings within the editor - however for me I couldn't get this to work in Firefox, only Google chrome.
You can then hold the ctrl key down when you right click to show the browser context menu (provided browserContextMenuOnCtrl has not been set to false)
HTH.
Use the browser's default contextmenu for right click action, then you don't need to press Ctrl to shoe the browser's default context menu.
config.removePlugins = 'scayt,menubutton,contextmenu';
Enable the built-in spell checker if the browser provides one.
config.disableNativeSpellChecker = false;
hi there you can disable it by going to
Ckeditor>File Editor.then make sure you're editing the ckeditor.config.js file!
then add the two lines at the bottom (after the }; tag) add the two lines like below!...
**> CKEDITOR.config.disableNativeSpellChecker = false;
CKEDITOR.config.browserContextMenuOnCtrl = true;**
then save it..........
when writing in ckeditor a red dot underline will appear if your spell is incorrect!
when you right click the ckeditor's context menu appear.....but when you Ctrl+Right Click the browsers default menu appears....thanks..........
Use this plugin: http://martinezdelizarrondo.com/spellcheck/ and as it's stated, you have to install the WriteArea extension in Firefox.
Have you tried to enable SCAYT (SpellCheckAsYouType) in CKeditor? It is buit-in there and works as a plug-in.

Resources