精彩文章免费看

vue tinymce 控制图片大小上传,以及富文本编辑框在dialog的问题

项目需求需要用到富文本编辑框,表格中操作富文本编辑框,最后选择用弹框的形式显示,注意弹框和富文本编辑框的坑

问题1:第二次打开弹框,富文本编辑框的内容为第一次的,未更新全新

原因:第一次弹框tinymce 组件未销毁,因此先于第二次dialog弹出,而第二次dialog中的传值也就后于富文本组件初始化,也就未被渲染了。
v-if="dialogFormVisible"

<el-dialog title="富文本编辑" :visible.sync="centerDialogVisible" center>
      <Tinymce v-model="conclusionDesc" v-if="dialogFormVisible"></Tinymce>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit(conclusionDesc)">保存</el-button>
 </el-dialog>
<script>
methods: {
  submitEdit(val) {
      this.centerDialogVisible = false
      this.dialogFormVisible = false
      console.log(Base64.encode(val)) //base64编码
</script>

问题2:弹窗中的富文本组件的工具栏点击无响应

原因:tinycme和dialog中的样式冲突了,当我们F12把页面缩小,会发现,并不是点击toolbar没反应,而是菜单栏(toolbar)被置于底层了,dialog盖住了菜单栏
解决:修改tinycme中的样式文件,z-index: 都+00000,此文件中有多处z-index,请全部修改(另外,z-index = -1 这种就不需要修改了)

init: { selector: `#${this.tinymceId}`, language_url: '/mtinymce/langs/zh_CN.js', // 语言包的路径 language: 'zh_CN', //语言 skin_url: '/mtinymce/skins/ui/oxide', // skin路径 content_css: "/mtinymce/skins/content/default/content.css", icons_url: '/mtinymce/icons/default/icons.js', icons: 'default', height: this.height, //编辑器高度 branding: false, //是否禁用“Powered by TinyMCE” menubar: false, //顶部菜单栏显示 statusbar: false, //是否显示底部的状态栏 plugins: this.plugins, toolbar: this.toolbar, // (自定义工具栏) // 此处为图片上传处理函数,这个直接用了base64的图片形式上传图片, // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler images_upload_handler: (blobInfo, success, failure) => { console.log(blobInfo, success, failure) const isLt10M = blobInfo.blob().size / 1024 / 1024 < 10; if (!isLt10M) { failure('上传图片大小不能超过 10MB!'); } else { const img = 'data:image/jpeg;base64,' + blobInfo.base64() success(img) setup: (editor) => { // 初次化编辑器 editor.on('init', () => { that.isInit = true //告知是初始化\ if (that.value) { editor.setContent(that.value) that.isInit = false editor.on('input change undo redo', () => { // this.value = editor.getContent() //此处设置为false很好解决光标前置问题 that.isInit = false myValue: this.value, isInit: false, //是否初始化