I have added the advanced tool bar and in the toolbar groups
added {name:'styles'}
When i add the styles by default it adds two buttons Styles and Format
How do i remove some of the items from Styles ?
For eg : Styles currently has block styles like 'Italic title', 'Subtitle', etc and Inline styles like 'Marker', 'Big', 'Typewriter' etc
I want to retain the styles but want to delete just couple of elements from the dropdown eg : 'Marker' , 'Subtitle'
Thanks
This link has a similar question.
Edit:
This code block is the extract of what you need to add before initialing CKEditor.
CKEDITOR.addStylesSet( 'mystyleslist',
[
/* Inline Styles */
{ name : 'readMore', element : 'span', attributes : { 'class' : 'readMore' } },
{ name : 'BoldItal' , element : 'span', styles:
{
'font-weight' : 'bold',
'font-style' : 'italic'
}
},
/* Object Styles */
{name : 'Image on Left', element : 'img',
attributes :
{
'style' : 'padding: 5px; margin-right: 5px',
'border' : '2',
'align' : 'left'
}
},
{name : 'Image on Right', element : 'img',
attributes :
{
'style' : 'padding: 5px; margin-left: 5px',
'border' : '2',
'align' : 'right'
}
}
]);
CKEDITOR.config.stylesCombo_stylesSet = 'mystyleslist';
I hope this helps
Related
I'm trying to place text to the left of my sweetalert box. How can i do it please?
Picture in attache, i would like to place text bordered to the left.
Actual view
My script:
Swal.fire({
title:'<strong>Info produit : '+data.id+'</strong>',
type: 'info',
html: '<b>Designation : </b>'+data.designation+'<br><b>Unite : </b>'+data.unite+'<br><b>Prix : </b>'+data.prix+'<br><b>Categorie : </b>'+data.categorie+'<br><b>Sous Categorie : </b>'+data.sous_categorie+'<br><b>Fournisseur : </b>'+data.fournisseur+'<br><b>Statut : </b>'+data.statut,
showCancelButton: false,
})
Swal.fire({
html: '<div class="align-left">text aligned left</div>',
})
.align-left {
text-align: left;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
I have a page where I use CKEditor 5 with CKFinder 3.
By default, the images that are included in the textarea are responsive and can only be aligned as full or right.
The concerning page has photos of contacts on it and they shouldn't be that big.
How can I configure the width of an image that is inserted through the button of the toolbar?
ClassicEditor
.create( document.querySelector( '#pageTextArea' ), {
image: {
styles: [ { name: 'contact', icon: 'right', title: 'My contact style', className: 'my-contact-side-image' } ]
}
ckfinder: {
uploadUrl: 'example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
}
})
.catch( error => {
console.error( error );
process.exit(1);
});
To provide some custom image styling you need to:
First, configure the image.styles option.
ClassicEditor.create( element, {
// ...
image: {
// ...
styles: [
// Pottentially some other style can go here. E.g. the `full` or `side`.
{ name: 'contact', icon: 'right', title: 'My contact style', className: 'my-contact-side-image' }
]
}
}
And secondly, make the image 100px wide via CSS:
.ck-content figure.image.my-contact-side-image {
float: right;
width: 100px;
}
Note that you need to handle styles of the created content outside of the editor as well.
Is it possible to have multiple options in the Style menu that set their own CSS class, but are not mutually exclusive?
For example, I want to have something similar to this:
stylesSet: [
{name: 'Very Large Padding',
element: 'p',
attributes: {
class: 'very-large-padding',
}},
{name: 'Alternative Font',
element: 'p',
attributes: {
class: 'alternative-font',
}},
]
In CSS then, something like:
.very-large-padding { padding: 4242px; }
.alternative-font { font-family: "MyFont", sans-serif; }
This works, but the problem is that I cannot have both "Very Large Padding" and "Alternative Font" activated at the same time. Is there a solution to this, that involves setting styles via CSS instead of inline style attribute?
Block styles in CKEditor 4 cannot be combined. However, you can use inline elements (i.e. span):
{
name: 'Very Large Padding',
element: 'span',
attributes: {
class: 'very-large-padding',
}
},
{
name: 'Alternative Font',
element: 'span',
attributes: {
class: 'alternative-font',
}
},
which results in:
<p><span class="alternative-font">Fo<span class="very-large-padding">oB</span>ar</span></p>
or create a hybrid style:
{
name: 'Very Large Padding with Alternative Font',
element: 'span',
attributes: {
class: 'very-large-padding alternative-font',
}
},
I'm testing adding custom stylesSet. So in my code i add the following (per instructions in)
CKEDITOR.stylesSet.add('custom_style', [
{ name: 'No UL Bullets', element: 'ul', styles: { 'list-style-type': 'none' } },
{ name: 'My Custom Inline', element: 'span', attributes: { 'class': 'mine' } }
]);
oEditor.config.stylesSet = 'custom_style';
The problem is that it overrides the rest of the default styles that comes with CKEditor. I cant seem to figure out how to just append my new styles with the existing once. Any ideas?
You don't need to change config.stylesSet option to append your styles to default ones. You can edit the styles.js file, adding and removing styles from it. It is a configuration file just like config.js.
Update: You can set config.stylesSet directly to avoid loading styles.js:
CKEDITOR.replace( 'editor1', {
stylesSet: [
{ name: 'Big', element: 'big' },
{ name: 'Small', element: 'small' },
{ name: 'Typewriter', element: 'tt' }
]
} );
Here is an example how to replace and create new styles and classes in CKEditor 4. This is the whole content of the file styles.js:
CKEDITOR.stylesSet.add ('default', [
/* My Block Styles */
{ name: 'My Div Class', element: 'div', attributes: {'class': 'my-div-class-name'} },
{ name: 'My Div Style', element: 'div', styles: {'padding': '10px 20px', 'background': '#f2f2f2', 'border': '1px solid #ccc'} },
/* My Inline Styles */
{ name: 'My Span Class', element: 'span', attributes: {'class': 'my-span-class-name'} },
{ name: 'My Span Style', element: 'span', styles: {'font-weight': 'bold', 'font-style': 'italic'} }
]);
Edit bar:
I am use jqGrid. I want to add record inline navigation
so this link http://www.trirand.com/blog/jqgrid/jqgrid.html?
when i click in ADD new row icon in navbar. Grid is like view modal view.
<div id="pager"></div>
<table id="ward"></table>
<br />
<script src="js/rowedex3.js" type="text/javascript"> </script>
<script type="text/javascript">
jQuery("#ward").jqGrid({
mtype : 'GET',
url : "listAllWards.html",
datatype : "json",
colNames : [ 'Id', 'Ward Type', 'Description'],
colModel : [ {
name : 'id',
index : 'id',
editable:true,
width : 50
}, {
name : 'name',
index : 'name',
width : 150,
editable:true,
}, {
name : 'decsription',
index : 'decsription',
width : 100,
editable:true,
}],
rowNum : 5,
rowList : [ 5, 10, 30 ],
pager : '#pager',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
caption : "Ward's List",
width : 940,
cellEdit : true,
editurl: "server.html",
});
jQuery("#ward").jqGrid('navGrid', '#pager', {
edit : false,
del : false,
search :false,
});
</script>
If you want to use inline editing for add the row you should use add: false option of navGrid (together with edit: false which you already use) and you should include call of inlineNav after calling of navGrid. You can choose the buttons added by inlineNav by the usage of corresponding options of inlineNav described in the documentation.
UPDATED: You have to remove cellEdit : true option from jqGrid because the usage of both cell editing and inline editing is not supported.
Additionally you have to rename id column to any other name if you need to edit the grid. See the second part on the answer for additional details.
I recommend you to place the whole JavaScript code inside of $(function(){...}); and move it inside of <head>.
You should verify that you use current (now 4.4.1) version of jqGrid.