Single instance of full CKEditor v4 is shown with two toolbars - ckeditor4.x

I have created a page with full build CKEditor v4. I have one instance on page, but it has two toll bars??? It is classic instance (no in-line) and 1 (custom toolbar) in a static on page, but second toolbar showing only when i focused on text, I put an attachments of a screenshot bottom and my build-config.js and config on page. Have any ideas why?
build-config.js:
var CKBUILDER_CONFIG = {
skin: 'moono-lisa',
preset: 'full',
ignore: [
'.DS_Store',
'.bender',
'.editorconfig',
'.gitattributes',
'.gitignore',
'.idea',
'.jscsrc',
'.jshintignore',
'.jshintrc',
'.mailmap',
'.npm',
'.travis.yml',
'bender-err.log',
'bender-out.log',
'bender.ci.js',
'bender.js',
'dev',
'gruntfile.js',
'less',
'node_modules',
'package.json',
'tests'
],
plugins : {
'a11yhelp' : 1,
'about' : 1,
'allowsave' : 1,
'base64image' : 1,
'basicstyles' : 1,
'bidi' : 1,
'blockquote' : 1,
'colorbutton' : 1,
'colordialog' : 1,
'contextmenu' : 1,
'dialogadvtab' : 1,
'divarea' : 1,
'enterkey' : 1,
'entities' : 1,
'filebrowser' : 1,
'find' : 1,
'floatingspace' : 1,
'font' : 1,
'format' : 1,
'forms' : 1,
'horizontalrule' : 1,
'htmlwriter' : 1,
'indentblock' : 1,
'indentlist' : 1,
'justify' : 1,
'link' : 1,
'list' : 1,
'liststyle' : 1,
'lite' : 1,
'loremipsum' : 1,
'magicline' : 1,
'maximize' : 1,
'pagebreak' : 1,
'pastefromword' : 1,
'pastetext' : 1,
'removeformat' : 1,
'resize' : 1,
'selectall' : 1,
'showborders' : 1,
'showprotected' : 1,
'specialchar' : 1,
'stylescombo' : 1,
'tab' : 1,
'tableresize' : 1,
'tableresizerowandcolumn' : 1,
'tableselection' : 1,
'tabletools' : 1,
'texzilla' : 1,
'undo' : 1,
'uploadimage' : 1,
'wordcount' : 1,
'zoom' : 1
},
languages : {
'en' : 1
}
};
config on page:
CKEDITOR.replace(editorId, {
on: {
instanceReady: function (ev) {
console.log('CKE4 Editor Was Initialized', editorId);
var writer = ev.editor.dataProcessor.writer;
writer.indentationChars = ' ';
var dtd = CKEDITOR.dtd;
for (var e in CKEDITOR.tools.extend({}, dtd.$block, dtd.$listItem, dtd.$tableContent)) {
ev.editor.dataProcessor.writer.setRules(e, {
indent: false,
breakBeforeOpen: false,
breakAfterOpen: false,
breakBeforeClose: false,
breakAfterClose: false
});
}
for (var e in CKEDITOR.tools.extend({}, dtd.$list, dtd.$listItem, dtd.$tableContent)) {
ev.editor.dataProcessor.writer.setRules(e, {
indent: true,
});
}
ev.editor.dataProcessor.writer.setRules('table',
{
indent: true
});
ev.editor.dataProcessor.writer.setRules('form',
{
indent: true
});
}
,
fileUploadResponse: function (evt) {
// Prevent the default response handler.
evt.stop();
// Get XHR and response.
var data = evt.data,
xhr = data.fileLoader.xhr,
response = xhr.responseText.split('|');
var json = JSON.parse(evt.data.fileLoader.xhr.responseText);
if (json.message != undefined) {
// An error occurred during upload.
data.message = json.message;
evt.cancel();
} else {
data.url = json.url;//response[0];
}
//var url = JSON.parse(evt.data.fileLoader.xhr.responseText).url;
CKEDITOR.instances[editorId].insertHtml('<img alt="' + json.fileName + '" data-cke-saved-src="' + json.url + '" src="' + json.url + '">');
}
},
filebrowserImageUploadUrl: ImageUploadUrl,
filebrowserUploadMethod: 'form',
toolbarLocation: 'top',
disableNativeSpellChecker: true,
title: false,
allowedContent: true,
pasteFromWordCleanupFile: WordCleanupFile,
baseFloatZIndex: 15000,
height: 500,
wight: 1500,
wordcount: {
showCharCount: true,
showWordCount: true,
countSpacesAsChars: true,
countHTML: true,
countLineBreaks: true,
wordLimit: 'unlimited'
}
,
toolbar: [
{ name: 'tools', items: ['Maximize'] },
{ name: 'document', items: ['Preview', 'Print'] },
//{ name: 'clipboard', items: [ 'Paste', 'PasteText', 'PasteFromWord' ] },
{ name: 'clipboard', items: ['Cut', 'Copy', '-', 'Undo', 'Redo'] },
{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'] },
{ name: 'basicstyles', items: ['RemoveFormat'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
{ name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
{ name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'bidiltr', 'bidirtl'] },
{ name: 'insert', items: ['base64image', 'Image', 'Table'] },
{ name: 'uploadimage', items: ['uploadimage'] },
{ name: 'insert', items: ['HorizontalRule', 'PageBreak', 'IPCom'] },
{ name: 'texzilla', items: ['texzilla'] },
{ name: 'editing', items: ['SelectAll', '-', 'Scayt'] },
{ name: 'zoom', items: ['Zoom'] },
{ name: 'editing', items: ['Find', 'Replace', ] },
{ name: 'tools', items: ['ShowBlocks'] },
{ name: 'lite', items: ['lite-acceptall', 'lite-rejectall', 'lite-acceptone', 'lite-rejectone'] }
]
});
This is how it currently looks like:

Related

create slider animation with multiple traces in plotly js

I want to make create a slider animation with multiple traces in plotly js like the image below but it shows only trace 1.
when I click on the play button it only shows the first trace lines without any warning or error in the console.
I used version plotly-2-12.1.
enter image description here
let myArr = new Array(35).fill(0).map((d, i) => i + 1);
`Plotly.plot("graph", {
trace1: {
x: myArr,
y: [0, -5, 2, 5, 15, 1, 2, 5, 15, , 20, 5, 17],
type: "scatter",
id: myArr,
mode: "lines+markers",
text: "Asas",
name: "rex",
marker: {
color: "rgb(128, 0, 128)",
size: 8,
},
line: { simplify: false },
transforms: [
{
type: "filter",
operation: "<=",
target: myArr,
value: 0.0,
},
],
},
trace2: {
x: myArr,
y: [0, 10, 20, 5, 17, 80, 3, , 20, 5, 17],
text: "Asas",
name: "rex",
type: "scatter",
id: myArr,
mode: "lines+markers",
text: "as",
marker: {
color: "rgb(0, 0, 128)",
size: 8,
},
line: { simplify: false },
transforms: [
{
type: "filter",
operation: "<=",
target: myArr,
value: 0.0,
},
],
},
data: [trace1, trace2],
layout: {
xaxis: { autorange: false, range: [1, 35] },
yaxis: { autorange: false, range: [0, 100] },
updatemenus: [
{
type: "buttons",
xanchor: "left",
yanchor: "top",
direction: "right",
x: 0,
y: 0,
pad: { t: 60 },
showactive: false,
buttons: [
{
label: "Play",
method: "animate",
args: [
null,
{
transition: { duration: 500 },
frame: { duration: 500, redraw: false },
mode: "immediate",
fromcurrent: true,
},
],
},
{
label: "Pause",
method: "animate",
args: [
[null],
{
transition: { duration: 500 },
frame: { duration: 500, redraw: false },
mode: "immediate",
},
],
},
],
},
],
sliders: [
{
currentvalue: {
prefix: "t = ",
xanchor: "right",
},
pad: { l: 130, t: 30 },
transition: {
duration: 500,
},
steps: myArr.map((t) => ({
label: t,
method: "animate",
args: [
[t],
{
transition: { duration: 500 },
frame: { duration: 500, redraw: false },
mode: "immediate",
},
],
})),
},
],
},
frames: myArr.map((t) => ({
name: t,
data: [{ "transforms[0].value": t }],
})),
});`
enter image description here

Vuetify - Don't trigger input on treeview when selection is synced

On the vuetify treeview component the #input event is triggered when the selected array is initialised, I don't want this behaviour, I need the input event to be triggered only when the user manually selects/deselects an item
<v-treeview
selectable
selected-color="red"
:value="selected"
:items="items"
#input="input"
></v-treeview>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
selected: [],
items: [
{
id: 1,
name: 'Applications :',
children: [
{ id: 2, name: 'Calendar : app' },
{ id: 3, name: 'Chrome : app' },
{ id: 4, name: 'Webstorm : app' },
],
},
{
id: 5,
name: 'Documents :',
children: [
{
id: 6,
name: 'vuetify :',
children: [
{
id: 7,
name: 'src :',
children: [
{ id: 8, name: 'index : ts' },
{ id: 9, name: 'bootstrap : ts' },
],
},
],
},
{
id: 10,
name: 'material2 :',
children: [
{
id: 11,
name: 'src :',
children: [
{ id: 12, name: 'v-btn : ts' },
{ id: 13, name: 'v-card : ts' },
{ id: 14, name: 'v-window : ts' },
],
},
],
},
],
},
{
id: 15,
name: 'Downloads :',
children: [
{ id: 16, name: 'October : pdf' },
{ id: 17, name: 'November : pdf' },
{ id: 18, name: 'Tutorial : html' },
],
},
{
id: 19,
name: 'Videos :',
children: [
{
id: 20,
name: 'Tutorials :',
children: [
{ id: 21, name: 'Basic layouts : mp4' },
{ id: 22, name: 'Advanced techniques : mp4' },
{ id: 23, name: 'All about app : dir' },
],
},
{ id: 24, name: 'Intro : mov' },
{ id: 25, name: 'Conference introduction : avi' },
],
},
],
}),
mounted() {
this.selected = [1]
},
methods: {
input() {
alert("input should not be triggered")// I don't want this to be triggered unless the user explicitly selects/deselects an item
}
}
})
Here is a codepen with the problem - https://codepen.io/amaieras/pen/yLPLyvZ?editors=1011
See that the alert is shown even if I don't trigger any selection, can I avoid this from happening?

Adding uuid to Vuetify datatable crud results in new items ending up with duplicate uuid

I have been using Vuetify CRUD example from https://vuetifyjs.com/en/components/data-tables/#crud-actions.
I want to add a a unique id for each record. I have taken their original code pen and copied it importing uuid library here. A sample of js is below.
https://codepen.io/joomkit/pen/MWExOGK?editors=1011
import * as uuid from "https://cdn.skypack.dev/uuid#8.3.2";
console.log(uuid.v4())
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
dialog: false,
dialogDelete: false,
headers: [
{id: 'ID', value: 'id'},
{
text: 'Dessert (100g serving)',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Actions', value: 'actions', sortable: false },
],
desserts: [],
editedIndex: -1,
editedItem: {
id: uuid.v4(),
name: '',
calories: 0,
fat: 0,
carbs: 0,
protein: 0,
},
defaultItem: {
id: uuid.v4(),
name: '',
calories: 0,
fat: 0,
carbs: 0,
protein: 0,
},
}),
computed: {
formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
},
},
watch: {
dialog (val) {
val || this.close()
},
dialogDelete (val) {
val || this.closeDelete()
},
},
created () {
this.initialize()
},
methods: {
initialize () {
this.desserts = [
{
id: '1',
name: 'SFrozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
},
{
id: '2',
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
},
{
id: '3',
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
},
]
},
editItem (item) {
this.editedIndex = this.desserts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true
},
deleteItem (item) {
this.editedIndex = this.desserts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialogDelete = true
},
deleteItemConfirm () {
this.desserts.splice(this.editedIndex, 1)
this.closeDelete()
},
close () {
this.dialog = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
closeDelete () {
this.dialogDelete = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
save () {
if (this.editedIndex > -1) {
Object.assign(this.desserts[this.editedIndex], this.editedItem)
} else {
this.desserts.push(this.editedItem)
}
this.close()
},
},
})
When i add new item in the modal dialog a new uuid is created for the added row.
However if you add more than 2 new items then the uuid is duplicated.
Is there something wrong with the inbuilt data table index here?
When start the page, uuid is assigned to "editedItem" and "defaultItem" and is not calling again.
save () {
if (this.editedIndex > -1) {
Object.assign(this.desserts[this.editedIndex], this.editedItem)
} else {
this.desserts.push(this.editedItem)
this.defaultItem.id = uuid.v4();
}
this.close()
},
If modified as above, the uuid of the next item will be newly set when the new item is saved.
And there is one other problem with the code.
When a pop-up is closed without saving by calling "NEW ITEM" for the first time, the uuid of "editedItem" in the close() function is overwritten as uuid of "defaultItem".
Set the uuid of "defaultItem" and "editedItem" to the same value.

change legend color using highchart-ng

I want to change legend color in highchart. I have used highchart-ng, the below code its not working, Please help me
scope.dvBarChartNG = {
options: {
chart: {
type: 'column',
backgroundColor: '#ffffff'
}
},
xAxis: {
},
yAxis: {
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
},
*legend: {
itemStyle: {
'color' : '#000'
},
itemHoverStyle: {
'color' : '#000'
},
itemHiddenStyle: {
'color' : '#000'
}
},*
series: [{
name: 'xxxx',
data: scope.yyyy.series.user,
color: '#cfffac',
borderColor: "#cfffac",
showInLegend: true
}, {
name: 'xxxx',
data: scope.yyyy.series.entity,
color: '#82c84c',
borderColor: "#82c84c",
showInLegend: true
}]
};
my html code is

I get this error "Cannot read property 'type' of undefined" when I use highchart

I am using timeseries chart from highchart plugin as follow:
var series1={
type: 'area',
color:lineColors[numOfLines],
name: legends[numOfLines],
pointInterval: 24 * 3600 * 1000,
pointStart:Date.UTC(dateStart[0], dateStart[1], dateStart[2]) ,
data: democrat};
var series2={
type: 'area',
color:lineColors[numOfLines+1],
name: legends[numOfLines+1],
pointInterval: 24 * 3600 * 1000,
pointStart:Date.UTC(dateStart[0], dateStart[1], dateStart[2]) ,
data: repub};
youDynamicSeries.push(series1);
youDynamicSeries.push(series2);}
and after creating the series I create the chart like this:
highcharttimeseries(youDynamicSeries,xLabel,'trend_chart');
and highcharttimeseries function is as follow:
function highcharttimeseries(series,date,chartcontainer)
{
$('#'+chartcontainer).highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
minRange: 7 * 24 * 3600000 // fourteen days
},
yAxis: {
title: {
text: ''
}
},
legend: {
layout: 'horizontal',
align: 'middle',
verticalAlign: 'top',
borderWidth: 0
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1:0, y1: 5, x2: 0, y2: 0},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba(f,f,f,f)')]
]
},
marker: {
radius: 2
},
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
},
threshold: null
}
},
series:series
});
}
Now when I run it I get the following error:
Can anyone help what is wrong with my code?(I appreciate any help in advance)

Resources