refine tinymce

This commit is contained in:
Pan 2017-09-01 10:04:08 +08:00
parent d56cd59474
commit 6a8a02f839
2 changed files with 13 additions and 13 deletions

View File

@ -1,6 +1,6 @@
<template>
<div class='tinymce-container editor-container'>
<textarea class='tinymce-textarea' :id="id"></textarea>
<textarea class='tinymce-textarea' :id="tinymceId"></textarea>
<div class="editor-custom-btn-container">
<editorImage color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
</div>
@ -15,8 +15,7 @@ export default {
components: { editorImage },
props: {
id: {
type: String,
default: 'tinymceEditor'
type: String
},
value: {
type: String,
@ -29,12 +28,6 @@ export default {
return ['removeformat undo redo | bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p media link | alignleft aligncenter alignright']
}
},
data() {
return {
hasChange: false,
hasInit: false
}
},
menubar: {
default: ''
},
@ -44,6 +37,13 @@ export default {
default: 360
}
},
data() {
return {
hasChange: false,
hasInit: false,
tinymceId: this.id || 'vue-tinymce-' + +new Date()
}
},
watch: {
value(val) {
if (!this.hasChange && this.hasInit) {
@ -54,7 +54,7 @@ export default {
mounted() {
const _this = this
window.tinymce.init({
selector: `#${this.id}`,
selector: `#${this.tinymceId}`,
height: this.height,
body_class: 'panel-body ',
object_resizing: false,
@ -153,12 +153,12 @@ export default {
imageSuccessCBK(arr) {
const _this = this
arr.forEach(v => {
window.tinymce.get(_this.id).insertContent(`<img class="wscnph" src="${v.url}" >`)
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
})
}
},
destroyed() {
window.tinymce.get(this.id).destroy()
window.tinymce.get(this.tinymceId).destroy()
}
}
</script>

View File

@ -2,7 +2,7 @@
<div class="components-container">
<code>公司做的后台主要是一个cms系统公司也是以自媒体为核心的所以富文本是后台很核心的功能在选择富文本的过程中也走了不少的弯路市面上常见的富文本都基本用过了最终选择了Tinymce<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader13'> 相关文章 </a> <a target='_blank' href='https://www.tinymce.com/'> 官网 </a></code>
<div>
<tinymce :height=200 ref="editor" v-model="content"></tinymce>
<tinymce :height='200' v-model="content"></tinymce>
</div>
<div class='editor-content' v-html='content'></div>
</div>