Skip to content

Commit

Permalink
add an example usage with vuejs using quill-vue
Browse files Browse the repository at this point in the history
  • Loading branch information
eokwukwe committed Sep 4, 2023
1 parent f96f4ab commit 19e6a1f
Show file tree
Hide file tree
Showing 10 changed files with 161 additions and 0 deletions.
25 changes: 25 additions & 0 deletions rvuejs/.gitignore
Original file line number Diff line number Diff line change
@@ -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/
1 change: 1 addition & 0 deletions rvuejs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# Vue 3 + Vite
19 changes: 19 additions & 0 deletions rvuejs/index.html
Original file line number Diff line number Diff line change
@@ -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>
23 changes: 23 additions & 0 deletions rvuejs/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
1 change: 1 addition & 0 deletions rvuejs/public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions rvuejs/src/App.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script setup>
import TextEditor from './components/TextEditor.vue';
</script>

<template>
<div class="container px-6 py-8">
<TextEditor />
</div>
</template>
1 change: 1 addition & 0 deletions rvuejs/src/assets/vue.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 65 additions & 0 deletions rvuejs/src/components/TextEditor.vue
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 10 additions & 0 deletions rvuejs/src/main.js
Original file line number Diff line number Diff line change
@@ -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')
7 changes: 7 additions & 0 deletions rvuejs/vite.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})

0 comments on commit 19e6a1f

Please sign in to comment.