vue tinymce 安装与配置
时间: 2023-09-02 09:12:01 浏览: 112
安装和配置 Vue Tinymce 的步骤如下:
1. 首先,安装依赖:
```
npm install tinymce vue-tinymce
```
2. 在 main.js 中引入 tinymce 和 vue-tinymce:
```javascript
import Vue from 'vue'
import VueTinymce from '@packy-tang/vue-tinymce'
Vue.use(VueTinymce)
```
3. 在组件中使用 vue-tinymce:
```vue
<template>
<div>
<vue-tinymce v-model="content" :init="tinymceInit" />
</div>
</template>
<script>
export default {
data() {
return {
content: '',
tinymceInit: {
height: 400,
menubar: false,
plugins: 'print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap emoticons',
toolbar: 'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
}
}
}
}
</script>
```
以上就是 Vue Tinymce 的安装和配置步骤,其中 tinymceInit 可以根据自己的需求进行调整。
阅读全文