I need to use inline styles so I used this code:
var BackgroundStyle = Quill.import('attributors/style/background');
var ColorStyle = Quill.import('attributors/style/color');
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(BackgroundStyle, true);
Quill.register(ColorStyle, true);
Quill.register(SizeStyle, true);
If I just add this code nothing works. So, I changed the toolbal config:
var config = {
modules: {
toolbar: [
...
[{ 'size': ['10px', false, '18px', '32px'] }], // custom dropdown
]}};
editor = new Quill(editorElem, config);
It starts working but in the dropdown for the size all the values look like "Normal":
So how to change the dropdown too?
Change the styles too. Add this code to make everything work (do the same for other styles):
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before{
content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
content: 'Huge';
font-size: 32px;
}
This answer was posted as an edit to the question Can't make Quill editor name size options when I use inline styles by the OP mimic under CC BY-SA 3.0.
Related
HoverExample
How to add hover text like that of the above image to a custom extension in jupyterlab. I'm making an extension in jupyter lab using react, but I want to add a description of the extension in a hoverbox. However I cant figure it out.
To add a hover box in the extension, you have to pass value to [widgetInstance].title.caption
For example:
const extension: JupyterFrontEndPlugin<void> = {
id: 'some-id',
autoStart: true || false,
activate: async(app: JupyterFrontEnd, palette: ICommandPalette) => {
const { commands } = app;
let widget1: widget= new widget(); // create the widget
widget1.id = 'widget1-id';
widget1.title.label = 'widget Label';
widget1.title.caption="widget hovering text description"; // this will show the text when you hover over an extension
app.shell.add(widget1, 'right', { rank: 1 });
...
...
... rest of your code ...
}
I have implemented EditorJS in a website, and everything is working.
The problem is that I don't know how to configure the Editor JS to reduce his width and height, and how to appear aligned on the left.
This is my code to instantiate EditorJS:
<!-- html -->
<div id="editorjs" name="detailed_draft"></div>
//javascript
const TOOLS = {
list: {
class: List,
inlineToolbar: true
},
header: {
class: Header,
inlineToolbar: true
},
underline: {
class: Underline
}
}
const editor = new EditorJS({
/**
* Id of Element that should contain the Editor
*/
holder: 'editorjs',
tools: TOOLS,
placeholder: 'Write some Details!',
data: obj
})
image showing the EditorJS display
As you can see on this discussion the solution is to override the EditorJS CSS.
<style>
.ce-block__content,
.ce-toolbar__content {
max-width: unset;
}
</style>
i'm using react-jitsi library for rendering jitsi video
var interfaceConfig = {
SHOW_BRAND_WATERMARK: true,
SHOW_WATERMARK_FOR_GUESTS: false,
};
<Jitsi
// doamin="meet.jit.si"
roomName={'12345rfewhgresjttyi'}
displayName={'prakash'}
password={password}
interfaceConfig={interfaceConfig}
/>
i tried to hide jisti watermark in background using interfaceConfig. but interface config doesn't affect any UI.
Also i tried with css:
.leftwatermark {
display: none;
}
This is also not working.
i referred this link for hide watermark
Is there any way to hide the jitsi watermark using reactjs?
SHOW_BRAND_WATERMARK and SHOW_WATERMARK_FOR_GUESTS can not be overwrite by the client and must be in the server config
You must edit the file interface_config.js
sudo nano /usr/share/jitsi-meet/interface_config.js
And switch to
SHOW_BRAND_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false,
then, save your file, and restart your browser page.
Be careful, this file can be reset to default when your upgrade Jitsi on your server. The fix is already asked in the roadmap.
there is no any way of removing the jitsi watermark.
but you can remove the link behind it.
If you need to hide the watermark of the Jitsi meet by using iFrame API, what you have to do is to override these attributes which include in the interface_config.js
SHOW_JITSI_WATERMARK: false,
HIDE_DEEP_LINKING_LOGO: true,
SHOW_BRAND_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false
const options = {
...
configOverwrite: { startWithAudioMuted: true },
interfaceConfigOverwrite: { DISABLE_DOMINANT_SPEAKER_INDICATOR: true },
...
};
const api = new JitsiMeetExternalAPI(domain, options);
you can change the background-image link in css like below
.leftwatermark {
left: 32px;
top: 32px;
background-position: center left;
background-image: url(your-image-url); } // better view
I just added FontAwesome to my ExtJS application.
I added a Glyph to my tab:
items: [
{
title: 'Dashboard',
glyph: 0xf009,
padding: '5',
I would like to change the Glyph color, is that possible?
This should work:
.x-panel-header .x-panel-header-glyph {
opacity: 1;
color: red;
}
You can see it in action here: http://extjs.eu/examples/#complex-data-binding
I tried the Saki way
.x-panel-header .x-panel-header-glyph {
opacity: 1;
color: red; }
but then you don't have the control to change attributes for specific glyph and if I want to set it for individual glyph I will need to work harder.
I use a simple way:
Step 1: add a link to the css file
link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
Step: 2:
use iconCls
iconCls: "fa fa-lg fa-futbol-o glyph"
here I used the awesome classes "fa fa-lg-fa-futbol-o" but I added "glyph" so it will looks better than without.
Step 3:
define "glyph" in your css file.
.glyph { margin-top: 3px; }
Step 4:
define any css you can apply to the glyph like color.
The result:
in css file:
.glyph { margin-top: 3px; }
.youname { color: #15498B; }
in js ( every where you have config iconCls )
iconCls: "fa fa-lg fa-futbol-o glyph youname"
I know this is a little late but for anyone else in the future who wants change Glyph icons when using custom fonts with Exts.
I used the reference to the button in my controller passed in during the event. I then got the buttons ID then target the button using the get method and concatenating "-btnIconEl" to the the button ID as any glyph/icon will have that CSS.
'button[action=displayGrids]' : {
click: function(button) {
Ext.get(button.id + '-btnIconEl').setStyle('color', '#ffffff');
}
}
For some reason Ext.Panel.getTopToolbar() is returning an array of objects (the elements of the toolbar, but NOT the toolbar itself) and not an Ext.Toolbar. Because of that, I can't manage to hide an already set toolbar. How should I proceed?
Sample code:
function (panel)
{
alert(panel.getTopToolbar()); // displays the list of elements in the toolbar
panel.getTopToolbar().hide(); // error: "hide" is not a function
}
It should work, so it sounds like maybe you used topToolbar as a config instead of using tbar as the config? If you set a tbar config it gets instantiated and saved as topToolbar which is the Ext.Toolbar instance exposed by getTopToolbar(). If you overwrote topToolbar directly you might see this issue.
You might find this block of code in Panel.onRender (you'll have to include that file directly) and set a breakpoint in Firebug to see what's happening:
if(this.tbar && this.topToolbar){
if(this.topToolbar instanceof Array){
this.topToolbar = new Ext.Toolbar(this.topToolbar);
}
this.topToolbar.render(this.tbar);
}
panel.getTopToolbar().setVisible(false);
In 4.2.1 what works for me is:
var topToolbar = Ext.create('Ext.toolbar.Toolbar', {
dock: 'top',
width: 'auto',
id: 'mytoolbar',
hidden: true,
items: [...]
});
var p = Ext.create('App.view.MyCustomPanel', {
html: 'test',
});
if (userCanSeeToolbar) {
p.addDocked(topToolbar);
}
Then dynamically I can show/hide the top toolbar:
/* if (userCanSeeToolbar) { */
p.getDockedComponent('mytoolbar').show();
p.getDockedComponent('mytoolbar').hide();