Is there a way to create a custom color picker to change the editor's body background color? I looked at the documentation and it seems that the palette is just available for font color and text background color, not body background color.
You can change the background color of the editor using:
$("#editor").data("kendoEditor").body.style.backgroundColor = 'red'
All you need is to hook the select option on the color picker to set the editor's background color with the selected value.
$("#picker").kendoColorPicker({
value: "#ffffff",
buttons: false,
select: function(e) {
$("#editor").data("kendoEditor").body.style.backgroundColor = e.value;
}
});
See here for a sample: http://dojo.telerik.com/EYusEQ/2
Related
I'm going to change the font color using a color picker and I added it like this. but it's not working now. I think It's because the'rte.exec()' please help me how to change the font color. Thank you.enter image description here
Inside init methodstrong text
grapesjs.init({
colorPicker: {
appendTo: 'parent',
offset: { top: 26, left: -166, },
},
});
I'm trying to understand how Vuetify's input color property is working and I can't find it in documentation, which simply states:
color
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
What I'm observing is that the color has effect only when the control has focus [LIVE DEMO], and goes back to default color when the control loses focus.
<v-text-field color="orange" label="label" />
Focused:
Not focused:
Is this by design, and is it specified anywhere?
Most importantly, how to affect the color of the not-focused state (preferably without custom CSS)?
To set the default color to v-text-field use the following css
-- #ff9800 (equivalenyt to orange color)
Working codepen is here https://codepen.io/chansv/pen/ZEEOXKN
.theme--light.v-text-field>.v-input__control>.v-input__slot:before {
border-color: #ff9800;
}
.theme--light.v-label {
color: #ff9800;
}
.theme--light.v-input:not(.v-input--is-disabled) input, .theme--light.v-input:not(.v-input--is-disabled) textarea {
color: #ff9800;
}
Github issue in vuetify https://github.com/vuetifyjs/vuetify/issues/3430
I want to set the default color for the Kendo Editor's foreColor tool to "black". By default, the color is always "white".
DontVoteMeDown has a great answer! However as soon as you click the dropdown arrow on the colorPicker, you lose the currently selected color. You could save the current color to a variable and reload it each time the palette is opened. Then update the selected color on change:
var curForeColor = "#000000";
$("#editor").kendoEditor({
tools: [{
name: "foreColor",
}]
});
var colorpicker = $("div.k-i-foreground-color").data("kendoColorPicker");
colorpicker.value(curForeColor);
colorpicker.bind("change", function(){
curForeColor = colorpicker.value();
});
colorpicker.bind("open", function(){
colorpicker.value(curForeColor);
});
DEMO
Try this:
var editor = $("#editor").data("kendoEditor");
$(editor.toolbar.element)
.find("div.k-i-foreground-color")
.data("kendoColorPicker")
.value("#000000");
Demo
The foreColor tool is in fact a ColorPicker so you can set it's value as soon as editor is created.
I have a page with two kendo ui Windows. Using javascript/html5 flavor.
How can I programatically change the color of the window title bar after it has been rendered on the page?
and also is there an event tied to the user clicking on the window?
TIA
You can either change all Kendo Windows' CSS on the page, or get a specific instance, and change its titlebar CSS only:
kendoWindow.wrapper.find('.k-window-titlebar').css({
color: 'red',
'background-color': 'yellow'
});
... or
$('.k-widget.k-window .k-window-titlebar').css({
color: 'red',
'background-color': 'yellow'
});`
Example
I have a problem. I'd like to show CKEditor without toolbar, and still keep colors on it. This is my code.
$(document).ready(function() {
var textAreaName = 'description';
CKEDITOR.replace( textAreaName, {
removePlugins: 'toolbar,elementspath',
readOnly: true
} ) ;
var oCKeditor = CKEDITOR.instances[textAreaName];
});
The problem is text color doesn't show. It seems that CKEditor disable color as well.
Assuming (because it's still unclear) that you want to keep text color in editor's contents (BTW. editor's contents is not rendered using textarea - it is only used for easier data submitting) this is a solution:
config.extraAllowedContent = 'span{!color}';
This will allow span elements with color style. Read more about Advanced Content Filter.
use this config.uiColor = '#AADC6E';
Where config is object of that component.