i can change the value of the text but am unable to change the text on the drop down of the ngx-quill
i tried both ways the ts way and the creation of a new container still doesn't fix my issue. went through the doc and still was unable to find a suitable solution to this problem.As the doc doesnt define how to change the labels
html
<div id="toolBarConfig"></div>
ts
const sizeVal = Quill.import('attributors/style/size');
sizeVal.whitelist = ['14px', '16px', '72px'];
Quill.register(sizeVal, true);
const quill = new Quill('#toolBarConfig', {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: 'sub' }, { script: 'super' }], // superscript/subscript
[{ indent: '-1' }, { indent: '+1' }], // outdent/indent
[{ direction: 'rtl' }], // text direction
[{ size: ['14px', '16px', '72px'] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
['clean'],
['table'], // remove formatting button
['link', 'image', 'video'], //
link and image, video
],
},
theme: 'snow',
});
SCSS
.ql-snow .ql-picker.ql-size span[data-label="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-
value="14px"]::before {
content: '14px'!important;
font-size: 14px !important;
}
.ql-snow .ql-picker.ql-size span[data-label="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-
value="16px"]::before {
content: '16px'!important;
font-size: 16px !important;
}
.ql-snow .ql-picker.ql-size span[data-label="72px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-
value="72px"]::before {
content: '72px'!important;
font-size: 72px !important;
}
How to add font types on Quill js with toolbar options?
follow this stackoverflow thread.. the end result
Related
I want to add the following function to the toolbar of react quill.
num 1 ~ 20 text size custom button
More than 15 types of font styles
Any good way?
current:
const modules = {
toolbar: [
// [{ font: [] }],
[{ size: ['14px', '16px', '18px'] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ script: "sub" }, { script: "super" }],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }],
[{ indent: "-1" }, { indent: "+1" }, { align: [] }],
["link", "image", "video"],
["clean"],
]
};
I am using react-quill for mentioning users however I am not able to style mention list ,actually when I mention user, long list of user gets displayed on the screen which needs scrollbar to make it more presentable.how to achieve scrollbar in mention list in React-quill?
here is the code for better understanding.
<div>
<ReactQuill
onChange={handleChange}
value={editorHtml}
modules={modules}
formats={formats}
bounds={".app"}
placeholder={props.placeholder}
/>
</div>
);
}
const modules = {
toolbar: [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline"],
[{ color: [] }, { background: [] }],
// [{ script: 'sub' }, { script: 'super' }],
[{ align: [] }],
["link", "blockquote", "emoji"],
["clean"],
],
clipboard: {
// toggle to add extra line breaks when pasting HTML:
matchVisual: false,
},
mention,
"emoji-toolbar": true,
"emoji-textarea": false,
"emoji-shortname": true,
};
const formats = [
"header",
"font",
"size",
"bold",
"italic",
"underline",
"strike",
"blockquote",
"list",
"bullet",
"indent",
"link",
"mention",
"emoji",
];
This worked for me
.ql-mention-list-container {
max-height: 200px;
}
We have added the ng-quill component to our web app build with angularjs. With the code below my developer tried to customize font family and font size picker in the toolbar. It is functional so far but the selected value of the dropdown options is not displayed after selection. "Sans serif" and "normal" keep to be displayed.
Here the code:
(function () {
'use strict';
angular
.module('tu.richtext.editor', ['ngQuill'])
.constant('NG_QUILL_CONFIG', {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block', 'link'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': [false, '14px', '16px', '18px', '20px'] }],
[{ 'header': [1, 2, 3, 4, 5, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': ['sans-serif', 'times-new-roman', 'roboto', 'lato', 'oswald', 'montserrat', 'raleway', 'lora', 'nunito', 'prompt'] }],
[{ 'align': [] }],
['clean'],
['link', 'image', 'video']
]
},
theme: 'snow',
placeholder: '',
readonly: false,
bounds: document.body
})
.config(function(ngQuillConfigProvider, NG_QUILL_CONFIG) {
ngQuillConfigProvider.set(NG_QUILL_CONFIG);
// ngQuillConfigProvider.set(null, null, 'custom placeholder');
})
.component('tuRichtextEditor', {
bindings: {
ngModel: '=',
required: '<',
format: '<'
},
controller: RichtextEditorCtrl,
controllerAs: '$ctrl',
templateUrl: 'app-commons/components/tu-richtext-editor/tuRichText.tpl.html'
});
function RichtextEditorCtrl($scope, $timeout, $sce) {
var ctrl = this;
ctrl.loadComplete = false;
ctrl.customOptions = [{
import: 'attributors/style/size',
whitelist: [false, '14px', '16px', '18px', '20px']
}, {
import: 'attributors/class/font',
whitelist: ['sans-serif', 'times-new-roman', 'roboto', 'lato', 'oswald', 'montserrat', 'raleway', 'lora', 'nunito', 'prompt']
}];
$scope.customModules = {
toolbar: [
[{'size': [false, '14', '16', '18', '20']}]
]
};
ctrl.$onInit = function () {
// console.log(Quill);
// console.log(ctrl.ngModel);
ctrl.readOnly = false;
ctrl.required = ctrl.required? 'required' : '';
registerDelegates();
};
function registerDelegates() {
ctrl.editorCreated = function (editor) {
console.log(editor);
console.log(editor.editor);
};
ctrl.contentChanged = function (editor, html, text, content, delta, oldDelta, source) {
ctrl.ngModel = html;
};
ctrl.selectionChanged = function (editor, range, oldRange, source) {
console.log('editor: ', editor, 'range: ', range, 'oldRange:', oldRange, 'source:', source);
};
ctrl.loadComplete = true;
}
}})();
The css classes are changed too regarding to these examples:
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {content: '14'; font-size: 14px !important;}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto"]::before {content: 'Roboto'; font-family: 'Roboto', sans-serif !important; }
He had given up now and I have not been able to find the bug.
Quill has an example for how to use custom fonts:
https://quilljs.com/playground/#custom-fonts
You can add custom sizes the same way.
I am trying to create a graph using ChartJS2 in one of our application; where we are using AngularJS 1.x along with RequireJS. So for that we have used ChartJs 2.7.0
When I try to implement our requirement, I'm facing an abnormal issue where
When I define x axes type as linear then the annotation(vertical line) doesn't get displayed on the graph, as displayed in the attached image: when type: 'linear'
And When I comment the line axes(X) type as linear then only annotation(vertical line) gets displayed but the graph doesn't get displayed at all as shown in the attached image: when commented the line type: 'linear'
My HTML Code is as follows:
<canvas style='height: 350px; width: 400px;' id="line" class="chart chart-line" chart-data="ourFixData.data"
chart-labels="ourFixData.labels" chart-series="ourFixData.series" chart-options="ourFixData.options" chart-colors="ourFixData.colors"
chart-dataset-override="ourFixData.datasetOverride"></canvas>
And my controller code is as follows:
'use strict';
define(['app'], function (app) {
app.register.controller("demoCtrl", function ($scope) {
$scope.data = [];
$scope.ourFixData = {};
$scope.ourFixData.lineAtPoint = 2.20;
$scope.ourFixData.colors = ['#399c5f', '#399c5f', '#399c5f'];
$scope.ourFixData.labels = [0, 0.5, 1.5, 2.5, 5, 7.5, 12.5, 17.5, 27.5];
$scope.ourFixData.series = ['Invites Available'];
var dashArr = [,,,,4,5,6,7,8];
var mainArr = [0,1,2,3,4,,,,];
$scope.ourFixData.data = [
dashArr,
mainArr
];
$scope.ourFixData.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.ourFixData.datasetOverride = [
{
data: dashArr,
borderColor: '#399c5f',
borderDash: [2,4],
borderWidth: 2,
pointBackgroundColor : '#399c5f',
fill: false
}, {
data: mainArr,
borderColor: '#399c5f',
borderWidth: 2,
pointBackgroundColor : '#399c5f',
fill: false
}
];
$scope.ourFixData.options = {
title: {
fontFamily: "Open Sans",
text: "Invite Graph"
},
scales: {
xAxes: [
{
id: 'x-axis-0',
display: true,
// ***** This is where I'm facing issues
type: 'linear', // When commented annotation doesn't get displayed
position: 'bottom',
scaleLabel: {
fontFamily: "Open Sans",
display: true,
labelString: 'Turn-Over in Lakh Rupees'
}
}
],
yAxes: [
{
id: 'y-axis-0',
display: true,
position: 'left',
scaleLabel: {
fontFamily: "Open Sans",
display: true,
labelString: 'Invites Available'
}
}
]
},
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [
{
type: 'line',
id: 'hline',
mode: 'vertical',
scaleID: 'x-axis-0',
value: $scope.ourFixData.lineAtPoint, // data-value at which the line is drawn
borderWidth: 1,
borderColor: 'blue',
borderDash: [4,5],
display: true,
title: "Current",
enabled: true,
label: {
fontFamily: "Open Sans",
backgroundColor: "blue",
content: $scope.ourFixData.lineAtPoint + " Lacks",
enabled: true,
position: 'top'
}
}
]
}
};
});
});
Any kind of help would be appreciated. Thanks in advance.
How to have two trees on the same page with diff icons:
.k-treeview .k-minus {
background: url('../images/k-minus.png') center center;
}
.k-treeview .k-plus {
background: url('../images/k-plus.png') center center;
}
Any help would be great.
This question is a little bit unspecified but I'll try to help you.First off all, to display images in treeView you have to options:
Sprites - you provide css class for all images you wanna display. All can be in same image file like here: http://demos.kendoui.com/content/web/treeview/coloricons-sprite.png
Images - you provide url for each image in single file: http://demos.kendoui.com/content/web/treeview/mail.png
Assuming you got two treeViews in you site with diferrent names like TreeView1 and TreeView2. If this treeViews are similar but just need to have different icons, better solution is sprites option, the simplest way is to prepare 2 different images and provide css to display it, like:
#TreeView1 .k-sprite {
background-image: url("../../content/web/treeview/coloricons-sprite.png");
}
#TreeView2 .k-sprite {
background-image: url("../../content/web/treeview/different-sprite.png");
}
.rootfolder { background-position: 0 0; }
.folder { background-position: 0 -16px; }
.pdf { background-position: 0 -32px; }
.html { background-position: 0 -48px; }
.image { background-position: 0 -64px; }
Now you can have 2 identical but name treeViews with different icons, eg:
$("#TreeView1").kendoTreeView({
dataSource: [{
text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ text: "about.html", spriteCssClass: "html" },
{ text: "index.html", spriteCssClass: "html" },
{ text: "logo.png", spriteCssClass: "image" }
]
},
]
}]
});
Of course if you prefer images options you just have to describe different url for image in each treeView dataSourve for all items, like that:
$("#TreeView1").kendoTreeView({
dataSource: [
{
text: "Inbox", imageUrl: "../../content/web/treeview/mail.png",
items: [
{ text: "Read Mail", imageUrl: "../../content/web/treeview/readmail.png" }
]
},
{
text: "Drafts", imageUrl: "../../content/web/treeview/edit.png"
},
]
});
$("#TreeView2").kendoTreeView({
dataSource: [
{
text: "Inbox", imageUrl: "../../content/web/treeview/pdf.png",
items: [
{ text: "Read Mail", imageUrl: "../../content/web/treeview/jpg.png" }
]
},
{
text: "Drafts", imageUrl: "../../content/web/treeview/html.png"
},
]
});
I based on this kendoUI demo: http://demos.telerik.com/kendo-ui/treeview/images. I hope it helps.