We Keep Coding

React ckeditor typeerror: cannot read properties of null reading 'getattribute'

typeerror: cannot read properties of null reading 'getattribute'
I am working on the React project using CkEditor.
I want to customize the tool of CkEditor
When I looked up the official document, I read that the existing package should be included, I finished installing additional, and there are currently no errors in the vcode.
By the way, the error below appears in the console window because "Ckeditor" is not rendered on the screen after starting npm, so can I ask for your advice?
Error Code
My code
import React from 'react';
import { CKEditor } from '#ckeditor/ckeditor5-react';
import DecoupledEditor from '#ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold';
...
interface EditorProps {
data: any;
onChange: any;
uploadFolder?: string;
uploader?: string;
}
const Editor = ({
data,
onChange,
uploadFolder = '',
uploader = '',
}: EditorProps) => {
return (
<div>
<CKEditor
data={data}
onChange={onChange}
editor={DecoupledEditor}
onReady={(editor: any) => {
editor.ui
.getEditableElement()
.parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement(),
);
}}
config={{
plugins: [
Essentials,
Paragraph,
Bold,
...
],
toolbar: [
'heading',
'|',
'bold',
...
],
fontSize: {
options: [19, 'default', 21....],
},
alignment: {
options: ['justify', 'left', 'center', 'right'],
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableProperties',
'tableCellProperties',
],
},
image: {
resizeUnit: 'px',
toolbar: [
'imageStyle:alignLeft',
'imageStyle:full',
'imageStyle:alignRight',
'|',
'imageTextAlternative',
],
styles: { options: ['full', 'alignLeft', 'alignRight'] },
upload: { types: ['JPEG', 'JPG', 'GIF', 'PNG'] },
},
simpleUpload: {
uploadUrl: '/uploadFile',
withCredentials: true,
headers: {
'upload-folder': uploadFolder || 'root',
'upload-editor': uploader || '',
},
},
}}
/>
</div>
);
};
export default Editor;

How to use vue-quill image compressor module

I'm using the BlotFormatter module with vue-quill. And it is working. I tried to add the image compressor module too and upload a large image but it is not being compressed. I think I have done something wrong. This is the way I included it in my project,
<script setup>
import { QuillEditor } from "#vueup/vue-quill";
import ImageCompress from "quill-image-compress";
import BlotFormatter from "quill-blot-formatter";
import "#vueup/vue-quill/dist/vue-quill.snow.css";
const modules = {
name: "blotFormatter",
module: BlotFormatter,
options: {
/* options */
},
imageCompress: {
quality: 0.7, // default
maxWidth: 1000, // default
maxHeight: 1000, // default
imageType: "image/jpeg", // default
debug: true, // default
suppressErrorLogging: false, // default
insertIntoEditor: undefined, // default
},
};
</script>
<template>
<QuillEditor
ref="quillEditorRef"
v-model:content="articleForm.description"
theme="snow"
toolbar="full"
contentType="html"
:modules="modules"
/>
</template>
Really appreciate it if somebody could guide me to install this module properly. Thanks

Just put the modules inside an array.Separate all modules as objects.
const modules = [
{
name: "ImageCompress",
module: ImageCompress,
options: {
quality: 0.7, // default
maxWidth: 1000, // default
maxHeight: 1000, // default
imageType: "image/jpeg", // default
debug: true, // default
suppressErrorLogging: false, // default
insertIntoEditor: undefined, // default
},
},
{
name: "BlotFormatter",
module: BlotFormatter,
options: {},
},
];const modules = [
{
name: "ImageCompress",
module: ImageCompress,
options: {
quality: 0.7, // default
maxWidth: 1000, // default
maxHeight: 1000, // default
imageType: "image/jpeg", // default
debug: true, // default
suppressErrorLogging: false, // default
insertIntoEditor: undefined, // default
},
},
{
name: "BlotFormatter",
module: BlotFormatter,
options: {},
},
];

How to modify default style of tradingview widget indicators?

Right now, I know how to define default inputs for indicators of the widget (see code below). But I want to define default styles. I have not found the right way to do it. Anyone knows?
var chart = new TradingView.widget(
{
autosize: true,
symbol: "OANDA:EURUSD",
interval: "3",
timezone: "America/Bogota",
theme: "dark",
style: "1",
locale: "en",
hide_side_toolbar: true,
hide_top_toolbar: false,
toolbar_bg: "#f1f3f6",
enable_publishing: false,
allow_symbol_change: true,
details: false,
hidevolume: true,
studies: [
{
id: "IchimokuCloud#tv-basicstudies",
version: 2.0
},
{
id: "Stochastic#tv-basicstudies",
inputs: {
K: 3,
}
}
],
container_id: "tradingview_7f23e"
}
);

You should pay for tradingview and check the documentation. but
studies_overrides: {
"volume.volume.color.0": "#00FFFF",
},
i think is your answer.
search for studies_overrides

How to trigger mouseover events in vue2vis components

I have been trying set up a network topology component using visjs, I am using the vue2vis package to do that. I followed the documentation to trigger event every time I click on a node but neither the hoverNode not the selectNode events are giving any console output. Am I doing something wrong. Below is my network component
<template>
<div>
<networking
ref="network"
:nodes="nodes"
:edges="edges"
:options="options"
:events="['selectNode', 'hoverNode']"
#hoverNode="onNodeHovered"
#selectNode="onNodeHovered"
></networking>
</div>
</template>
<script>
export default {
name: "Network",
props: {
jigTopology: {
type: Object,
required: true
}
},
data() {
return {
nodes: [],
edges: [],
options: {
autoResize: true,
width: "100%",
height: "500px",
clickToUse: true,
nodes: {
shape: "circle"
},
edges: {
chosen: {}
},
layout: {
hierarchical: {
enabled: true,
levelSeparation: 100
}
},
interaction: {
hover: true
},
manipulation: {
enabled: true
}
}
};
},
methods: {
onNodeHovered(event) {
console.log("hovered", this.$refs.network.getEventProperties(event));
}
},
beforeCreate() {},
created() {},
mounted() {
(this.nodes = this.jigTopology.nodes),
(this.edges = this.jigTopology.edges);
console.log("nodes", this.nodes);
console.log("edges", this.edges);
}
};
</script>
<style scoped>
.vis-network {
overflow: visible;
}
</style>
The node and edge data is generated by another component and passed as props to this.

Make sure to check options > interactions > hover: true
interaction: {
hover: true
}

Html2pdf.js result is blank PDF in vue

I have a vue component and I want to convert this component to PDF file. I used html2pdf.js package but the result is a blank PDF with 3 pages. How can I make it work?
<template>
<div>
<div ref="document">
<h2> hello</h2>
</div>
<button class="btn btn-success text-center" #click="createPDF"> دریافت فایل pdf</button>
</div>
</template>
<script>
import html2pdf from 'html2pdf.js'
export default {
data(){
return{
}
},
props : ['result'] ,
watch: {
},
methods: {
createPDF () {
html2pdf(this.$refs.document, {
margin: 1,
filename: 'document.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { dpi: 192, letterRendering: true , scale: 1 , useCORS: true},
jsPDF: { unit: 'in', format: 'a4', orientation: 'landscape' }
})
}
}
}