add an example usage with vuejs using quill-vue

c-w · Sep 4, 2023 · 19e6a1f · 19e6a1f
1 parent f96f4ab
commit 19e6a1f
Show file tree

Hide file tree

Showing 10 changed files with 161 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()],
+})