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>