Tinymce button arangement - wordpress

The following is my code for my TinyMCE text area but I would like to edit the buttons shown into neat sections. I found some nicely formatted code below. Any ideas how I can duplicate the formatting (button grouping and rows) as the below code.
My code
<?php $content = ''; $editor_id = 'txtArea'; wp_editor( $content, $editor_id, $settings = array(
'editor_class'=>'ckeditor',
'media_buttons'=>false,
'quicktags'=>false,
'tinymce' => array(
'theme_advanced_buttons1' => ,
'theme_advanced_buttons2' => ,
'theme_advanced_buttons3' => ,
'theme_advanced_buttons4' => ,
The Formatted code I found
{ name: 'format', items : [ 'Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll'] },
{ name: 'tools', items : [ 'Maximize'] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'source', items : [ 'Source'] }
Thank you in advance for your help

I think I found my own answer because it seems to be working
<?php $content = ''; $editor_id = 'txtArea'; wp_editor( $content, $editor_id, $settings = array(
'editor_class'=>'ckeditor',
'media_buttons'=>false,
'quicktags'=>false,
//'tinymce' => array(
//'theme_advanced_buttons1' =>'' ,
//'theme_advanced_buttons2' =>'' ,
//'theme_advanced_buttons3' =>'' ,
//'theme_advanced_buttons4' =>'')
));?>
<script>
CKEDITOR.replace('txtArea', {toolbar:'Standard'});
CKEDITOR.editorConfig = function( config ) {
config.toolbar_Standard = [
{ name: 'format', items : [ 'Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll'] },
{ name: 'tools', items : [ 'Maximize'] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'source', items : [ 'Source'] }
];
};
</script>
It may not be the prettiest code in the world but as long as it works :)

Related

Display an Array Data Referencing a Category Array with Sanity and Next.js

I'm trying to have a Category array display on the frontend with items that reference the Category below it.
I've been able to render the category titles on the page, but not the items with references to that category by doing:
export default function Menu({data}) {
const {category} = data;
return (
<section>
{category?.length > 0 &&
category
.map((category) => (
<article key={category._id}>
{category?.title &&
<h1 className="text-3xl">{category.title}</h1>}
))}
</section>
export async function getStaticProps() {
const category = await client
.fetch(
`*[_type == "category"] {
title,
"menuItems": *[_type == "menuItem" && references(^._id)] {
title,
description,
price,
...
}
}
`);
return {
props: {
data: { category }
},
}
}
I've been trying to use .map to find and return the reference data ...
Here are the Sanity schemas I have for Category and menuItem
for Category:
export default {
name: 'category',
title: 'Category',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
],
};
for menuItem:
export default {
name: 'menuItem',
title: 'Menu Item',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
{
name: 'category',
title: 'Category',
type: 'reference',
to: [{ type: 'category' }],
},
{
name: 'price',
title: 'Price',
type: 'number',
},
{
name: 'description',
title: 'Description',
type: 'string',
},
],
};
I know I'm doing something wrong, but can't sort it out. Can anyone help?
Thank you so much

How to display custom icons on ng2-smart-table?

I can't display custom icons on the actions tab from ng2-smart-table. I have installed Eva Icons from Akevo Team and I want to use them. I have changed the edit button to show some custom icons but the problem is that nothing appears. On the left side of delete, a brush icon had to appear.
Here is an image with the problem:
Here is the code:
settings = {
edit: {
editButtonContent: '<nb-icon icon="brush"></nb-icon>',
saveButtonContent: '<nb-icon icon="checkmark"></nb-icon>',
cancelButtonContent: '<nb-icon icon="close-circle"></nb-icon>'
},
columns: {
device: {
title: 'Device',
sortDirection: 'asc'
},
type: {
title: 'Type',
sort: false,
filter: false
},
serialNumber: {
title: 'Serial Number'
},
status: {
title: 'Status'
}
}
};
Try this :
settings = {
hideSubHeader: true,
actions: {
custom: [
{
name: 'edit',
title: '<nb-icon icon="brush"></nb-icon>'
},
{
name: 'save',
title: '<nb-icon icon="checkmark"></nb-icon>'
},
{
name: 'cancel',
title: '<nb-icon icon="close-circle"></nb-icon>'
}
],
add: false,
edit: false,
delete: false
}
...
};
hope this works for you!
Also you can use other icons sets like material icons, just add it to your project and then change your settings like:
settings = {
edit: {
editButtonContent: '<span class="material-icons">mode_edit</span>',
saveButtonContent: '<span class="material-icons">check_circle</span>',
cancelButtonContent: '<span class="material-icons">cancel</span>'
},
/* ... */
}
settings = {
hideSubHeader: true,
sort: true,
actions: {
position: 'left',
add: false,
edit: false,
delete: false,
select: false,
custom: [
{
name: 'viewRecord',
type: 'html',
title: '<i class="far fa-file-alt" title="View Record"></i>',
},
{
name: 'editRecord',
type: 'html',
title: '<i class="far fa-edit" title="Edit Record"></i>',
},
],
},
columns: {
column1: {
title: 'Column 1',
type: 'string',
width: '35%',
},
column2: {
title: 'Column 2',
type: 'string',
},
column3: {
title: 'Column 3',
type: 'string',
},
},
};
I found this thread:
https://github.com/akveo/ng2-smart-table/issues/1034
And so as mentioned in the last comment:
temporarily use the old nebular-icons
https://github.com/akveo/nebular-icons/tree/master/src/icons
I downloaded the required icon's SVG and added them as:
settings = {
edit: {
editButtonContent: '<img src="assets/images/nb-edit.svg" width="40" height="40" >'
. . .
}
. . .
}
Works well enough.
let newSettings = {
mode: "external",
actions: {
add: false,
edit: false,
delete: false,
position: 'right'
},
hideSubHeader: true,
add: {
addButtonContent: '<i class="nb-plus"></i>',
},
edit: {
editButtonContent: '<img src="assets/images/icons/outline/settings-2-outline.svg" width="20" height="20" >',
},
delete: {
deleteButtonContent: '<img src="assets/images/icons/outline/trash-2-outline.svg" width="20" height="20" >',
confirmDelete: true,
},
}

CKEditor 4 - inline editing - custom styles combo

I'm running multiple instances of CKE, in its inline editing mode, to have the final user edit blocks of contents, just as these will look like in the final html rendering.
So everything edited inherits from the global CSS of my editing page.
And it's awesome.
Now I would like the style combo to display, not all the running styles, but only a part of them (color classes and basic stuff like this).
How can I achieve this?
i.e. keeping all existing css applied to whatever is edited AND only offer a few of them in the combo
Thanks for any help or starting point...
After finding the solution : a fully working code sample with multiple inline editing, custom styles, auto-save via ajax and other tuning, if it can help
CKEDITOR.disableAutoInline = true;
CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', attributes: { 'class': 'bleu' } },
{ name: 'Red Title' , element: 'h3', attributes: { 'class': 'rouge' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );
$("div[contenteditable='true']" ).each(function( index ) {
var content_id = $(this).attr('id');
var ligneidx = $(this).attr('ligneidx');
var blocidx = $(this).attr('blocidx');
CKEDITOR.inline( content_id, {
stylesSet : 'my_styles',
toolbarGroups : [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
],
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
removeButtons : 'Form,Checkbox,Radio,TextField,Textarea,Select,Button,HiddenField,ImageButton,Replace,Find,SelectAll,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,Language,BidiRtl,BidiLtr,Flash,Smiley,PageBreak,Iframe,Font,FontSize,About,NumberedList,Blockquote,CreateDiv,Underline,Subscript,Superscript,Page2images, Newpage,Templates,Strike,Indent,Outdent',
//removePlugins: 'page2images,VideoDetector',
format_tags : 'p;h1;h3',
// Simplify the dialog windows.
removeDialogTabs : 'image:advanced;link:advanced',
extraPlugins : 'sourcedialog',
colorButton_enableMore : false,
colorButton_colors : '00819c,e32434,e9632d,9c1f4d,795127,ececf0,ececec,fafafa,dddddd,939393,25242c,fff,000',
filebrowserBrowseUrl : '/modele/classes/filemanager/dialog.php?type=2&editor=ckeditor&lang=fr_FR&fldr=',
filebrowserUploadUrl : '/modele/classes/filemanager/dialog.php?type=2&editor=ckeditor&lang=fr_FR&fldr=',
filebrowserImageBrowseUrl : '/modele/classes/filemanager/dialog.php?type=1&editor=ckeditor&lang=fr_FR&fldr=',
uiColor : "#a7f0ff",
defaultLanguage : 'fr',
on: {
blur: function( event ) {
var data = event.editor.getData();
var request = jQuery.ajax({
url: "/modele/admin/ajaxupdate_bloc.php",
type: "POST",
data: {
content : data,
ligneidx : ligneidx,
blocidx : blocidx
},
});
}
}
} );
});
Try to pass your own style definitions to CKEDITOR like this
CKEDITOR.stylesSet.add()
More information and example here:
http://docs.ckeditor.com/#!/guide/dev_howtos_styles
There is also a Stylesheet Parser Plugin that can be used, info here:
http://ckeditor.com/addon/stylesheetparser

Extjs store don't fill grid lines

You can see my code about grid.
Here, Window opens but there is not any value in my grid.
Could you please help?
My php returns JSON encode blow:
{"results":3,"disPath":"","success":"true","rows":[{"id":"1","faz":"Faz1"},{"id":"2","faz":"Faz2"},{"id":"3","faz":"Faz3"}]}
Code
Ext.define('MyDesktop.GridFazlar', {
extend: 'Ext.ux.desktop.Module',
requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],
id:'grid-fazlar',
init : function(){
this.launcher = {
text: 'Fazlar',
iconCls:'icon-grid'
};
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-fazlar');
if(!win){
var fazlarGridStore = new Ext.data.JsonStore({
root: 'rows',
autoLoad: true,
totalProperty: 'results',
remoteSort: true,
proxy: new Ext.data.HttpProxy({
url: 'phps/gridPhasesLoader.php',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
}),
baseParams:{
depth: '2',
parentId: '2',
proccess: 'callGrid',
},
fields: [{
name :'id'
},{
name :'faz'
},
//{
]
});
win = desktop.createWindow({
id: 'grid-fazlar',
title:'Fazlar',
width:740,
height:480,
iconCls: 'icon-grid',
animCollapse:false,
constrainHeader:true,
layout: 'fit',
listeners:{
beforeshow: function(){
fazlarGridStore.proxy.extraParams = {
depth: '2',
parentId: '2',
proccess: 'callGrid',
};
}
},
items: [
{
border: false,
xtype: 'grid',
listeners: {
celldblclick : function() {
alert('Deneme');
},
},
contextMenu: new Ext.menu.Menu({
items:[
{
id:'grid-fazlar_menu_denemebutton',
text: 'DenemeButonu',
listeners: {
click: function(){
alert('sssss');
}
}
}
]
}),
store:fazlarGridStore,
columns: [
new Ext.grid.RowNumberer(),
{
text: "ID",
//flex: 1,
width: 70,
sortable: true,
dataIndex: 'id'
},{
text: "Faz",
//flex: 1,
width: 70,
sortable: true,
dataIndex: 'faz'
},
]
}
],
tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Modify options',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
});
}
return win;
},
statics: {
getDummyData: function () {
return [
['Faz1','06/06/2011','15/08/2010','19/12/2010'],
['Faz2','01/10/2010','15/11/2010','29/11/2011'],
['Faz3','16/11/2010','16/12/2010','14/02/2011'],
['Faz4','19/03/2011','20/03/2011','18/06/2011'],
['Faz5','21/03/2011','20/05/2011','18/08/2011'],
['Faz6','21/05/2011','05/07/2011','18/09/2011'],
['Faz7','06/07/2011','04/09/2011','06/12/2011'],
['Faz8','30/09/2011','30/10/2011','29/12/2011'],
];
}
}
});
Your Json has a custom root : 'rows'. You must configure your datareader to take this into account:
proxy: {
type: 'ajax',
url: 'phps/gridPhasesLoader.php',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
reader: {
type: 'json',
root: 'rows'
}
},

Kendo UI Grid Frozen Column

kendo ui grid is not supporting frozen columns. it would be appreciate if someone could help for customized script for kendo grid frozen columns. any suggestions?
columns: [ ]
Kendo UI Grid will support frozen columns in the next official release - Q1 2014. Until then the best suggestion I can give you is to use two grids bound to the same data source.
var dataSource = new kendo.data.DataSource({
/* snip */
});
$("#frozen").kendoGrid({
dataSource: dataSource,
columns: [
"OrderID"
],
height: 200,
sortable: true
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 200,
columns: [
{ field: "Freight", width: 100 },
{ field: "ShipName", width: 200 },
{ field: "OrderDate", width: 200, format: "{0:d}" },
{ field: "ShipCity", width: 200 }
],
sortable: true
});
This and some CSS magic would simulate the frozen column appearance: http://jsbin.com/uCEQOCi/1/edit
There is a caveat though. Only popup editing mode will work in this scenario.
i think with the new Version, also in 2020.1.219, is there a locked Attribute.
Lock in: Example - locked columns
<div id="grid"></div>
JS:
<script>
$("#grid").kendoGrid({
columns: [
{ locked: true, field: "id", width:200 },
{ field: "name", width:800 }
],
dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>
Below code you may get the idea about frozen column
<div id="kendogrid" data-bind="kendoGrid: { data: SearchResults, schema: { model: { fields: { DateOfBirthSortable: { type: 'date' }}}}, pageable:{pageSize: 15} ,selectable:'row',reorderable: true, navigatable:true, sortable: true,resizable: true,filterable: true,groupable: true,columnMenu: true,navigatable: true,
columns: [ { field: 'UniqueID', title : 'Id' , width:50,locked: true,lockable:false,event:{change:DoSearch}},
{ field: 'Salutation', title : '#',width:80,locked: true, template:'<span> #if(Salutation != null) {# <span> #= Salutation #</span> # } #</span>' },
{ field: 'FirstName', title : 'First Name', width:150,locked: true, },
{ field: 'LastName', title : 'Last Name',width:150,locked: true, template:'<span> #if(LastName != null) {# <span> #= LastName #</span> # } #</span>' },
{ field: 'Mobile', title : 'Mobile' ,width:100, template:'<span>#if(Mobile != null) {# <span>#=Mobile #</span> #}# </span>' },
{ field: 'Phone', title : 'Phone',width:100, template:'<span>#if(Phone != null){#<span>#= Phone#</span> #}# </span>' },
{ field: 'Email', title : 'Email',width:200, template:'<span>#if(Email != null){#<span>#= Email#</span> #}# </span>' },
{ field: 'DateOfBirthSortable', title : 'DOB',width:100,format: '{0: MM/dd/yyyy }',filterable:{ui: 'datepicker'} ,template:'<span> #if(DateOfBirth != null) {# <span> #= DateOfBirth #</span> # } #</span>' },
{ field: 'AddressLine1', title : 'AddressLine1', width:150, template: '<span >#if(AddressLine1 != null){#<span>#=AddressLine1 #</span> #} # </span>' },
{ field: 'AddressLine2', title : 'AddressLine2', width:150, template: '<span > #if(AddressLine2 != null){# <span>#=AddressLine2 # </span> #} # </span>' },
{ field: 'City', title : 'City', width:100, template: '<span >#if(City != null){#<span>#=City #</span> #} # </span>' },
{ field: 'State', title : 'State', width:100, template: '<span >#if(State != null){#<span>#=State #</span> #} #</span>' },
{ field: 'Country', title : 'Country', width:100, template: '<span >#if(Country != null){#<span>#=Country #</span> #} #</span>' },
{ field: 'Zip', title : 'Zip', width:100, template: '<span >#if(Zip != null){#<span>#=Zip #</span> #} #</span>' }
],change: onChange}">
</div>
you must include "columnMenu: true and scrollable:true" and then u must define the width for every column .

Resources