vue使用tinymce-plugins组件
时间: 2023-07-25 21:03:25 浏览: 105
要在 Vue 中使用 tinymce-plugins 组件,可以按照以下步骤进行操作:
1. 安装 tinymce 和 tinymce-vue 插件:
```
npm install tinymce tinymce-vue --save
```
2. 在需要使用 tinymce 的组件中导入 tinymce 和 tinymce-vue:
```js
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import TinymcePlugin from '@tinymce/tinymce-vue'
```
3. 将 TinymcePlugin 组件注册为 Vue 插件:
```js
Vue.use(TinymcePlugin)
```
4. 在组件中使用 tinymce:
```html
<template>
<div>
<editor v-model="content" :init="initSettings"></editor>
</div>
</template>
<script>
export default {
data() {
return {
content: '',
initSettings: {
height: 500,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
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>
```
这是一个简单的示例,你可以根据自己的需求配置 tinymce 的设置。
阅读全文