I am attempting to configure a Quill toolbar via code and for the most part, it's configured how I want it.
But I cannot figure out how to move the align tools (center/left/right/justify) from a drop-down[{ 'align': [] }] to the toolbar directly.
I've tried:
['bold', 'italic', 'underline', 'left','center','right'] which results in blank toolbar buttons that do nothing. And I've tried variants of those.
Is what I'm trying to do possible with the core Quill.js? Or does this require customization?
Related
When I try to add link to very left text in quill editor the popUp opened is hiding in the left side.And I am using Snow theme.
The below image shows my issue.
Not the most elegant solution, but you may need to override the css:
.ql-tooltip {
left: 0!important;
}
Sometimes quilljs doesn't play nice with theming libraries like certain versions of bootstrap (which was the issue in my case).
I have a grapesjs editor that is working perfectly. However, because I am using multiple plugins, I am duplicate preview buttons.
Here is a snippet of my initializaion:
editor = grapesjs.init({
container: '#my-element',
fromElement: 1,
showOffsets: 1,
allowScripts: 1,
plugins: ['gjs-preset-webpage', 'gjs-preset-newsletter'],
...
I have attached a screen of what I am seeing. As you'll notice, there are duplicate "preview" buttons. If I remove a plugin, only one set of icons will appear (as expected).
This is not correct, but was trying something along these lines to see if I could remove the buttons manually.
editor.Panels.removeButton('preview', [{
//
}]
);
Thank you for any suggestions.
You can remove duplicate buttons as mentioned below. the first parameter is the pane
editor.Panels.removeButton('devices-c', 'block-editor');
I've got a fiddle of a base layout I'm trying to add responsive configurations to.
My goal is to use a border layout where the navigation can change between the western region and the northern region depending on the window size and the layout config can switch between vertical and horizontal so that when the region is west the buttons are grouped vertically and when the region is north the buttons are grouped horizontally.
I know that by default, the layout type cannot be changed at runtime, but I found this forum thread where a user points out that if you use the box layout type (the parent of vbox and hbox) you can update the vertical config to change the grouping at runtime.
The fiddle I linked above is my attempt at prototyping that concept out.
The problem I'm running into is that the responsiveConfig cannot find the setters for the particular properties that I'm trying to change, and it's not just for the vertical config. Config items that I know have setters and I have seen work before in the responsiveConfig are not working as well:
Ext.layout.container.Box definitely has a setPack method.
Am I mis-configured somehow?
I posted to the thread in sencha's forums where the technique I was trying was described. The poster who answered the question originally answered my post with an updated fiddle showing the correct implementation.
I've added the responsive box implementation as well as the region switching into my fiddle.
Here's the responsive sections needed:
plugins: 'responsive',
responsiveConfig:{
wide:{
layout:{
type: 'box',
vertical: true,
pack:'start'
},
region: 'west'
},
tall:{
layout:{
type: 'box',
vertical: false,
pack: 'center'
},
region: 'north'
}
I think the important part to know here (and what was tripping me up) is that you have to include the type: 'box' in the layout config for the responsiveConfig property because responsiveConfig is not firing each individual setter for the layout (type, vertical, and pack), it's firing the overall layout setter method. If you don't include the type config in the object you give the layout config, it uses the default type which is 'auto'.
This is why in the screenshot I included in the original post the error messages in the javascript console where referring to Ext.layout.container.Auto and not Ext.layout.container.Box. The error message was right, Ext.layout.container.Auto doesn't have a setPack method.
Changing layouts at runtime is not currently supported. There is a feature request for it here:
https://www.sencha.com/forum/showthread.php?294082
Fiddle with a workaround:
https://fiddle.sencha.com/#fiddle/dqj
The error is complaining about auto layout having no setter for pack.
This tells me the layout is indeed being set during runtime, according to the value specified in the responsive layout config. Since there is none defined, just the vertical and pack, config, the layout type is interpreted as auto. Small changes in your fiddle, defining the layout type as below:
responsiveConfig:{
wide:{
layout:{
type : 'vbox',
pack:'start'
},
bodyStyle:{'background-color': 'orange'}
},
tall:{
layout:{
type : 'hbox',
pack: 'center'
},
bodyStyle:{'background-color': 'purple'}
}
},
And your error was gone.
I am working on an application which uses ExtJS4 for the front-end. Right now, I am using a border layout for the home page of my application. I will describe the components in my border layout here:
north: It has a header and a toolbar/menu below it.
west: It has a tree panel.
center: It has tab panels.
Now, my question is related to the header...the header consists of the application logo and application name on the left side and buttons/icons displaying the user name,log out,help,etc on the right side. Also, the menu below it, will display buttons based on the privileges that the current user has!
********* The requirement for the header in the home page of my application is exactly the same as the header of the Sencha homepage http://www.sencha.com/products/extjs/, wherein
the first row has the Sencha logo and the name Sencha to the left. And to the right, I have my user name,log out,etc.
the second row is a toolbar/menu with various options in it.
Now,here are my questions:
Should I should use an image for the header, if I can use an image then Will I be able to place the icons on that image.?
Should I use a toolbar wherein I can place the logo and name to the left, then use a tbfill and place the icons to the end.?
If this is not the right approach to create the header for the home page, Can someone please guide me on any other better approach to this..
Thanks in advance
Maybe try starting with a plain old container with an hbox layout. It can have two items: the first (left) item can be the image and the second (right) can be another container (or even a toolbar) that manages the buttons/links/whatever.
The benefit of this is that you can control each section (right and left) independently in terms of content, widths, etc.
I'd encourage you to look at the source for the kitchen sink site. This is pretty much what they're doing...
Ext.define("KitchenSink.view.Header", {
extend: "Ext.Container",
title: "Ext JS Kitchen Sink",
height: 52,
layout: {
type: "hbox",
align: "middle"
},
initComponent: function() {
...
this.items = [
{xtype: "component",id: "app-header-logo"},
{xtype: "component",id: "app-header-title",html: this.title,flex: 1}
];
if (!Ext.getCmp("options-toolbar")) {
this.items.push({xtype: "themeSwitcher"})
}
this.callParent();
}
});
When I have a collapsible panel, ExtJs renders an icon in the tools area to expand/collapse, but also puts a little black triangle between the panels to do exactly the same thing.
I found in the documentation that I can hide the icon in the tools area, using hideCollapseTool:true, but I want to hide that little black triangle instead. How to do that?
Did you try split:false on the panel?
In Ext JS 5 (and likely some earlier versions as well) the split configuration parameter can be either a boolean value or a configuration object for an Ext.resizer.BorderSplitter object.
According to the API the collapsible property can be used to manually show or hide the collapse button in the splitter, so you can set that property to false to hide that button you're talking about.
The solution tested and working in 5.1 looks like this, assuming the panel is contained in a container with a border layout:
{
xtype: 'panel',
region: 'west',
split: {
collapsible: false
}
}
P.S. I know this is 2 years late but I found this question while looking for the solution myself. Figured I might as well share the solution from the API.
Edit: Made a fiddle. Also, it's worth mentioning that this retains all of the other splitter functionality that is lost if you use split: false, such as keeping the panel resizable.