I'm wanting to extend the tinymce toolbar with a font family selector that displays the font family names styled with that font-family. To do this I need to wrap each font name markup with a class or inline css. I've scoured the tinymce API documentation and am struggling to find a way to add custom HTML in an menu item.
The closest I've gotten is an un-styled button that opens a panel with a custom HTML selector, but it's not ideal. I'd really like to add an select directly to the toolbar that is styled with the font families.
This might help you. It doesn't use the toolbar, but instead adds an extra menubar item with custom menuitems.
HTML
<form>
<textarea></textarea>
</form>
JavaScript
It works by adding menuItems to the menu. We can then provide the classes option to the menuitem. This allows us to target each menu item separately via css class selectors. E.g. If we supply classes: "monospace". TinyMCE converts this into .mce-monospace as the class selector. However tinymces css rules will override unless you select a bigger css precedence.
tinymce.init({
selector: "textarea",
menu: {
mynewmenu: {
title: 'Select Font Family',
items: 'arial | monospace | timesnew'
}
},
menubar: 'mynewmenu',
setup: function(editor) {
editor.addMenuItem('arial', {
text: 'Arial',
classes: "arial",
context: 'mynewmenu',
onclick: function() {
alert('yey!');
}
});
editor.addMenuItem('monospace', {
text: 'Monospace',
classes: "monospace",
context: 'mynewmenu',
onclick: function() {
alert('yey!');
}
});
editor.addMenuItem('timesnew', {
text: 'Times New Roman',
classes: "timesnew",
context: 'mynewmenu',
onclick: function() {
alert('yey!');
}
});
}
});
CSS
This is how I got the style to override via css.
.mce-menu-item.mce-monospace > span {
font-family: monospace;
color: olive;
}
.mce-menu-item.mce-arial > span{
font-family: Arial;
color: red;
}
.mce-menu-item.mce-timesnew > span{
font-family: Times New Roman;
color: green;
}
Notice if you just use .mce-monospace > span The precedence value is not big enough, while with .mce-menu-item.mce-monospace > span has a bigger precedence value and overrides tinymces css.
Have a look at this example Demo
Related
I understand that in order to style elements from the ShadowDOM, the shadowDOM itself has to "know"
the element, thus be declared inside of it.
It works well for regular web components but i haven't found an answer to it weather it's the same for an extended
native element.
For example, I wanted to know if the code I wrote is the best way, i.e. the external p acting as container, or am i creating a redundant p element.
JavaScript:
class P_example extends HTMLParagraphElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>
p{
background-color: orangered;
width: max-content;
}
</style>
<p><slot>Some default</slot></p>
`;
this.shadowRoot.append();
}
connectedCallback() {
//add styling class to the p element
}
}
customElements.define("omer-p", P_example, { extends: "p" });
HTML:
<p is="omer-p">Some sample text</p>
I am working on a web component library with StencilJS, and I have a problem using the CSS + Selector. I have a Breadcrumb web component, which will contain multiple breadcrumb items (web component as well). Every Breadcrumb item after the first item should add > smybol with ::before. Therefore I use the CSS + selector
df-breadcrumb.tsx
export class DFBreadcrumb {
render() {
return <ol class="breadcrumb">
<slot></slot>
</ol>
;
}
}
df-breadcrumb-item.tsx
export class DFBreadcrumbItem {
/**
* Link
*/
#Prop() link: string;
render() {
return this.link ? <li class="breadcrumb-item"><a href={this.link}><slot></slot></a></li> :
<li class="breadcrumb-item"><slot></slot></li>
;
}
}
test.html
<df-breadcrumb>
<df-breadcrumb-item link="#">Start</df-breadcrumb-item>
<df-breadcrumb-item link="#">Library</df-breadcrumb-item>
<df-breadcrumb-item>Item</df-breadcrumb-item>
</df-breadcrumb>
my css rule
.breadcrumb-item+.breadcrumb-item:before {
display: inline-block;
padding-right: .5rem;
color: #6c757d;
content: ">";
}
expected output: Start > Library > Item
current output: Start Library Item
I think this is not working cause Stencil ecapsulates my li tags and their direct parent is not the ol. I read something about using the :host() pseudo class, but could not got it working. Also I have set shadow: falsein my components.
You're right, the problem is the df-breadcrumb-item element.
A simple alternative would be to apply your CSS to the df-breadcrumb-item elements:
df-breadcrumb-item + df-breadcrumb-item:before {
display: inline-block;
color: #6c757d;
content: ">";
}
Alternatively you could add the arrow to the .breadcrumb-item element inside the df-breadcrumb-item component, either depending on a property or by manually checking if the #Element() is the last node.
I have a list of statuses , i want the user to select one , not all statuses are enabled some of them will be disabled .
I want the disabled options to have some css styling (like gray color)
<ion-select [(ngModel)]="selectedStatus">
<ion-select-option [disabled]="isStatusDisabled(o)" *ngFor="let o of appointmentStatusOptions" [value]="o">
{{appointmentStatus[o]}}</ion-select-option>
</ion-select>
i have tired to select the element by :disabled like:
ion-select-option[disabled] {
--color:gray;
}
and tried to change all disabled as disperate action like :
:disabled {
--color:gray;
}
the css style doesn't appear at the borwser at all
ionic adds class .select-disabled for the disabled select so you can try to specify that in your css
To change globally you can add this in component style sheet:
::shadow /deep/ button[disabled] .alert-radio-label {
color: gray;
}
Or on global.scss:
ion-alert button[disabled] .alert-radio-label {
color: gray;
// color: var(--ion-color-gray, gray);
}
I'm using Exjts 4 and i want to change the button text color. Here is my code:
{
xtype: 'button',
text: 'My Button',
style:{
color: 'red'
}
}
In case someone needs it. I do not know if it's a dirty solution but it works
{
xtype: 'button',
text: '<div style="color: red">My Button</div>',
}
Davor Zubak shed light on a solution although it failed in my complex application. I achieved what I want by this:
Button's cls: 'myButton'
In my css file, define:
.myButton .x-btn-inner {
color: red;
font-family: Georgia;
font-size: large;
font-weight: bold;
}
This way it only overrides the ExtJS theme for the particular buttons who have 'myButton' cls.
There is some strange behavior in Extjs 4.2.0, but there is an override possible. Give your button a class using cls:'yourClassName' property and then in CSS make a full path to span holding the text, like so: .yourClassName div a span. Also give your css property a !important value to successfuly override base class.
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
},
cls: 'foo'
});
and in css simply:
.foo div a span
{
color:#ff0000 !important;
}
Here is a example.
I am using the following code block to format text:
'formats': {
'format_code': {
'block': 'pre',
'styles': {
'color': '#000000',
'backgroundColor': '#f0f0f0',
'fontFamily': 'monaco,consolas,courier new,monospace',
'fontSize': '1.0em',
'width': '80%',
'minHeight': '5.0em',
'maxHeight': '15.0em',
'overflow': 'auto',
'border': '1px solid #999999',
'padding': '1.0em'
}
}
This code block was given to me. Now I would like to change it to use a CSS class.
Can anyone advise me how to do this. I am not familiar with tinyMCE.
The CSS is almost identical. The camelCase properties are dash seperated in CSS and the font containing a space must be quoted.
.myClassSelector {
color:#000000;
backgroundColor:#f0f0f0;
font-family:monaco,consolas,"courier new",monospace;
font-size:1em;
width:80%;
min-height:5em;
max-height:15em;
overflow:auto;
border:1px solid #999999;
padding:1em;
}
I assume you want to add it to the drop down Styles in TinyMCE. If you want to add it to the Format drop-down then that requires a different configuration option.
If you want a new Style in the drop-down then you need to put the CSS class rule above in a .css file and configure TinyMCE as follows:
tinyMCE.init({
theme:'advanced',
content_css:'path/to/css/file',
style_formats : [
{title : 'My Style', block : 'div', classes : 'myClassSelector'}
]
});