Vue.component('my-tinymce', {
props: ['value'],
data(){
return{
flag:true
}
},
watch:{
value(val){
//console.log(val);
if(this.flag){
tinymce.activeEditor.setContent(val);
}
this.flag = true;
}
},
mounted: function(){
const self = this;
tinymce.init({
target: this.$el.children[0],
//theme: 'modern',//inlite mobile modern
language: "zh_CN",
menubar: false,
branding: false,
valid_elements: "p[style],span[style],ul,ol,li,strong/b,em,h1,h2,h3,h4,h5,h6",
valid_style: {
"*":"color,font_size,text-align,line-height"
},
plugins: [ //配置插件：可自己隨意選擇，但如果是上傳本地圖片image和imagetools是必要的
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste imagetools textcolor'
],
/*表情 emoticons*/
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | preview media fullpage | forecolor backcolor | code fullscreen | formatselect | table',
// images_upload_url:basePath()+'/platform/res/upload/img',
// images_upload_base_path:'',
// images_upload_credentials:true,
setup: function(editor) {
editor.on('input undo redo execCommand', function(e) {
self.flag = false;
self.$emit('input', editor.getContent());
});
},
images_upload_handler: function (blobInfo, success, failure) {
//console.log(blobInfo);
//console.log(success);
//console.log(failure);
let formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
$.ajax({
url : basePath()+'/platform/res/upload/img',
type : "POST",
data : formData,
cache : false,
async : true,
contentType : false, // 這兩句需要添加上，否則會跳轉頁面
processData : false,
dataType : "json",
success : function(obj) {
if(obj.code == 0){
console.log(obj.data.location);
success(obj.data.location);
}else{
failure('上傳出錯了');
}
},
error : function () {
failure('上傳出錯了，圖片限制上傳最大為2M');
}
});
}
});
},
updated(){
},
created(){
},
destroyed(){
},
template: '<div><textarea style="height:300px" v-model="value"></textarea></div>'
});
自定控件 添加屬性 v-if="dialogVisible" 或者使用element-ui較新的話可以在在el-dialog 標簽上添加 :destroy-on-close="true" 關閉時dialog銷毀dialog內的控件
<el-dialog title="" :visible.sync="dialogVisible" :append-to-body="true"> <my-tinymce v-model="data" v-if="dialogVisible"></my-tinymce> </el-dialog>
這樣設置是為了關閉dialog時銷毀my-editor控件，不銷毀的話會出現問題的