I'm using summernote and sometimes I need fonts with higher value than is available in font-size list. This is my current code:
$('#summernote').summernote({
toolbar: [
['style', ['style']],
['fontsize', ['fontsize']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['insert', ['picture', 'hr']],
['table', ['table']]
],
height: 585,
focus: false
});
I tried to put into toolbar fontsizes (numbers like 10,20,25,30) but it doesn't help. Is there a way how can I set my own custom fontsize list?
To set custom fontsize list, add this to your options: ) options:
$('#summernote').summernote({
fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36', '48' , '64', '82', '150']
});
Related
I am trying to figure out how to display custom HTML objects created by users. For example, the user can create custom styled button(s) with the following properties: color, font-size, and border-radius. Here is an example of my json:
[
{
id: 2,
configs: {
color: "#000000",
font_size: 10,
border_radius: 0,
display: true,
button_1: [
{
color: "red",
font_size: 12,
border_radius: 4,
display: true,
}
],
},
created_at: "2020-05-07T21:42:04.808Z",
updated_at: "2020-05-07T21:42:04.808Z",
},
{
id: 3,
configs: {
color: "#000000",
font_size: 10,
border_radius: 0,
display: true,
button_1: [
{
color: "blue",
font_size: 15,
border_radius: 24,
}
],
button_2: [
{
color: "pink",
border_radius: 2,
}
],
},
created_at: "2020-05-07T22:29:31.255Z",
updated_at: "2020-05-07T22:29:31.255Z",
},
]
I want to display all buttons according to the user's style settings. Tried something like:
%p #{btn.id}: #{btn[:configs][:button_1][0][:color][:font_size]}
But it doesn't look practical. Besides, in certain cases it can lead to the error:
undefined method `[]' for nil:NilClass
I've tried to use gem like activerecord-typedstore but it seems like it doesn't support nested attributes (Is there a way to master a nested json with a json column?). Is there any way to display custom button(s) based on the user's criteria?
In Ruby "configs" and :configs are not equivalent. You must use the type employed in the structure.
To navigate complex JSON structures use dig:
btn.dig('configs', 'button_1', 0, 'color', 'font_size')
You can also symbolize the keys if you want using symbolize_keys:
btn.symbolize_keys!
If you prefer symbols and you're reading in the JSON manually you can always request it with symbol keys out of the gate using the symbolize_names option to JSON.parse:
JSON.parse('{"test": true}')
# => {"test"=>true}
JSON.parse('{"test": true}', symbolize_names: true)
# => {:test=>true}
Summernote give options to custom toolbar like
$('#summernote').summernote({
toolbar: [
// [groupName, [list of button]]
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']]
]
});
& than for setting h1, h2 etc
$(".summernote").summernote({
styleTags: ['h1', 'h2']
});
But how to use the both in single method like ?
$('#summernote').summernote({
styleTags: ['h1', 'h2'],
toolbar: [
// [groupName, [list of button]]
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']]
]
});
I have tried multipe variations but not working
You should add 'style' button to your btns group.
Try code below.
$('#summernote').summernote({
toolbar: [
['style', ['bold', 'italic', 'underline']],
['para', ['ul', 'ol', 'paragraph', 'style']],
],
styleTags: ['p', 'h4'],
});
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph', 'style']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'hr']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
],
styleTags: ['p','pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
How do you place a Tooltip in QuillJS? I'm having trouble getting the tooltip to be placed at the specified bounds:
const Tooltip = Quill.import('ui/tooltip')
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
quill.setText('Hello\nWorld!');
let myBounds = quill.getBounds(2, 1);
let myTooltip = new Tooltip(quill, myBounds);
myTooltip.show();
The tooltip shows up outside the editor. I can't find specific API documentation on creating a tooltip.
I realized I needed to utilize the position method inside Tooltip. Pass in a reference object, such as one from getBounds, and the tooltip will appear at the bounds:
const Tooltip = Quill.import('ui/tooltip');
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
quill.setText('Hello\nWorld!');
let myBounds = quill.getBounds(10, 0);
let myTooltip = new Tooltip(quill);
document.querySelector("#editor-container").addEventListener("mouseover", ()=>{
myTooltip.show();
myTooltip.position(myBounds);
})
I have jqxgrid.I am very new to jqxgrid.I want to display total of recordes or values in column.
Can any tell me how to do
enter image description here
jqxgrid have feature to show aggregates for some column, that aggregates could be 'SUM', 'COUNT', or 'AVERAGE'
you can set the aggregates types when u set the column setting in jqxgrid declaration.
for simple example is like this :
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 850,
source: dataAdapter,
showstatusbar: true,
statusbarheight: 50,
showaggregates: true,
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 },
{ text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
{ text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }
]
});
for custom aggregates, u can learn from this link
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/aggregates.htm?arctic
for complete documentation for aggregates please check the API's documentation from their documentation.
hope this helps
I have problem while rendering expanded column text while using jQuery jqgrid's treegrid type. Here's my treegrid definition and the response from server, I'll be happy if someone can help me?
Thanks in advance.
Javascript
menuGrid.jqGrid({
url:'kullanici/loadMenu.ajax',
//enable TreeGrid
treeGrid: true,
//set TreeGrid model
treeGridModel: 'adjacency', //'nested', //'adjacency',
//set expand column
ExpandColumn: 'Text',
width: 550,
datatype: 'json',
viewrecords: true,
loadonce: true,
colNames: ['ID', 'Text'],
colModel: [
{ name: 'id', index: 'id', width: 20, align: 'left', editable: false, key: true, sorttype:'int', hidden: false },
{ name: 'Text', index: 'menuName', width: 120, sortable: true, align: 'left' }
],
jsonReader: {
repeatitems : false,
id: 'id'
},
sortname: 'id',
sortorder: 'asc',
height: 200,
sortable: true,
enabletooltips: true,
caption: 'Menü Ağacı'
});
menuGrid.jqGrid('navGrid','#paddtree');
The JSON response from server
{"rows":[{"expanded":true,"id":1,"isLeaf":false,"level":0,"loaded":true,"text":"Kullanici Islemleri"},{"expanded":false,"id":2,"isLeaf":true,"level":1,"loaded":true,"parent":1,"text":"Kullanici Ekle"},{"expanded":false,"id":3,"isLeaf":true,"level":1,"loaded":true,"parent":1,"text":"Kullanici Duzenle"},{"expanded":false,"id":4,"isLeaf":true,"level":1,"loaded":true,"parent":1,"text":"Kullanici Sil"},{"expanded":true,"id":5,"isLeaf":false,"level":0,"loaded":true,"text":"Fatura ??lemleri"},{"expanded":false,"id":6,"isLeaf":true,"level":1,"loaded":true,"parent":5,"text":"Fatura Goruntule"}],"records":6,"success":true}
Your Json response must be as follows :
{"rows":[
{
"id":1,
"text":"Kullanici Islemleri"
"level":0,
"isLeaf":false,
"parent" : "null" //If the row is at 0-lvl
"expanded":true,
"loaded":true,
},
],"records":6,"success":true}
You have to respect the order of the grid cols.
First, your data cols, then, level,isLeaf, parent,expanded. I'm not sure about the loaded field, try with and without.
OK,I have found the solution, colNames, colModel and ExpandColumn configs should match(case-sensitive). As I said above the order of config isn't important.