tinymce-vue3不显示工具栏
时间: 2023-08-11 09:07:57 浏览: 348
vue3中使用tinyMCE
5星 · 资源好评率100%
如果你使用的是 tinymce-vue3 的最新版本,并且工具栏没有被正确地显示出来,那么你可以尝试以下解决方案:
1. 确保在 `tinymce.init()` 中正确地配置了工具栏选项,例如:
```javascript
tinymce.init({
selector: '#mytextarea',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify',
plugins: 'advlist autolink lists link image charmap print preview anchor'
});
```
2. 确保在组件中正确地引入了 tinymce-vue3,例如:
```vue
<template>
<div>
<Editor v-model="content" />
</div>
</template>
<script>
import { Editor } from '@tinymce/tinymce-vue3';
export default {
components: {
Editor
},
data() {
return {
content: ''
};
}
};
</script>
```
3. 如果以上两个步骤都没有解决问题,那么你可以尝试使用 `toolbar_mode: 'floating'` 或 `toolbar_mode: 'sliding'` 选项来调整工具栏的位置和显示方式。
```javascript
tinymce.init({
selector: '#mytextarea',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify',
plugins: 'advlist autolink lists link image charmap print preview anchor',
toolbar_mode: 'floating' // 或者 'sliding'
});
```
希望以上解决方案能够帮助你解决问题。如果还有其他疑问,请随时与我交流。
阅读全文