I have multiple ckeditor in a component and for some reason i want a textarea-ckeditor to be readonly with some toolbar enabled;
ie: 'print','preview','find', and 'maximize'.
How can i achieve this? i've tried removing the plugins but only success if i alter the config.js which will 'standardize' all my ckeditor.
What i can think is that i need to alter something from this code.
CKEDITOR.replace('header',{
width: '100%',
height: 570});
Thanks in adv..
I found the solution but instead of removing the toolbar buttons, i list all the desired buttons as following;
toolbar: [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: ['-','Preview', 'Print', '-' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find','-','-' ] },
{ name: 'tools', items: [ 'Maximize'] }
]
Related
I'm trying to build a custom set of column blocks using InnerBlocks and am having trouble passing attributes to block templates. To start, I scaffolded a new plugin using Create-Guten-Block. I then created two blocks, one to serve as a row container, and one for individual columns.
Here is a simplified version of how I'm creating the main container (with two columns hard-coded for testing):
registerBlockType( 'wabe/multi-column-block', {
title: __( 'Multi-Column' ),
icon: 'columns',
category: 'common',
keywords: [
__( 'columns' ),
__( 'grid' ),
],
attributes: {
layout: {
type: 'string',
},
},
edit: () => {
return (
<div>
{ /* inspector controls for choosing a layout will go here */ }
<InnerBlocks
template={ [
[ 'wabe/multi-column-column', { columnwidth: '6' }, [
[ 'core/paragraph', { content: 'Insert column content here.' } ],
],
],
[ 'wabe/multi-column-column', { columnwidth: '6' }, [
[ 'core/paragraph', { content: 'Insert column content here.' } ],
],
],
] }
/>
</div>
);
},
save: () => {
// This is a dynamic block
return (
<InnerBlocks.Content />
);
},
} );
... and how I'm creating the individual column block:
registerBlockType( 'wabe/multi-column-column', {
title: __( 'Multi-Column Column' ),
icon: 'columns',
category: 'common',
keywords: [
__( 'columns' ),
__( 'grid' ),
],
attributes: {
columnwidth: {
type: 'string',
default: '',
},
},
edit: ( props ) => {
return (
<div>
<p>Width: { props.attributes.columnwidth }</p>
<InnerBlocks />
</div>
);
},
save: () => {
return (
<InnerBlocks.Content />
);
},
} );
I'll have a custom select for users to choose a column layout, and using that, will determine how many columns to include, and pass the "columnwidth" attribute to each column block. This will tell each column what CSS class to use.
The problem is no matter what I try, that "columnwidth" attribute just will not be passed to the column block. In fact, I can't get it to pass anything, even "className".
I've looked at the code for core columns/column blocks, and can't see what I'm doing wrong. Everything has gone great up until this giant roadblock. Any tips are appreciated.
The block code example you have provided shows you are setting up the InnerBlocks fine. The issue may be a simple oversight that you have missed importing the required dependancy of <InnerBlocks>.
I was able to build your block code successfully once I added the required imports:
import { registerBlockType } from '#wordpress/blocks';
import { __ } from '#wordpress/i18n';
import { InnerBlocks} from '#wordpress/block-editor';
Here is the result:
The code editor shows that your attributes are being passed and being saved.
If you are still encountering an issue, double check that you are clearing your browser cache before retesting and also check the browser console to see if any errors are present.
As you mentioned you have already reviewed the Gutenberg code for Columns/Column, a tip would be to look at how they do variations for creating the options in your Inspector Control. Hope this gets you back on track with creating your block.
How to fix it? I found a bug on layout card animation using grid component;
What happens?
When you configure the layout for the "card" type and animation for "slide", "cover" etc... the line selection (record) stops working, when hovering over the record and clicking, the css of check gives bug.
When you change the layout to "card" simply, the grid selection works normally.
I'm using Windows 10, Edge browser;
See the bug on Sencha Fiddle
It is only the grid, dataview does not appear to have the same problem.
Not getting the error on firefox.
Also only with Material theme because it is related to Fashion. I could not figure out how to import Fashion in the sencha fiddle so I could not add to your fiddle.
I found that if you unchecked ANY color in chrome devtools the problem goes away for one animation. So i messed around with resetting the colors and that seems to work. You have to change a color wait 10 milliseconds and change it back. You can change ANY color. I am changing the hovered-background-color but it can be anyone of the predefined colors. I change it just one shade and it is only for 10 milliseconds. It will only work with colors in the format of #11111.
I have not figured out what is causing the problem but I have a huge hack of a work around. I am sure this can be improved... also did not test much at all. Feel free to post any improvements, or if you figure out the underlying problem.
items: [{
xtype: "grid",
ui: 'default',
listeners: {
show: function() {
let cssVariables = Fashion.css.getVariables();
let oldColor = cssVariables['hovered-background-color'];
newColor = parseInt(oldColor, 16);
newColor = '#' + (((newColor & 0x0000FF) + 1) | ((((newColor >> 8) & 0x00FF) + 1) << 8) | (((newColor >> 16) + 1) << 16)).toString(16);
cssVariables['hovered-background-color'] = newColor;
Fashion.css.setVariables(cssVariables);
Ext.defer(function() {
cssVariables['hovered-background-color'] = oldColor;
Fashion.css.setVariables(cssVariables);
}, 10);
}
},
title: 'Simpsons',
store: {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]
},
columns: [
{ text: 'Name', dataIndex: 'name', width: 200 },
{ text: 'Email', dataIndex: 'email', width: 250 },
{ text: 'Phone', dataIndex: 'phone', width: 120, flex: 1 }
]
}, {
I have set up a simple CSS file with a single .test class and have the following settings in TinyMCE I get two menus that both say 'Paragraph at the top. How do edit the CSS styles menu
tinymce.init({
selector: '#tiny',
menubar:false,
'content_css': 'my-styles.css',
importcss_append: false,
style_formats_merge: true,
plugins: ['importcss'],
toolbar: 'code| insertfile undo redo searchreplace | paste pastetext | formatselect | styleselect '
});
format menu
css styles menu
Here's a working example in case anyone else is looking:
content_style:
'.news-img-left { float: left;margin:1em 1em 1em 0;max-width:400px;height:auto }' +
'.news-img-right { float: right;margin:1em 0 1em 1em;max-width:400px;height:auto }' +
'.news-img-full { margin:1em 0;width:100%;max-width:100%;height:auto }',
style_formats: [
{ title: 'Text Formats' },
{ title: 'Paragraph', format: 'p' },
{ title: 'Heading 1', format: 'h1' },
{ title: 'Heading 2', format: 'h2' },
{ title: 'Heading 3', format: 'h3' },
{ title: 'Image Formats' },
{ title: 'Image Full Width', selector: 'img', classes: 'news-img-full' },
{ title: 'Image Left', selector: 'img', classes: 'news-img-left' },
{ title: 'Image Right', selector: 'img', classes: 'news-img-right' },
],
then in tool bar I added button 'styleselect'
This question was also asked in the TinyMCE Github issuetracker and I'll copy in the answer here for completeness.
Both formatselect and styleselect shows the currenly used format. The default format is the "Paragraph", matching the <p> tag basically.
The styleselect doesn't have anything to do with CSS style really, think of it more in terms of visual appearances. The differences between styleselect and formatselect are mainly in the config options available:
The formatselect button is configured by the block_formats option and is rather basic.
The styleselect button is configured through the style_formats option and is much more advanced. It can contain nested menus, have groups etc.
When you use the Ext.dataview.List in Sencha, it automatically inserts a nice loading spinner while the data is loading. That's all fine and dandy, but I'd like to know how to use a custom loader .gif.
I've looked around and think I need to change the loadmask but not positive cause I'm new to this. See this link.
Below is the code for one of my Lists. I'm hoping to be able to add the code suggested to one place so that all lists are affected and have the new spinner.
{
xtype: 'list',
height: '',
id: 'categoryList',
itemId: '',
width: '100%',
scrollable: false,
emptyText: '<div class="pdtsListHtml" style="margin-top:30%">Product List Empty</div>',
itemTpl: [
'<div ><div class="pdtsListHtml" style="display:inline;">{navigationElementItemName} ({navigationElementItemRecordCounts})</div><div style="display:inline;float:right;margin-right:5px;"><img src="resources/image/arrow.png" width="11" height="11"></div></div>'
],
store: 'productListStore',
allowDeselect: true,
onItemDisclosure: false
}
Here's a fiddle that shows you an example list with a loading mask that uses a gif.
Basically you should define your own Ext.LoadMask subclass and use it on the list:
Ext.define("Test.MyLoadMask", {
extend: "Ext.LoadMask",
alias: "widget.myloadmask",
getTemplate: function() {
var prefix = Ext.baseCSSPrefix;
return [
{
reference: 'innerElement',
cls: prefix + 'mask-inner',
children: [
{
reference: 'indicatorElement',
cls: prefix + 'loading-spinner-outer',
children: [
{ tag: 'img', src: "http://example.com/my-spinner.gif" }
]
},
{
reference: 'messageElement'
}
]
}
];
}
});
Then you should define an applyMasked on your lists that modifies the xtype and sets it to myloadmask instead of loadmask.
Why in component
var matrix = new enyo.Control({
name:"Matrix",
tag: "div",
classes : 'strategies',
/*handlers: {
init: "initHandler"
},*/
components: [
{ tag: "div", classes: "blankblock", content: ' ' },
{ tag: "div", classes: "label1", content: 'Player A' },
{ tag: "div", classes: "label2", content: 'B' },
{ name:'matrixTable', tag: "table", components: [
{ name: 'tr1', tag: 'tr', components: [
{ tag: 'td', components: [{tag: 'input'}]},
{ tag: 'td', components: [{tag: 'input'}]}
]},
{tag: 'tr', components: [
{tag: 'td', components: [{tag: 'input'}]},
{tag: 'td', components: [{tag: 'input'}]}
]}
]} ,
{ name: 'addV', tag: "button", classes:'addV', content: "+", ontap: "addRow" },
{ name: 'addH', tag: "button", classes:'addH', content: "+", ontap: "addColl" }
],
addRow: function(inSource, inEvent){
this.$.matrixTable.createComponent
alert(this.$.matrixTable.$.toSource());
},
addColl: function(inSource, inEvent){
}
});
this.$ include all components, even those with nesting order 2
I expect
this.$.matrixTable.$.tr1
but I have
this.$.tr1
Because you declared them as part of the Matrix kind then Enyo will have them all owned by the Matrix kind. If you want them to be owned as you described then you need to break out the MatrixTable kind into its own separate kind. If you want to enforce that encapsulation then you need to create a kind to hide it.
Further, you should always avoid going two levels deep into a kind. In other words, this.$.matrixTable.$.tr1 would be bad form. Make properties or add functions to return values.
In enyo you need to be aware of two chains: owner chain vs parent-child chain.
Whereas "matrixTable" is a parent of "tr1", an owner of "tr1" is "Matrix".
So to get to "tr1" from "Matrix", you can go two ways:
this.$.tr1 or this.children[3].children[0],
similarly, to get to "Matrix" from "tr1" you can do:
this.$.tr1.owner or this.$.tr1.parent.parent
This way, no matter how deeply nested are your components, the owner will always be the kind within which the component is defined.