add an example usage with vuejs using quill-vue

c-w · Sep 29, 2023 · 3d03b73 · 3d03b73
1 parent f96f4ab
commit 3d03b73
Show file tree

Hide file tree

Showing 17 changed files with 330 additions and 0 deletions.
diff --git a/rvuejs/.gitignore b/rvuejs/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vscode/
diff --git a/rvuejs/README.md b/rvuejs/README.md
@@ -0,0 +1 @@
+# Vue 3 + Vite
diff --git a/rvuejs/index.html b/rvuejs/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite + Vue</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <script
+ src="https://code.jquery.com/jquery-3.7.1.min.js"
+ integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+ crossorigin="anonymous"
+ ></script>
+ <script type="module" src="/src/main.js"></script>
+ </body>
+</html>
diff --git a/rvuejs/package.json b/rvuejs/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "rvuejs",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port 4043",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@edtr-io/mathquill": "^0.11.0",
+ "@vueup/vue-quill": "^1.2.0",
+ "jquery": "^3.7.1",
+ "katex": "^0.16.8",
+ "mathquill4quill": "^2.4.0",
+ "vue": "^3.3.4"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^4.2.3",
+ "vite": "^4.4.5"
+ }
+}
diff --git a/rvuejs/public/vite.svg b/rvuejs/public/vite.svg
diff --git a/rvuejs/src/App.vue b/rvuejs/src/App.vue
@@ -0,0 +1,9 @@
+<script setup>
+import TextEditor from './components/TextEditor.vue';
+</script>
+
+<template>
+ <div class="container px-6 py-8">
+ <TextEditor />
+ </div>
+</template>
diff --git a/rvuejs/src/assets/vue.svg b/rvuejs/src/assets/vue.svg
diff --git a/rvuejs/src/components/TextEditor.vue b/rvuejs/src/components/TextEditor.vue
@@ -0,0 +1,65 @@
+<script setup>
+// KaTeX dependency
+import katex from 'katex';
+window.katex = katex;
+
+import { QuillEditor, Quill } from '@vueup/vue-quill';
+
+
+import '@edtr-io/mathquill/build/mathquill.js';
+import '@edtr-io/mathquill/build/mathquill.css';
+
+// mathquill4quill include
+import mathquill4quill from 'mathquill4quill';
+import 'mathquill4quill/mathquill4quill.css';
+
+import { onBeforeMount, onMounted, ref } from 'vue';
+
+const operators = [
+ ['\\pm', '\\pm'],
+ ['\\sqrt{x}', '\\sqrt'],
+ ['\\sqrt[3]{x}', '\\sqrt[3]{}'],
+ ['\\sqrt[n]{x}', '\\nthroot'],
+ ['\\frac{x}{y}', '\\frac'],
+ ['\\sum^{s}_{x}{d}', '\\sum'],
+ ['\\prod^{s}_{x}{d}', '\\prod'],
+ ['\\coprod^{s}_{x}{d}', '\\coprod'],
+ ['\\int^{s}_{x}{d}', '\\int'],
+ ['\\binom{n}{k}', '\\binom'],
+];
+
+const quill = ref();
+const content = ref('');
+
+onMounted(() => {
+ console.log('mounted', quill.value);
+ const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill, katex });
+
+ enableMathQuillFormulaAuthoring(quill.value, {
+ operators,
+ });
+});
+
+const textChange = (prop) => {
+ console.log('textChange', content.value);
+};
+</script>
+
+<template>
+ <div class="w-full">
+ <QuillEditor
+ id="quill-editor"
+ v-model:content="content"
+ theme="snow"
+ placeholder="Type text here, or click on the formula button to enter math."
+ ref="quill"
+ :options="{
+ modules: {
+ formula: true,
+ toolbar: [['bold', 'italic', 'underline'], ['formula']],
+ },
+ }"
+ @editorChange="textChange"
+ />
+ </div>
+</template>
diff --git a/rvuejs/src/main.js b/rvuejs/src/main.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import 'katex/dist/katex.css';
+import '@vueup/vue-quill/dist/vue-quill.bubble.css';
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
+
+import 'mathquill4quill/mathquill4quill.css';
+
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/rvuejs/vite.config.js b/rvuejs/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue()],
+})
diff --git a/vuejs/.gitignore b/vuejs/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vscode/
diff --git a/vuejs/index.html b/vuejs/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>mathquill4quill demo (Vue 3)</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script
+ src="https://code.jquery.com/jquery-3.7.1.min.js"
+ integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+ crossorigin="anonymous"
+ ></script>
+ <script type="module" src="/src/main.js"></script>
+ </body>
+</html>
diff --git a/vuejs/package.json b/vuejs/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "rvuejs",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "start": "vite --port 4043",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@edtr-io/mathquill": "^0.11.0",
+ "@vueup/vue-quill": "^1.2.0",
+ "jquery": "^3.7.1",
+ "katex": "^0.16.8",
+ "mathquill4quill": "^2.4.0",
+ "vue": "^3.3.4"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^4.2.3",
+ "vite": "^4.4.5"
+ }
+}
diff --git a/vuejs/src/App.vue b/vuejs/src/App.vue
@@ -0,0 +1,9 @@
+<script setup>
+import TextEditor from './components/TextEditor.vue';
+</script>
+
+<template>
+ <div class="">
+ <TextEditor />
+ </div>
+</template>
diff --git a/vuejs/src/components/TextEditor.vue b/vuejs/src/components/TextEditor.vue
@@ -0,0 +1,77 @@
+<script setup>
+// KaTeX dependency
+import katex from 'katex';
+window.katex = katex;
+
+import { QuillEditor, Quill } from '@vueup/vue-quill';
+
+
+import '@edtr-io/mathquill/build/mathquill.js';
+import '@edtr-io/mathquill/build/mathquill.css';
+
+// mathquill4quill include
+import mathquill4quill from 'mathquill4quill';
+import 'mathquill4quill/mathquill4quill.css';
+
+import { onMounted, ref } from 'vue';
+
+const operators = [
+ ['\\pm', '\\pm'],
+ ['\\sqrt{x}', '\\sqrt'],
+ ['\\sqrt[3]{x}', '\\sqrt[3]{}'],
+ ['\\sqrt[n]{x}', '\\nthroot'],
+ ['\\frac{x}{y}', '\\frac'],
+ ['\\sum^{s}_{x}{d}', '\\sum'],
+ ['\\prod^{s}_{x}{d}', '\\prod'],
+ ['\\coprod^{s}_{x}{d}', '\\coprod'],
+ ['\\int^{s}_{x}{d}', '\\int'],
+ ['\\binom{n}{k}', '\\binom'],
+];
+
+const quill = ref();
+const content = ref('');
+
+onMounted(() => {
+
+ // For this line, refer to the following issue comment:
+ // https://github.com/c-w/mathquill4quill/issues/97#issuecomment-1740482856
+ quill.value.container = quill.value.getEditor();
+
+ const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill, katex });
+
+ enableMathQuillFormulaAuthoring(quill.value, {
+ operators,
+ });
+});
+
+const textChange = (prop) => {
+ console.log('textChange', content.value);
+};
+</script>
+
+<template>
+ <div class="wrapper">
+ <QuillEditor
+ id="quill-editor"
+ v-model:content="content"
+ theme="snow"
+ placeholder="Type text here, or click on the formula button to enter math."
+ ref="quill"
+ :options="{
+ modules: {
+ formula: true,
+ toolbar: [['bold', 'italic', 'underline'], ['formula']],
+ },
+ }"
+ @editorChange="textChange"
+ />
+ </div>
+</template>
+
+<style scoped>
+.wrapper {
+ width: 80%;
+ margin: 50px auto;
+ height: 100%;
+}
+</style>
diff --git a/vuejs/src/main.js b/vuejs/src/main.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import 'katex/dist/katex.css';
+import '@vueup/vue-quill/dist/vue-quill.bubble.css';
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
+
+import 'mathquill4quill/mathquill4quill.css';
+
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/vuejs/vite.config.js b/vuejs/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue()],
+})