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: {},
},
];
Related
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;
In order to streamline my theming I'd like to reference to a custom color I defined and then pass it through a function to get a lighter or darker variant.
I extend the default color theme using the following (partial) code:
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#325889',
light: '#5aacbb',
lighter: '#5ebebf',
},
},
},
},
}
Now my goal is to somehow reference the colors.primary in another custom color variant to pass it into a custom function, something like this:
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#325889',
light: '#5aacbb',
lighter: '#5ebebf',
},
gradient: {
'0\/3': this.theme.extend.colors.primary,
'1\/3': getGradientStop(this.theme.extend.colors.primary, this.theme.extend.colors.primary.lighter, 33.333),
'2\/3': getGradientStop(this.theme.extend.colors.primary, this.theme.extend.colors.primary.lighter, 66.666),
'3\/3': this.theme.extend.colors.primary.lighter,
}
},
},
},
}
However, I can't seem to reference the primary color in any way. I tried this.colors.primary, this.theme.extend.colors.primary but can't seem to get it up and running.
Any clues on how to do this would be greatly appreciated.
Cheers!
You can create new variable to keep the value of your extended colors:
const primary = '#325889';
const primaryLight = '#5aacbb';
const primaryLighter = '#5ebebf';
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: primary,
light: primaryLight,
lighter: primaryLighter,
},
gradient: {
'0\/3': primary,
'1\/3': getGradientStop(primary, primaryLighter, 33.333),
'2\/3': getGradientStop(primary, primaryLighter, 66.666),
'3\/3': primaryLighter,
}
},
},
},
};
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
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
}
I have begun integrating vue-video-player. The player renders at only 100px wide. I don't know why or how to change it.
I have not been able to find anything in the documentation. In fact, the inclusion of css files was a little confusing and I'm uncertain if my import (versus the require in the docs) is correct.
How can I set the width of the player?
<template>
<div>
<video-player
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
>
</video-player>
</div>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {
name: 'foo',
components: {
videoPlayer,
},
data () {
return {
playerOptions: {
muted: true,
language: 'en',
playbackRates: [1.0],
sources: [{
type: "video/mp4",
src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: "/static/images/defaults/image.png",
}
}
},
}
</script>
in the playerOptions set the width and height
playerOptions: {
// videojs options
muted: true,
language: 'en',
techOrder: ['html5', 'flvjs'],
playbackRates: [0.7, 1.0, 1.5, 2.0],
width: '800px',
height: '800px',
plugins: {
},
flash: {
swf: './#/assets/video-js.swf'
},
poster: './#/assets/logo.png',
sources: [
]
}
}