Trying to add class to only selected paragraphs in WordPress Editor.
Added a button called 'Add stylish '<li>' where there is an item called 'Includes'. So my need is to add class to the selected '<p>' when 'Includes' is pressed. Any help will be really grateful. Thanks!
(function() {
tinymce.PluginManager.add('sanjog_custom_tinymce_button', function( editor, url ) {
editor.addButton( 'sanjog_custom_tinymce_button', {
title: 'Add stylish <li>',
type: 'menubutton',
fixedWidth: true,
icon: 'icon dashicons-menu',
menu: [
{
text: 'Includes',
onclick: function() {
tinyMCE.activeEditor.focus();
tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.selection.select('p'),'test');
}
},
]
});
});
})();
Related
I migrated from Ionic 4 to Ionic 5 and noticed my toastControllers are not showing the "close" button even if I set up the ToastOptions properties with showCloseButton: true
I fixed it adding explicitly the buttons array like this:
let toast = this.toastCtrl.create({
message: 'User was added successfully',
showCloseButton: true,
position: 'top',
buttons: [
{
text: "close",
handler: () => {
console.log('Close clicked');
}
}
]
});
How to add custom icons in w2ui toolbar.
I need to add redo and undo icons in w2ui toolbar.
Could you please let me know?
You can use font awesome or any other CSS class based icons in a w2ui toolbar.
Example:
$(function () {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [
{ type: 'button', id: 'item1', text: 'Undo', icon: 'fa fa-undo' },
{ type: 'button', id: 'item2', text: 'redo', icon: 'fa fa-repeat' }
],
onClick: function (event) {
console.log('Target: '+ event.target, event);
}
});
});
Internally, w2ui will create a <span class="fa fa-undo"> tag for the icon, thus - like I said - you can just use any other CSS based icons.
Live example: http://w2ui.com/web/demos/#!toolbar/toolbar-9
Note: the live example uses an old font awesome version, where the extra fa class is missing.
Change [] and ... Enjoy:
[!DOCTYPE html]
[html][head][title]W2UI Demo: toolbar-1[/title]
[link rel="stylesheet" href="http://w2ui.com/web/css/font-awesome/font-awesome.min.css"]
[link rel="stylesheet" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css"]
[script type="text/javascript" src="http://w2ui.com/web/js/jquery-2.1.1.min.js"][/script]
[script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"][/script]
[style]
.MyIcon1 { content:url('MyLocalIcon.png'); }
.MyIcon2 { content:url('https://www.gstatic.com/inputtools/images/tia.png'); }
[/style]
[/head]
[body]
[div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px"][/div]
[script type="text/javascript"]
$(function () {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [ { type: 'button', id: 'btn1', text: 'Undo', icon: 'fa-undo' }, //icon get from: font-awesome
{ type: 'button', id: 'btn2', text: 'Redo', icon: 'fa-repeat' }, //icon get from: font-awesome
{ type: 'button', id: 'btn3', text: 'Local Icon', icon: 'MyIcon1' }, //local file
{ type: 'button', id: 'btn4', text: 'Net Icon', icon: 'MyIcon2' } ] //internet link to file
});
});
[/script]
[/body]
[/html]
You can use also bootstrap glyphicon with no problem, example
icon: 'glyphicon glyphicon-menu-left'
But bootstrap 4 doesn't include fonts folders so you can download bootstrap3 and copy the fonts folder in you project , the folder contains
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2
and after go here and add this css in bootstrap4 css at the end of the file..
https://gist.github.com/planetoftheweb/5d75a1ad45eb3059710747a3695fc068
and insert the right font path of your folder copied in your project.
Or you can use every png in right format for example in this way
<style type="text/css">
.icona:before{
content:url('yourUrl.png');
}
</style>
<script type="text/javascrpt">
//Your w2ui object....
{ type: 'button', id: 'item1', text: 'Undo', icon: 'icona' },
</script
I have a nested list on one of the pages of a Tabbed Panel app that is pulling data from "offices.json"
I should like to be able to filter this list when a user clicks on a toolbar button. However my filterBy() function doesn't update the store and the list of offices I can see, even though I can see in the console it is iterating the records and finding a match. What am I doing wrong?
(And yes I have tried doing s.load() both before and after the filterBy to no avail!)
toolbar:{
items:[{
text: 'Near you',
id: 'btnNearYou',
xtype: 'button',
handler: function() {
s = Ext.StoreMgr.get('offices');
s._proxy._url = 'officesFLAT.json';
console.log("trying to filter");
s.filterBy(function(record) {
var search = new RegExp("Altrincham", 'i');
if(record.get('text').match(search)){
console.log("did Match");
return true;
}else {
console.log("didnt Match");
return false;
}
});
s.load();
}
}]
For the record I'm defining my store like so:
store: {
type: 'tree',
model: 'ListItem',
id: 'offices',
defaultRootProperty: 'items',
proxy: {
type: 'ajax',
root: {},
url: 'offices.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
No need to recreate the regex each time, cache it outside.
You can simplify the code a lot (see below).
Why are you calling load directly after? That's going to send it to the server and it will just retrieve the same dataset.
toolbar: {
items: [{
text: 'Near you',
id: 'btnNearYou',
xtype: 'button',
handler: function() {
s = Ext.StoreMgr.get('offices');
s._proxy._url = 'officesFLAT.json';
var search = /Altrincham/i;
s.filterBy(function(record) {
return !!record.get('text').match(search);
});
}
}]
}
I am trying to add dinamically a panel item to a main panel with a card layout which has initially one panel in it.
After one event (a tap) i build dinamically a new panel and I add it to the main panel, after this i try to set the new panel item like the active one via setActiveItem
Things work ok on Android but not on iphone.
Exactly i have this app.js:
Ext.Loader.setConfig({enabled: true});
Ext.setup({
viewport: {
autoMaximize: false
},
onReady: function() {
var app = new Ext.Application({
name: 'rpc',
appFolder: 'app',
controllers: ['Home'],
autoCreateViewport: false,
launch: function () {
Ext.create('Ext.Panel',{
fullscreen: true,
layout: {
type : 'card',
animation:{
type:'slide'
,duration :3000
}
},
defaults: { /*definisce le caratteristiche di default degli elementi contenuti..??*/
flex: 1
},
items:[{
title: 'Compose',
xtype: 'griglia'
}]
});
}
});
}
});
In a controller i have
.....
.....
var grigliaPan=button.up('griglia');
var mainPan=grigliaPan.up('panel');
var html=
'<img src="img/'+segnoScelto+'_big.png" />'
+'<h1>'+segnoScelto+'</h1>'
+'<p>'+previsione+'</p>'
+'</br></br>';
if (typeof mainPan.getComponent(1) == 'undefined'){
var previsioPan = Ext.widget('previsio');
previsioPan.setHtml(html);
//here i create a button for going home panel
var backButton=new Ext.Button({
ui : 'decline',
alias: 'widget.backbutton',
text: 'Home Page',
width : 150,
height:100
})
previsioPan.add(backButton);
var it=mainPan.getItems();
alert (it['keys']); //this prints : ext-griglia-1
mainPan.add(previsioPan);
var it=mainPan.getItems();
alert (it['keys']); //this prints : ext-griglia-1,ext-previsio-1
//
}
mainPan.getLayout().setAnimation({type: 'slide', direction: 'left', duration:1000});
//mainPan.setActiveItem(1);
var pree=mainPan.getAt(1);
//pree.show();
//mainPan.setActiveItemm(pree);
mainPan.setActiveItem('ext-previsio-1');
The three form of setActiveItem() are ok for Android and falls with iPhone. Can somebody please show me what is the right way to set the new active item added dinamically on the iphone ?
The problem should not be with the add() function cause i can see the new item via the getItems() added in main panel after the add().
by following code you can understand that thisCell is added later after creation of thisRow.
var thisRow = new Ext.Panel({
layout: { type: 'hbox', align: 'stretch', pack: 'center' },
id: 'row' + (rowCount + 1),
defaults: { flex: 1 }
});
// Now we need to add the cells to the above Panel:
var thisCell = new Ext.Panel({
cls: 'dashboardButton',
layout: { type: 'vbox', align: 'center', pack: 'center' },
items: [{
xtype: 'image',
src: 'some image url',
height: '70px',
width: '100px',
}]
});
thisRow.add(thisCell);
hope this will help you to achieve your desired output...
Just diving into SenchaTouch which seems very promising.
I'm building my first application, a simple login form check source http://pastebin.com/8Zddr9cj
I'm looking for a way to do the following things :
Display 'nice' error message when the login/password is wrong. Can be in red to replace the 'Please enter your credentials); i don't know how to access this property.
If login success, close the form and load the application (probably another js file).
Quite simple, but i'm a newbie to this,
1) Fieldset has a method called setInstructions which you can call to update the instructions. So, you could specify an id configuration in your field set, then use that later on when you want to update the instructions.
...
items: [
{
xtype: 'fieldset',
id: 'fieldset',
title: 'Login',
instructions: 'Please enter your credentials',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'emailfield',
name : 'email',
label: 'Email',
placeHolder: 'your#email.com',
useClearIcon: true
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
}]
}
],
...
//wherever you want to update the instructions
var fieldset = Ext.getCmp('fieldset');
fieldset.setInstructions('My new instructions!');
2) Here is a simple demo of this:
//create a panel, which is full screen, and will contain your form, and another item
//which you want to show at some point
var wrapper = new Ext.Panel({
fullscreen: true,
layout: 'card',
//my two items
items: [
form,
{
xtype: 'panel',
html: 'my second panel, which is not visible on render.'
}
]
});
//change the active card/item, when you need to
wrapper.setActiveItem(1); //starts at 0
Make sure you remove fullscreen from your form, as it is no longer fullscreen (this wrapper panel is).