关于tinymce-vue组件的使用遇到的问题:第一次富文本框中的内容不显示,第二次打开才显示
项目框架用的是ant-design-vue
语言:vue2.0
开始用tinymce-vue组件啦
第一步:npm install mailto:tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S
第二步:将node_modules中tinymce文件夹中的plugins和skins文件复制一份放到public/static/tinymce文件夹底下
如果想要汉化,在tinymce文件夹底下新建一个langs文件,里面放入zh_CN.js文件,该文件可去官网自行下载https://www.tiny.cloud/get-tiny/language-packages/
第三步:开始写代码了
<a-form :form="form" labelAlign="right">
<a-row :gutter="16">
<a-col :span="24">
<a-form-item label="新闻内容" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
<editor
id="tinymce"
:init="init"
:disabled="flag"
ref="editor"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image' // 插入上传图片插件
import 'tinymce/skins/ui/oxide/skin.css'
export default {
components: {
Editor,
},
data(){
return {
init: {
selector: '#tinymce',
height: 500,
// language: 'zh_CN',
// language_url: "/static/tinymce/langs/zh_CN.js",
skin_url: '/static/tinymce/skins/ui/oxide',
toolbar:
'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | link image ', //工具栏
images_upload_url: '',
plugins: ['image'],
//处理上传图片
images_upload_handler: (blobInfo, success, failure) => {
this.handleImgUpLoad(blobInfo, success, failure)
},
},
},
mounted() {
tinymce.init({})
},
methods: {
//父页面调用该页面的edit方法,formData的值也是从父页面传过来的
edit(formData) {
debugger
console.log('edit111111111')
this.action = 'edit'
this.title = '编辑'
this.currentData = formData
this.visible = true
this.flag = false
this.clearForm()
this.content = formData.content
this.$nextTick( () => {
tinymce.get('tinymce').setContent(formData.content)
if (formData) {
tinymce.get('tinymce').setContent(formData.content)
this.form.setFieldsValue({
source: formData.source,
// content: formData.content,
})
}
})
},
}
}
大家看看是哪里出错了