I want to be able to show an area where people can type text but on cursor focus, the editor tool bar will popup and also have the ability to expand as a model. I want do exactly what is being done on http://demos.telerik.com/teampulse-demo/Authentication when you editor a ticket.
see http://imgur.com/a/ad1qm
This is possible with RadEditor for ASP.Net AJAX as shown in this demo: http://demos.telerik.com/aspnet-ajax/editor/examples/toolbarmode/defaultcs.aspx
If you want to achieve this with Kendo UI editor see this demo: http://demos.telerik.com/kendo-ui/editor/inline-editing
Related
In the Updated Find actions section of the Visual Studio Code November 2021 (version 1.63) update release notes, they show that the Find actions buttons (Match Case, Match Whole Word, and Use Regular Expression) hover and active states can be styled (the example gif shows blue). They also mention that the style for the buttons in the search view now use the same style as the editor.
Which properties can I target using workbench.colorCustomizations in settings.json to change the background color of those buttons when hovering over them, or when they are active (the states which are shown in blue in the example gif)?
I've searched the Action colors, Button control, and Input control sections of the Theme Color documentation but I couldn't find the right properties. toolbar.hoverBackground changes the hover color of the Find toolbar's Previous Match, Next Match, Find in Selection, and Close buttons, but not the ones inside the Find text field.
I've also tried using Developer: Inspect Editor Tokens and Scopes in the Command Palette, which is great for identifying theme color property names for code in the editor panel, but it can't be used for the VS Code application UI elements.
Try this colorCustomizations in your settings.json:
"workbench.colorCustomizations": {
"editorWidget.foreground": "#f00",
"icon.foreground": "#f00" // colors the arrows/close in the Find widget
"inputOption.activeBorder": "#666", // active states
"inputOption.activeBackground": "#777676",
"inputOption.activeForeground": "#fff",
"inputOption.hoverBackground": "#ff0000", // hover state
}
From Editor widget colors. That is a "Find Widget".
The "icon.foreground" setting will also affect the arrows/close icons in the Search View.
And the inputOption settings will affect the Search view buttons as well. I don't think there is any to theme those Find Widget hover/active states without also affecting the Search view buttons hover/active states.
I have some text in CKEditor which should be editable and some text which should be non-editable.
The non-editable text I am enclosing in a span as below.
<span contenteditable="false" unselectable="on">Here is where my non-editable text goes</span>
The editable text I am enclosing in a span as below.
<span style="background-color:Yellow">$[insert Date]</span>
Here we are using style background yellow to highlight the editable text in yellow to the user.
I put my cursor within the editable text and move using the left or right arrow keys. Once I move outside the editable text area, I am able to remove even the non-editable text using backspace.
The issue is that as soon as my cursor moves outside the editable text area the code isn't able to detect any key press due to which I am not able to restrict the backspace or delete.
Does Range functionality help in this issue? If yes please help and give an example of where we can use the Range code.
EDIT:
It came to my attention that there is a $nonEditable dtd descriptor that could also come in handy:
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_dtd.html
https://ckeditor.com/old//forums/CKEditor-3.x/Forcing-custom-element-be-BLOCK-level-element
PREVIOUS:
You could use the widget functionality to make the text ineditable-- using contenteditable="false" in CKEditor can be a bit unpredictable, but the creating a widget extension plugin can have really nice results.
It would be a very basic widget that simply uses the upcast checking if the element has 'unselectable="on"', then the text will automatically become uneditable and using the arrow keys will simply skip over the text instead of entering it. You also get quite a bit of other functionality with the widget plugin and it makes it much easier to integrate into things like events, dialog editing, etc.
You can get a widget creation tutorial here:
https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html
For more information, I just answered a question about making parts ineditable here:
How can I create uneditable fields on CK Editor?
In Oracle Application Express version 4.2.4 when you click in a textarea box that is created using rich text with the CKEditor 3 you will see the text "body p" appear in the bottom grey border area.
When you first land on the page that has the rich textarea you do not see the text. Only when you click in the textarea does the unwanted text show in the bottom left border.
Changing to rich text with the FCKEditor 2 alleviates the problem. Is this fixable somehow. If so please give the steps to fix the problem.
This is a "plugin" called elementspath. You can remove it from an instance of the editor with code like this:
CKEDITOR.appendTo('container', {
removePlugins: 'elementspath'
});
Or you can edit the config.js file to remove it from all instances.
config.removePlugins = 'elementspath';
config.resize_enabled = false;
I am designing a search text box, with close button at the end(will be shown when TextLength > 0).
But when entering lengthy text, the close button hide the last part of text. I need to restrict the text to not cross the close button.
Note: I dont wont to restrict the MaxLength of characters, but the max length of characters to be displayed inside the textbox.
It appears that the close button is overlapping the search text box.
If you are using MFC, then you can use CEdit::SetRect to set the formatting rectangle of edit text. If not MFC, then use EM_SETRECT message to do the same.
I have done similar stuff in my article here: http://www.codeproject.com/Articles/15043/iTunes-like-Find-Edit-Control
Is it possible in Gtk+ to have an add-tab button inline with the tabs in a notebook, ala Opera or Google Chrome? I do know that Opera uses Qt and Chrome uses custom tabs, but is it possible in pure Gtk+?
Well, if it is not possible, there is a simple workaround:
Create a tab with the title "New Tab" or "+" or whatever
Detect when the tab is selected and, when such happens, create a new tab. Focus on that new tab so that the "New tab" tab isn't ever selected.
Sure. Check out the class BrandedNotebook at line 1384 of this file.
Unfortunately Gtk+ doesn't give you a "nice" way to do this, but you should be able to determine the amount of space available, and use it as you wish. In the case of BrandedNotebook, a pixbuf is drawn in the space, and mouse clicks are handled within the coordinates of the pixbuf.