tinymce vue v-model 赋值输入框 ScrollTop 不会滚动到底部

417 阅读1分钟

tinymce Vue 文档:www.tiny.cloud/docs/integr…

tinymce template

<template>
  <div id="app">
    <editor
      id="tinymce"
      v-model="myValue"
      :disabled="disabled"
      :init="einit"
      @onInit="handleInit"
    />
  </div>
</template>

<script>
import { Message as message } from 'element-ui'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/imagetools'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/link'// 插入链接
import 'tinymce/plugins/code'// 插入代码
import 'tinymce/plugins/preview'// 插入预览
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/fullscreen' // 全屏
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/skins/ui/oxide/skin.min.css' // 富文本样式
import 'tinymce/icons/default' // 富文本样式
import 'tinymce/themes/mobile/theme'
// 配置富文本
import 'tinymce/themes/silver/theme.min.js' // 引入富文本的主要脚本
export default {
  name: 'App',
  components: { Editor },
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      myValue: this.value,
      einit: {
        zIndex: 999999,
        placeholder: '请输入内容',
        skin_url: require('@/assets/skins/ui/oxide/skin.min.css'),
        language_url: require('@/assets/langs/zh_CN.js'),
        language: 'zh_CN',
        height: 400,
        object_resizing: 'img',
        menubar: true,
        branding: false,
        paste_data_images: true, // 允许粘贴图像
        toolbar: 'fullscreen | undo redo | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
        toolbar_drawer: 'sliding',
        quickbars_selection_toolbar: 'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
        plugins: ['table lists link image imagetools code codesample anchor emoticons wordcount preview fullpage fullscreen']
        }
      },
      content: '',
      isPreView: false,
      tinymceEdit: null
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted() {
    tinymce.init()
  },
  methods: {
    handleInit(event, editor) {
      // 重点:初始化的时候把 editor 对象保存,方便调用API
      this.tinymceEdit = editor
    }
  }
}
</script>

业务代码:

<template>

...
    <Editor
      ref="EditorRef"
      v-model="reportForm.conclusion"
    />
    
    <el-button type="text" @click="handleCopyCode">

...
</template>

<script>
...
methods:{
 // 复制代码和结果
    handleCopyCode() {

      // 新增直接赋值
      if (conclusion.length === 0) {
        this.reportForm.conclusion = `
        运行代码:<br /><pre>${code}</pre><br /><br />运行结果:<br /><pre>${CompileResultsOutput}</pre>
        `
      } else {
        // 有内容就追加
        this.reportForm.conclusion += `<br /><br />
        运行代码:<br /><pre>${code}</pre><br /><br />运行结果:<br /><pre>${CompileResultsOutput}</pre>
        `
      }

      // 重点光标插入到最后
      const tinymceEdit = this.$refs.EditorRef.tinymceEdit
      tinymceEdit.execCommand('selectAll')
      tinymceEdit.selection.getRng().collapse(false)
      tinymceEdit.focus()
      // 在最后添加一个 空格,触发滚动条
      tinymceEdit.insertContent('')
    }
}
</script>