vueup / vue-quill Goto Github PK
View Code? Open in Web Editor NEWRich Text Editor Component for Vue 3.
Home Page: https://vueup.github.io/vue-quill/
License: MIT License
Rich Text Editor Component for Vue 3.
Home Page: https://vueup.github.io/vue-quill/
License: MIT License
Version
@vueup/vue-quill version [e.g. 1.0.0-beta.5]
Describe the bug
Vue3 does not have the updatecontents function after obtaining the quill instance through Ref.
Version
@vueup/vue-quill version 1.0.0-beta.7
Describe the bug
When typing even just one character into the editor and updating the v-model content using a wrapper the cursor jumps back to the beginning position at 0,0.
To Reproduce
The steps are described on the Codesandbox, but here again for clarity:
Expected behavior
I expect the cursor to stay at the same position when content is changed and reached down to another component, etc.
Reproduction link
https://codesandbox.io/s/vue-quill-cursor-bug-2rwzu
Browser (please complete the following information):
Additional context
The linked Codesandbox shows the wrapper component I built which changes some visual things and options depending on if you are on a big screen (Desktop) or a small screen (Mobile). It uses vue3-mq
for the screen size detection.
In the quillEditorSelectionChangeEvent
and quillEditorUpdateContentEvent
methods in the TextEditorWrapper.vue
I have some commented out code where I tried a workaround. Needless to say, that workaround didn't work out as expected, if you type too fast it breaks.
Version
@vueup/vue-quill version 1.0.0-beta.7
Describe the bug
I try to center the text and works fine in editor but in preview still remain left
To Reproduce
Steps to reproduce the behavior:
change any text align to center or right
Expected behavior
it should align base on what I align from editor
Reproduction link
Browser (please complete the following information):
chrome
latest
Additional context
please fix
Describe the bug
When pasting formatted content into the editor, sometimes additional line breaks are inserted.
While pasting is a pain in quill in general, I believe that this particular issue has been addressed (slab/quill#1483).
My problem is that I cannot seem to configure the clipboard module correctly to set matchVisual
to false
.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Only the previously cut (or copied) text should be pasted, nothing more.
Additional context
I have tried setting quill.clipboard.options.matchVisual = false;
within onMounted
of my component but that didn't help.
Any help would be highly appreciated.
this is my component
QuillEditor v-model:content="contents" :options="options" contentType="html
and here i am updating the contents value but it's not work
mounted(){
this.emitter.on("setDraftStory", (draft) => {
this.contents = draft.story;
});
}
please help with that
Version
@vueup/vue-quill version [e.g. 1.0.0-beta.7]
It directly states that there is a security vulnerability.
Describe the bug
quill <=1.3.7
Severity: moderate
Cross-site Scripting in quill - GHSA-4943-9vgg-gr5r
fix available via npm audit fix --force
Will install undefined@undefined, which is a breaking change
node_modules/quill
@vueup/vue-quill *
Depends on vulnerable versions of quill
node_modules/@vueup/vue-quill
Version
1.0.0-beta.7
Describe the bug
I am using multiple instances of VueQuill on one view, with the QuillCursors-module.
On each instance it tries to register said module, on the second attempt I then get a warning in the console:
"Overwriting modules/cursors with" – function t3()…
The app works fine, but I'd like to get rid of the warnings.
Perhaps we can use Quill.getModule before registering, but not sure.
I haven't gotten NPM to install a forked version of VueQuill to test for myself.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Instancing multiple VueQuill-editors without warnings in the console.
Browser (please complete the following information):
Update: you can use the supressWarning-boolean in the Quill.register-call. Set it to true and the warning is gone. I have since removed the VueQuill-plugin and made my own implementation, but this could be helpful to others perhaps.
Version
@vueup/vue-quill version [e.g. 1.0.0-beta.5]
Describe the bug
I have tried the same example but I am getting an error
Expected behavior
add of the module
Browser (please complete the following information):
chrome
Additional context
I am adding the error log here
Uncaught TypeError: Cannot convert undefined or null to object
at Function.assign ()
at composeOptions (vue-quill.esm-bundler.js?93e8:203)
at initialize (vue-quill.esm-bundler.js?93e8:131)
at eval (vue-quill.esm-bundler.js?93e8:118)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js?5c40:2909)
at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:357)
at render (runtime-core.esm-bundler.js?5c40:5793)
at mount (runtime-core.esm-bundler.js?5c40:4081)
Version
1.0.0-beta.7
Currently formats
is only able to be passed to the options
prop. Since the options
prop is ignored when using the modules
prop (#115), formats
cannot be used while also using third party Quill modules.
Please add formats
as an independent prop in addition to providing it in options
.
Version
@vueup/vue-quill version [e.g. 1.0.0-beta.7]
const editor = ref()
...
<QuillEditor ref="editor" ... />
...
editor.value.setHTML(htmlContnet)
Throw error
Cannot read properties of undefined (reading 'setHTML')
Hi,
When I create a new instance, the default direction of the text is RTL. If I use the JS version from quilljs.com everything works fine.
Here is my code:
<template>
<QuillEditor ref="editor" theme="snow" @update:content="updateContent" :options="options" />
</template>
<script type="ts">
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
export default {
components: {
QuillEditor,
},
props: {
modelValue: String,
readOnly: {
type: Boolean,
default: false
}
},
setup() {
return {
options: {
readOnly: true,
theme: 'snow'
}
}
},
methods: {
updateContent(val) {
const html = this.$refs.editor.getHTML();
this.$emit("update:modelValue", html);
},
},
watch: {
modelValue: function (val) {
this.$refs.editor.setHTML(val);
},
},
};
</script>
I am using Vue 3.
Any ideas why this happens?
Hi,
If we want to use the last version of the package, we really need to specify the beta version (8, released in Feb 2022), because the default version is alpha.1 (released in March 2021).
Thank you,
Hello,
Has anyone run the plugin innuxt 3? Is it possible?
I used your open source project, but there was an error in packaging!
v-model:content not working when changed the binding value, it seems not two way binding,
Version
@vueup/vue-quill version ^1.0.0-beta.7
Nuxt 3
Describe the bug
ReferenceError: document is not defined in node_modules\quill\dist\quill.js
To Reproduce
Steps to reproduce the behavior:
Browser (please complete the following information):
Not sure if this is the right place to ask this but could really use some help..
Im using a clipboard matcher to detect when a user pastes an img into my quill editor. My handler function works as follows:
pasteHandler(node, delta) {
let imgSrc = delta.ops[0].insert.image;
//imgSrc gets sent to an api to be stored and new img src is returned
//once I have the new src from my api res I add the image into my quill instance:
this.quillInstance.updateContents(
new Delta().insert({
image: New Image Source
,
})
);
},
Everything works as expected and my image is displayed with the new updated source. The problem is I get this error from quill every time:
quill.js?9339:494 Uncaught TypeError: Cannot read properties of undefined (reading 'ops')
at Delta.concat (quill.js?9339:494)
at eval (quill.js?9339:9097)
at NodeList.reduce ()
at traverse (quill.js?9339:9087)
at eval (quill.js?9339:9088)
at NodeList.reduce ()
at traverse (quill.js?9339:9087)
at h.convert (quill.js?9339:8959)
at h.convert (quill.js?9339:8945)
at h.value (quill-paste-smart.js?593d:3)
Nothing breaks but I can't have this error message show up every time someone pastes an image in the editor
Any assistance would be greatly appreciated!
Version
3.0.6
Describe the bug
I am unable to set up vue-quill editor in a way that links automatically become clickable.
To Reproduce
I used 2 different libraries for this purpose and both of them crashed my app.
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// First Attempt:
// import AutoLinks from 'quill-auto-links';
// VueQuillEditor.register(AutoLinks)
// Second Attempt:
// import MagicUrl from 'quill-magic-url'
// VueQuillEditor.register('modules/magicUrl', MagicUrl)
Vue.use(VueQuillEditor)
Expected behavior
I should be able to have an option to make links clickable automatically. Please tell me if such a possibility already exists.
After installing and setting up everyting like in the docs i get
[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. at <QuillEditor theme="snow" >
My Code
<template>
<app-layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Posts
</h2>
</template>
<div class="py-12">
<div class="container">
<div>
<QuillEditor theme="snow"/>
</div>
</div>
</div>
</app-layout>
</template>
<script>
import AppLayout from '@/Layouts/AppLayout'
import {QuillEditor} from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default {
components: {
AppLayout,
QuillEditor
},
created() {
},
data() {
return {}
},
};
</script>
alpha
branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the alpha
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
name
property in package.json
.The package.json
's name property is required in order to publish a package to the npm registry.
Please make sure to add a valid name
for your package in your package.json
.
Good luck with your project ✨
Your semantic-release bot 📦🚀
Version
@vueup/vue-quill version [e.g. 1.0.0-beta.7]
When I pass a prop with v-model directive to a child component (as described here ) and use it as content for QuillEditor, I get this error:
error Unexpected mutation of "description" prop vue/no-mutating-props
.
Goal is to initialize QuillEditor with the prop as content and to propagate changes to the parent component.
Parent component:
<template>
<CustomForm v-model:description="description"></TechnologyForm>
</template>
<script>
import { ref } from 'vue'
import CustomForm from '@/components/CustomForm .vue'
export default {
components: {
CustomForm
},
setup(){
const description= ref('')
return(description)
}
}
</script>
Child component CustomForm
:
<template>
<QuillEditor theme="snow" toolbar="essential" v-model:content="description" contentType="html"/>
</template>
<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default {
props: ['description']
}
</script>
Version
@vueup/vue-quill version [^1.0.0-beta.7]
Describe the bug
the config of the property 'modules' of 'options' prop of quill-editor component is not take effect.
To Reproduce
Steps to reproduce the behavior:
Solve Method
there is my currently way that used to avoid the bug
Version
"@vueup/vue-quill": "^1.0.0-beta.7",
Describe the bug
When i use the v-model (value type: string) to bind the string on VueQuill component, default value ( by setHTML() method ) will be
refer - slab/quill#861
Kindly let me know if any idea for this, thanks : )
I tried in all ways to add the Emoji Module https://github.com/contentco/quill-emoji, in plus is not possible import the Quill instance from vue-quill.
So if someone did it, or can fix it would be awesome
Version
@vueup/vue-quill version [e.g. 1.0.0-alpha.1]
Describe the bug
Before the module is registered, it is not checked whether the module already exists, which causes quill to issue an alarm when it is repeatedly registered
Version
@vueup/vue-quill version [e.g. 1.0.0-beta.5]
Describe the bug
When you press enter/return in the editor extra lines are created in the editor with
To Reproduce
Steps to reproduce the behavior:
Expected behavior
When pressing enter/return only new lines are added for the returns.
Reproduction link
N/A
Browser (please complete the following information):
Additional context
N/A
beta
branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here are some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
The npm token configured in the NPM_TOKEN
environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/
.
If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.
Please make sure to set the NPM_TOKEN
environment variable in your CI with the exact value of the npm token.
Good luck with your project ✨
Your semantic-release bot 📦🚀
When the component mounts, it automatically grabs focus. This isn't desirable behaviour when the editor is rendered in a form with other components.
(Fantastic component by the way!)
Version
@vueup/vue-quill version [e.g. 1.0.0-beta.5]
Describe the bug
I am trying to have the following options: 'Bold', 'Italics', 'Underline' and 'Bullet List. The problem comes when I am initializing the toolbar, which is about to sent as a prop to the QuillEditor. The problem is, I am not able to see the icon of bullet list. When I used the element tracker in chrome to find out what is happening to the HTML element of the button, I found out that the class name is 'ql-list' and the value property is 'bullet' for bullet list and 'ordered' for a numbered list. The prop I am sending takes only the className and there is no way to send the value or I am not able to find a way in the documentation. I have given the screenshots below and explained a little bit more in detail.
In the above picture, you can see the button is implemented but the icon is hidden. The functionality is working, but the visual representation of the button is not present.
Furthermore, to see what's wrong, I checked the HTML element's class to see what is happening there and found out this.
if you see the highlighted parts, the list type is decided based on the value and I cannot find a way to send the value in the VueJs documentation.
Please Help!
alpha
branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the alpha
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
name
property in package.json
.The package.json
's name property is required in order to publish a package to the npm registry.
Please make sure to add a valid name
for your package in your package.json
.
Good luck with your project ✨
Your semantic-release bot 📦🚀
Hi! When I installed it (twice) via npm, according to the docs: npm install @vueup/vue-quill@alpha --save
I was missing all the .css files.
However when I installed it according to npmjs.com with npm i @vueup/vue-quill
I got all the .css files.
No expert at all in npm so maybe something wrong with my setup but currently running a Laravel Sail environment with default settings in Laravel Mix.
This package does import Quill from 'quill'
which loads the entire quill as opposed to just core quill/core
. This leads to least 40kb of extra JS in the bundle.
Any chance this could be prevented?
How to insert the specified html content at the cursor position?
Version
@vueup/vue-quill version [e.g. 1.0.0-beta.6]
Describe the bug
interactive toolbar elements is not working. So i am trying with basic usage and seems like i can not change font size, first drop down is not working
To Reproduce
Steps to reproduce the behavior:
i just tried to use <quill-editor :theme="'snow'"></quill-editor>
with default toolbar and 'Normal' is not clickable in chrome. But demo works fine for me. In firefox everything ok
Browser (please complete the following information):
Thanks!
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
npm install @vueup/vue-quill@beta --save
import { QuillEditor } from '@vueup/vue-quill';
ERR message
ERROR in ./node_modules/@vueup/vue-quill/dist/vue-quill.esm-bundler.js
Module not found: Error: Can't resolve 'vue' in '/Users/myusername/Sites/projectname/node_modules/@vueup/vue-quill/dist'
@ ./node_modules/@vueup/vue-quill/dist/vue-quill.esm-bundler.js 15:0-91 48:20-35 117:8-17 120:8-23 125:23-26 212:30-33 218:8-13 292:12-20 299:8-13 304:8-13 326:12-13
@ ./static/js/vue/blog/App.js
Expected behavior
As seen on https://vueup.github.io/vue-quill/guide/usage.html
Version
@vueup/vue-quill version [e.g. 1.0.0-beta.8]
Describe the bug
When I install the plug-in “quill-blot-formatter ^1.0.5”, and it words in development env.
But , but it doesn't works in product env.
"Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'className')"
the plug-in “quill-blot-formatter" has bug
How to use methods Vuequill, like setHTML,getHTML ...
I try use setHTML on ready event but return setHTML is not a function..
Version
@vueup/vue-quill version [e.g. 1.0.0-beta.7]
Describe the bug
I'm using vite-ssg for server side building of app. When I tried to build the project, quill is throwing this error
ReferenceError: document is not defined
at Object.<anonymous> (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:7661:12)
at __webpack_require__ (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:36:30)
at Object.<anonymous> (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:1030:1)
at __webpack_require__ (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:36:30)
at Object.<anonymous> (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:5655:14)
at __webpack_require__ (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:36:30)
at Object.<anonymous> (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:10045:13)
at __webpack_require__ (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:36:30)
at Object.<anonymous> (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:11557:18)
at __webpack_require__ (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:36:30)
ELIFECYCLE Command failed with exit code 1.
ELIFECYCLE Command failed with exit code 1.
Please suggest some ways to fix this issue
The editor doesn't change when it's v-model variable changes. Why is that?
So testReset() does nothing visual in this example.
Code:
<QuillEditor
:id="name"
v-model:content="test"
:name="name"
theme="bubble"
toolbar="essential"
content-type="html"
></QuillEditor>
<button @click="testReset()">reset</button>
data: {
return {
test: ""
}
}
methods: {
testReset() {
console.log(this.test);
this.test = "resetted";
},
}
I have an error when I'm trying to import the plugin onto the project.
import QuillEditor from '@vueup/vue-quill
Uncaught Error: Module parse failed: Unexpected token (8:215655)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
import QuillEditor from '@vueup/vue-quill/dist/vue-quill.es'
or
import QuillEditor from '@vueup/vue-quill/dist/vue-quill.cjs'
Uncaught Error: Module parse failed: Unexpected token (11541:43)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| editor.value.classList.remove("ql-snow");
| // Fix clicking the quill toolbar is detected as blur event
> quill.getModule("toolbar")?.container.addEventListener("mousedown", (e) => {
| e.preventDefault();
| });
at Object../node_modules/@vueup/vue-quill/dist/vue-quill.es.js (index.esm.js:741)
and same type of errors when importing other modules
My package.json
{
"name": "___",
"version": "1.1.0",
"description": "___",
"private": true,
"loglevel": "silent",
"scripts": {
"clean": "rimraf public",
"dev": "cross-env NODE_ENV=development webpack",
"start": "cross-env NODE_ENV=development webpack-dev-server",
"build": "npm run clean -s && cross-env NODE_ENV=production webpack"
},
"keywords": [
"scss",
"pug",
"babel"
],
"author": "___",
"license": "ISC",
"browserslist": [
"last 2 version",
"> 1%",
"not dead"
],
"devDependencies": {
"@babel/core": "7.6.4",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-optional-chaining": "^7.10.4",
"@babel/preset-env": "^7.12.11",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"@vue/babel-plugin-jsx": "^1.0.0",
"@vue/babel-preset-jsx": "^1.1.2",
"@vue/compiler-sfc": "^3.0.5",
"babel-eslint": "10.0.2",
"babel-loader": "8.0.6",
"copy-webpack-plugin": "^6.4.1",
"cross-env": "6.0.3",
"css-loader": "3.2.0",
"dotenv-webpack": "^2.0.0",
"eslint": "^7.18.0",
"eslint-plugin-babel": "5.3.0",
"eslint-webpack-plugin": "^2.4.2",
"file-loader": "4.2.0",
"html-beautify-webpack-plugin": "^1.0.5",
"html-loader": "0.5.5",
"html-webpack-harddisk-plugin": "1.0.1",
"html-webpack-plugin": "3.2.0",
"mini-css-extract-plugin": "0.8.0",
"node-sass": "^4.14.1",
"node-sass-json-importer": "4.1.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"path": "0.12.7",
"pug": "2.0.4",
"pug-html-loader": "1.1.5",
"pug-loader": "2.4.0",
"raw-loader": "3.1.0",
"rimraf": "3.0.0",
"sass-loader": "^8.0.2",
"svg-url-loader": "^7.1.1",
"terser-webpack-plugin": "^4.1.0",
"vue-loader": "^16.0.0-rc.1",
"vue-template-compiler": "^2.6.12",
"webpack": "4.41.2",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "3.3.9",
"webpack-dev-server": "^3.11.2",
"write-file-webpack-plugin": "^4.5.1"
},
"dependencies": {
"@glidejs/glide": "^3.4.1",
"@staaky/fresco": "^2.3.1",
"@vueform/multiselect": "^1.3.5",
"@vuelidate/core": "^2.0.0-alpha.8",
"@vuelidate/validators": "^2.0.0-alpha.5",
"@vueup/vue-quill": "^1.0.0-alpha.6",
"@yaireo/tagify": "^3.6.10",
"anchorme": "^2.1.2",
"axios": "^0.21.1",
"bootstrap-4-grid": "^3.0.0",
"choices.js": "^9.0.1",
"core-js": "^3.8.3",
"jquery": "^3.5.0",
"lodash": "^4.17.20",
"mobile-device-detect": "^0.4.3",
"normalize.css": "^8.0.1",
"pristinejs": "^0.1.6",
"quill": "^1.3.7",
"regenerator-runtime": "^0.13.7",
"sass-mq": "5.0.1",
"selectric": "^1.13.0",
"tail.datetime": "^0.4.13",
"tingle.js": "^0.15.3",
"uuid": "^8.3.1",
"v-click-outside": "^3.0.1",
"vue": "^3.0.5",
"vue-final-modal": "^1.8.4",
"vue-native-websocket-vue3": "^3.0.2",
"vue-upload-component": "^3.0.47",
"vuex": "^4.0.0-rc.2",
"vuex-map-fields": "^1.4.1"
}
}
My Webpack configuration
// System
const webpack = require('webpack')
const fs = require('fs')
const path = require('path')
// Common
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { VueLoaderPlugin } = require("vue-loader")
// Development
const address = require('ip').address
const WriteFileWebpackPlugin = require('write-file-webpack-plugin')
// const ESLintPlugin = require('eslint-webpack-plugin')
const Dotenv = require('dotenv-webpack')
// Production
const HtmlBeautifyPlugin = require('html-beautify-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
// User
const paths = require('./webpack/paths')
const helpers = require('./webpack/helpers')
const pugTemplates = [];
const srcll = fs.readdirSync(paths.dirSrcPug);
srcll.forEach(s => s.endsWith('.pug') && pugTemplates.push(s));
const webpackConfig = {
mode: process.env.NODE_ENV,
entry: {
main: paths.dirSrcJs + '/app.js',
vue: paths.dirSrcJs + '/vue/index.js'
},
output: {
path: paths.dirDist,
filename: 'js/[name].bundle.js'
},
resolve: {
alias: {
'#root': paths.dirSrcJs,
'#vue': paths.dirSrcJs + '/vue',
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'entry',
corejs: "3.8"
}
],
'@vue/babel-preset-jsx'
],
plugins: [
['@babel/plugin-proposal-class-properties', { 'loose': true }],
['@babel/plugin-proposal-optional-chaining'],
['@vue/babel-plugin-jsx'],
// ['eslint-plugin-babel'],
]
}
}
]
},
{
test: /\.css$/,
use: helpers.styleLoaders([], process.env.NODE_ENV)
},
{
test: /\.scss$/,
use: helpers.styleLoaders([{
loader: 'sass-loader',
options: {
sourceMap: process.env.NODE_ENV === 'development' ? true : false,
},
}], process.env.NODE_ENV)
},
{
test: /\.pug$/,
use: ['raw-loader', 'pug-html-loader']
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.svg$/,
loader: 'svg-url-loader'
}
]
},
plugins: [
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false,
}),
...pugTemplates.map(templateName => new HtmlWebpackPlugin({
inject: true,
template: `./src/pug/${templateName}`,
filename: path.join(paths.dirDist, templateName.replace('.pug', '.html')),
minify: false,
alwaysWriteToDisk: true,
})),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
}),
new CopyWebpackPlugin({
patterns: [
{ from:'src/assets', to:'assets' },
]
}),
new VueLoaderPlugin(),
],
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
if (process.env.NODE_ENV === 'development') {
// console.log(path.join(paths.dirSrc, '/**/*.js'))
// console.log(paths.rootPath)
webpackConfig.devtool = 'source-map'
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin())
webpackConfig.plugins.push(new Dotenv({
path: '.env.dev',
systemvars: true,
}))
webpackConfig.plugins.push(new WriteFileWebpackPlugin())
// webpackConfig.plugins.push(new ESLintPlugin())
webpackConfig.devServer = {
compress: true,
quiet: true,
stats: {
assets: false,
children: false,
chunks: false,
chunkModules: false,
colors: true,
entrypoints: false,
hash: false,
modules: false,
timings: false,
version: false,
},
hot: true,
lazy: false,
host: address(),
port: 3000,
clientLogLevel: 'error',
headers: {
'Access-Control-Allow-Origin': '*'
},
open: true
}
}
if (process.env.NODE_ENV === 'production') {
webpackConfig.plugins.push(new HtmlBeautifyPlugin({
config: {
html: {
end_with_newline: false,
indent_size: 2,
indent_with_tabs: false,
indent_inner_html: false,
preserve_newlines: false,
wrap_line_length: 0,
inline: [],
unformatted: [],
}
},
}))
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
webpackConfig.optimization.minimizer = [
new TerserPlugin(),
new OptimizeCSSAssetsPlugin()
]
}
module.exports = webpackConfig
Version
@vueup/vue-quill version"^1.0.0-alpha.40",
Describe the bug
In detail page I set content-type html and set content = '
...
',but the editor does not appear correctly what I set to the content.However,i can find the content value is correct by vue-devtool(for vue3). What i set is like this const state = reactive({ content :'' })
,what's more, I directly input in the editor also can see the content change( by vue devtools)
To Reproduce
Steps to reproduce the behavior:
directly
Expected behavior
The editor show the content that I set
Reproduction link
If available, add a link to the source code to help explain your problem.
Browser (please complete the following information):
Chrome 89.0.4389.114
Additional context
Add any other context about the problem here.
Version 1.0.0-beta.5
Describe the bug
Following the documentantion: "returns the Quill instance that backs the editor. While you can freely use this to access methods such as getText(), focus(), and much more."
But focus() not work, getText, html is ok.
To Reproduce
I download the library with npm and i got "Object(...) is not a function"
error where implemented component. Also i got this error on main.js. Which point that i'm missing?
I'm following this guideline
Project using
"vue": "~2.6.11"
Current vue-quill
"@vueup/vue-quill": "^1.0.0-alpha.35"
The version number of vue is 3.2.25
[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.