tinymce vue 部分工具不显示_在vue中使用tinymce组件

本文介绍了如何在Vue项目中引入和配置TinyMCE编辑器,包括加载语言包、主题、图片插件和工具栏设置。同时,文中提到通过file_browser_callback函数处理文件上传,确保图片和媒体的正常插入。然而,遇到了部分工具不显示的状况,可能需要进一步排查编辑器的配置或依赖引入是否完整。
摘要由CSDN通过智能技术生成

import tinymce from'../../static/tinymce/tinymce.min.js';

import'../../static/tinymce/themes/modern/theme';

import'../../static/tinymce/plugins/image/plugin';

import'../../static/tinymce/plugins/imagetools/plugin';

import $ from'jquery';

exportdefault{

components: {

Editor

},

data() {return{

editor:null,

init: {

language_url:'/static/tinymce/langs/zh_CN.js',

language:'zh_CN',

skin_url:'/static/tinymce/skins/lightgray',

height:100,

plugins:"image imagetools",

image_caption:true,

image_advtab:true,//content_css: [

//'/alitech/static/css/github-markdown.css',],

//menubar: "insert",

//image_list:[],

//plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',

//toolbar:

//'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',

branding:false,

file_browser_callback:function(field_name, url, type, win) {

console.log(field_name);if(type== 'media')return false;varaccept={

image:'image/png, image/gif, image/jpg, image/jpeg',

media:'audio/mpeg, audio/wav, video/mp4, video/webm, video/ogg'};vareleFile=$('');

eleFile.click();

eleFile.on('change',function() {varfile= this.files[0];varname=file.name|| 'screenshot.png';vardata= newFormData();

data.append('file', file, name);

$.ajax('/oss/upload.json', {

data: data,

type:'POST',

processData:false,

contentType:false}).done(function(res) {if(res.code== 200) {

$('#' +field_name).val(res.data.url);

}else{

alert(res.message);

}

}).fail(function(xhr) {if(xhr.responseText) {

alert(xhr.responseText);

}

});

});

}

},

};

},

methods: {

},

mounted() {

},

created() {

}

};

#tinymce{position:relative;z-index:0;margin-bottom:50px;.w-e-text-container{

height:500px!important;resize:vertical;

}}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值