I am using TinyMCE to input entries for a dictionary and I want to guide the person compiling with preset styles. The user chooses (from a dropdown) preconfigured styles for the dictionary definition (plain text, black font, 12pt size), examples in the definition (italic, blue font, 12pt size) or labels (italic, gray font, 11pt size).
These are my preconfigured styes:
style_formats: [
{title: 'Definition', inline: 'span', styles: {color: '#000000', fontSize: '12pt'}},
{title: 'Example', inline: 'span', styles: {color: '#236FA1', fontStyle: 'italic', fontSize: '12pt'}},
{title: 'Label', inline: 'span', styles: {color: '#7E8C8D', fontSize: '11pt'}},
]
These style formats settings basically work. My problem is that once I select the "Example" style, the font switches to italics and it stays so also when I later select "Definition" or "Label".
https://www.tiny.cloud/docs/tinymce/6/content-formatting/ lists many formatting options, but it seems there's nothing for forcing "plain" text.
In general I would appreciate any advice to build "presets" that a user could choose, while typing "inline" to pull preconfigured styles, with font type, color, size and formatting. This tremendously helps the data input consistency.
Thanks, Emanuele
Related
I am using CKEditor 5 with the React framework.
How do I set the background of the editor to dark grey when the editor is disabled?
I am using this CSS to set the background to white when enabled:
.ck .ck-editor__main > .ck-editor__editable {
background: #FFF;
}
However, I only want to change the background color value to grey when the child div has .ck-read-only but :has() has no browser support.
.e.g this does NOT work because browsers do not yet support :has()
.ck .ck-editor__main > .ck-editor__editable :has(> div.ck-read-only) {
background: #C3C3C3;
}
Implementation of component
<CKEditor
disabled={true}
editor={Editor}
config={{
toolbar: [
'bold',
'italic',
'underline',
'bulletedList',
'numberedList',
'link',
'|',
'imageUpload'
],
placeholder: 'Start writing your note'
}}
onReady={editor => {
console.log('Editor is ready to use!', editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
console.log({ event, editor, data });
}}
/>
Oops, I made a mistake in my selector and where the classes were attached. This allows me to set the background color when disabled:
.ck .ck-editor__main > .ck-editor__editable.ck-read-only {
background: #C3C3C3;
}
//On Focus
.my-ck-active .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
border-color: #16a34a !important;
}
//on Error
.my-ck-error .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
border-color: red !important;
//you can add styling here whatever you want
}
You can customize the CKEditor style by using these classes
When CKEditor gets Focused
.my-ck-active .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
border-color: #16a34a !important;
//you can add styling here whatever you want
}
When CKEditor gets Error
.my-ck-error .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
border-color: red !important;
//you can add styling here whatever you want
}
I want to change the background color of my data table as a whole. I don't want to use the dark themed or light themed. I can't seem to change it even when using !important or using available classes.
Just add the relevant color class e.g. class="primary" or the name of the color from the vuetify color pack.
<v-data-table class="elevation-1 primary"></v-data-table>
Add a custom class to v-data-table tag like this:
<v-data-table ... class="elevation-1 test" ...>
elevation-1 is their standard class name. I added test to illustrate the point.
Add necessary styling to .test .theme--light.v-table selector in your custom CSS.
E.g. .test .theme--light.v-table { background-color: #00f; }
You may need to replace the theme name in the CSS path with your theme name.
If you look inside the DOM, you'll notice that class name test was applied to a <div> container, not the <table> element.
A simple way to include your CSS is with <style> tag inside your App.vue file:
<style>
#import './assets/styles/yourstyles.css';
</style>
How to include css files in Vue 2 has more on that.
You can use headers object to specify class as below,
headers: [{
text: 'Dessert (100g serving)',
align: 'start',
divider: true,
sortable: false,
value: 'name',
class: "blue lighten-5"
},
{
text: 'Calories',
value: 'calories',
align: 'center',
divider: true,
class: "blue lighten-5"
}]
The above code will add light blue background to your header. You can do more with the class attr in headers object
The current answers weren't working for my but I found a simple solution. I'll share it just in case anyone sees this in the future.
# 1. Add a class to the table element
<v-simple-table class="table">
...
</v-simple-table>
# 2. Add background color
<style scoped>
.table {
background-color: red;
}
</style>
I'm trying to create custom buttons with assets that I've been sent by the designer. I want to use touchable highlight to create the buttons with the images in them.
<TouchableHighlight style={styles.touch}
onPress={() =>
Alert.alert('You tapped Sign In!')
}>
<Image
style={styles.button}
source={require('./signin/SignInButton.png')}
/>
</TouchableHighlight>
touch: {
backgroundColor: 'pink',
},
button: {
padding: 10,
width: Dimensions.get('window').width*0.7,
resizeMode: 'contain',
// height: Dimensions.get('window').height/3,
},
That's the code, the problem is the touchable area is too big, I want it to be just the button area. But I also want the button to be sized dynamically with the screen, for different screen sizes. So is there a way to fix the size of the Touchable based on the image size?
I recently added jwplayer to my site. I added video with subtitles. But when we do full screen subtitles are too low almost at the bottom. Is there anyway i can adjust it to appear higher.
Here my code:
<div id="myElement">Loading the player ...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "/sample.mp4",
height: 420,
width: 950,
tracks: [{
file: "/sample.srt",
label: "English",
kind: "captions",
"default": true }]
});
</script>
This solution will work for HTML5, I am not sure about flash though.
check this out show-subtitle-outside-of-player
You need to catch the caption div and override the css
I'm using jqPlot to create a pie chart with a legend. Part of my jqPlot pie options look as follows:
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
padding: 10,
showDataLabels: true,
dataLabelFormatString: '%.2f%%',
sliceMargin: 2,
startAngle: -90
}
},
legend: {
show: true,
location: 'e',
placement: 'outside',
xoffset: 1,
fontSize: '11px',
rowSpacing: '10px',
textColor: '#222222',
fontFamily: 'Lucida Grande, Lucida Sans, Arial, sans-serif'
}
Recently I've come across a case where there are many legend items (e.g., 21), which makes my legend box too tall. I'm wondering if there is a way to either
have a vertical scroll bar within the legend box
display the legend items in multiple columns (preferable)
I've tried setting the following properties:
numberRows
numberColumns
which I found from this page:
$.jqplot.PieRenderer options
however they don't seem to make any changes.
Would anybody be able to provide me with a good solution to this problem?
Try to go with the provided column/row settings. I double-checked personally that this settings do work. Just make sure that in legend you set the numberColumns or numberRows inside rendererOptions, like:
legend: {
show: true,
location: 'ne',
rendererOptions: {numberColumns: 2}
}
If this doesn't work then I must say some other bug must be hiding in your code, then let us see the code so we can find and squash the bug together :)