vue-tiptap-katex
v2.3.22
Published
tiptap editor with katex in vue
Downloads
255
Readme
Vue Tiptap Katex
A rich-text and math editor for Vue.js v2 powered by Tiptap and Mathlive.
For Vue 3 support see vue3-tiptap-katex
Changelog
- add support for v-model
- add support for custom table cells
Installation
npm install --save vue-tiptap-katex
Demo
git clone https://github.com/kerasus/vue-tiptap-katex
cd vue-tiptap-katex
npm install
npm run serve
Then you should be able to navigate with your browser and see the demo in http://localhost:8080/
Usage
on <template> add
something like this
<vue-tiptap-katex ref="editor" />
on <script> add
option 1
In the same template file, at <script>
part, this will make the component available only to the template in this file
import VueTiptapKatex from 'vue-tiptap-katex'
...
export default {
...
components: {
VueTiptapKatex,
...
},
...
}
option 2
At main Vue configuration, this will make the component available to all templates in your app
import Vue from 'vue'
import VueTiptapKatex from 'vue-tiptap-katex'
...
Vue.component('vue-tiptap-katex', VueTiptapKatex)
How to set and get content
export default {
...
methods: {
...
getContent() {
const content = this.$refs.editor.getContent()
console.log(content)
},
setContent() {
const content = "<p>Hellow World!</p>"
this.$refs.editor.setContent(content)
},
...
},
...
}
Note:
vue-tiptap-katex accepts plain text and HTML as input and exports text as HTML.
Alternative option: v-model:
<vue-tiptap-katex v-model="text" />
Props
Note that all props are optional.
| Name | Type | Default | Description | |--------------|---------|-----------------------------------|-----------------------------| | loading | Boolean | false | Loading overlay | | options | Object | See Options Prop | Editor Options |
Options Prop
All options are optional:
| Name | Type | Default | Description | |-----------------|----------|---------|-----------------------------------------------------------------------------------------------------| | bubbleMenu | Boolean | true | Whether to show Bubble Menu or not | | floatingMenu | Boolean | true | Whether to show Floating Menu or not | | poem | Boolean | false | Whether to show Poem Button in toolbar or not (This feature is designed for Arabic based languages) | | persianKeyboard | Boolean | false | Adding Persian keyboard to Mathlive | | mathliveOptions | Object | {} | This Object is passed directly to Mathlive instance | | uploadServer | Object | {} | Upload image request config | | onResizeEnd | Function | null | Gets called after resizing image |
####uploadServer example: { url: upload.com/image, headers: { Authentication: "token" }, instantUpload: false }
####onResizeEnd: Arguments: url, width, height Return value: url
Example:
onResizeEnd (url, width, height) {
return url.split('?w=')[0] + '?w=' + width + '&h=' + height
}
Develop and build
npm install
npm run build
Contributors
License
MIT editable polyline plugin extension for vue2-leaflet package