使用kindeditor,自定义上传组件,使图片上传到七牛云

首先,自定义组件时要么直接修改plugins下的image.js,要么就把plugins组件内容删掉,不然修改好的kindeditor-all.js会自动恢复。(采坑记,幸好我有备份,不然真的想死了)

我选择的是直接在kindeditor-all.js中修改,因为依赖到的函数也需要修改一部分。

KindEditor.plugin('image', function (K) {
	var self = this, name = 'image',
		allowImageUpload = K.undef(self.allowImageUpload, true),
		allowImageRemote = K.undef(self.allowImageRemote, true),
		formatUploadUrl = K.undef(self.formatUploadUrl, true),
		allowFileManager = K.undef(self.allowFileManager, false),
		extraParams = K.undef(self.extraFileUploadParams, {
			'token': '',//添加token
			'key':''
		}), //七牛云上传需要返回的token和key参数
		// filePostName = K.undef(self.filePostName, 'file'),
		uploadJson = K.undef(self.uploadJson, 'http://up-z2.qiniup.com') //七牛云上传url华南区
		imageTabIndex = K.undef(self.imageTabIndex, 0),
		imgPath = self.pluginsPath + 'image/images/',
		filePostName = K.undef(self.filePostName, 'file'), //七牛云上传文件类型为file
		fillDescAfterUploadImage = K.undef(self.fillDescAfterUploadImage, false),
		lang = self.lang(name + '.');
	self.plugin.imageDialog = function (options) {
		var imageUrl = options.imageUrl,
			imageWidth = K.undef(options.imageWidth, ''),
			imageHeight = K.undef(options.imageHeight, ''),
			imageTitle = K.undef(options.imageTitle, ''),
			imageAlign = K.undef(options.imageAlign, ''),
			showRemote = K.undef(options.showRemote, true),
			showLocal = K.undef(options.showLocal, true),
			tabIndex = K.undef(options.tabIndex, 0),
			clickFn = options.clickFn;
		var target = 'kindeditor_upload_iframe_' + new Date().getTime();
		var qiniuToken = '';
		var hiddenElements = [];
		for (var k in extraParams) {
			hiddenElements.push('<input type="hidden" name="' + k + '" value="' + extraParams[k] + '" />');
		}
        //html就是点击图片小按钮弹出框的html代码。'<form class="ke-upload-area ke-form"就是点击上传时的form,里面就是上传时需要的各种参数。
		var html = [
			'<div style="padding:20px;">',
			'<div class="tabs"></div>',
			'<div class="tab1" style="display:none;">',
			'<div class="ke-dialog-row">',
			'<label for="remoteUrl" style="width:60px;">' + lang.remoteUrl + '</label>',
			'<input type="text" id="remoteUrl" class="ke-input-text" name="url" value="" style="width:200px;" /> &nbsp;',
			'</div>',
			'<div class="ke-dialog-row">',
			'<label for="remoteWidth" style="width:60px;">' + lang.size + '</label>',
			lang.width + ' <input type="text" id="remoteWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> ',
			lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> ',
			'<img class="ke-refresh-btn" src="' + imgPath + 'refresh.png" width="16" height="16" alt="" style="cursor:pointer;" title=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一种流行的JavaScript框架,用于构建用户界面。KindEditor是一个富文本编辑器,可以方便地在网页中编辑和展示富文本内容。图片上传是指将用户选择的图片文件上传到服务器。 在Vue中使用KindEditor进行图片上传的步骤如下: 1. 安装KindEditor:可以通过npm或者直接下载KindEditor的源代码进行安装。 2. 在Vue组件中引入KindEditor:可以通过import语句引入KindEditor的相关文件。 3. 在Vue组件使用KindEditor:在需要使用富文本编辑器的地方,使用KindEditor提供的API进行初始化和配置。 4. 实现图片上传功能:通过配置KindEditor图片上传接口,将用户选择的图片文件上传到服务器。 以下是一个简单的示例代码: ``` <template> <div> <textarea ref="editor"></textarea> <button @click="uploadImage">上传图片</button> </div> </template> <script> import KindEditor from 'kindeditor' export default { mounted() { KindEditor.create(this.$refs.editor, { uploadJson: '/uploadImage', // 图片上传接 allowFileManager: false // 是否允许文件管理 }) }, methods: { uploadImage() { // 获取编辑器中的图片文件 const images = KindEditor.editor(this.$refs.editor).images // 将图片文件上传到服务器 // ... } } } </script> ``` 相关问题: 1. Vue是什么? 2. KindEditor是什么? 3. 如何在Vue中使用KindEditor? 4. 如何实现图片上传功能? 5. 还有其他类似的富文本编辑器可以使用吗?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值