vue tinymce根据后台返回的文件地址,将文件内容显示在tinymce中
时间: 2024-02-09 21:07:51 浏览: 68
一个后台的文件
您好,根据您的描述,您需要将后台返回的文件地址显示在 Vue Tinymce 编辑器中,这可以通过以下步骤来实现:
1. 安装 Vue Tinymce 组件
```bash
npm install vue-tinymce --save
```
2. 在 Vue 组件中引入 Vue Tinymce 组件,并在 `mounted` 钩子函数中初始化编辑器
```javascript
<template>
<div>
<vue-tinymce
ref="editor"
:init="{
plugins: 'advlist autolink lists link image charmap print preview anchor',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image',
height: 500
}"
/>
</div>
</template>
<script>
import VueTinymce from 'vue-tinymce'
export default {
components: {
VueTinymce
},
mounted () {
this.$refs.editor.init()
}
}
</script>
```
3. 在获取到后台返回的文件地址后,使用 `setContent` 方法将文件内容显示在编辑器中
```javascript
this.$refs.editor.setContent('<img src="' + imageUrl + '">')
```
其中,`imageUrl` 是后台返回的图片地址,`setContent` 方法可以将内容插入到编辑器的光标位置处。
以上就是将后台返回的文件地址显示在 Vue Tinymce 编辑器中的基本步骤,如果还有疑问,请随时询问。
阅读全文