kindeditor使用可能遇到的问题

1. 音视频上传不能播放问题(使用自定义video标签)

更改kindeditor-all-min.js中的_mediaImg方法

function _mediaImg(blankPath, attrs) {
 
    if (attrs.src.indexOf(".mp4")!=-1||attrs.src.indexOf(".webm")!=-1) {
        var html = '<video controls="" width="500px;" class="' + _mediaClass(type) + '" ';
        html += '><source src="' + attrs.src + '" data-ke-src="'+attrs.src+'" >'
        html += '</video>';
        return html;
    }
    
}

2. 获取不到编辑框内容

 ps: afterBlur: function () { this.sync(); },//编辑器失去焦点(blur)时执行的回调函数。

网上说,当Ajax提交表单时,textarea的value还是空的,需要使用sync()去同步HTML数据。

经测试无用,这里记录一下。

var editor1 ;

editor1 = K.create('#kindeditor01', {
            cssPath : 'js/kindeditor/plugins/code/prettify.css',  //
            uploadJson : 'js/lkindeditor/jsp/upload_json.jsp', //  上传配置
            fileManagerJson : 'js/kindeditor/jsp/file_manager_json.jsp', //
            allowFileManager : true,
            filterMode :false,
            afterCreate : function() {
                var self = this;
                K.ctrl(document, 13, function() {
                    self.sync();
                    document.forms['example'].submit();
                });
                K.ctrl(self.edit.doc, 13, function() {
                    self.sync();
                    document.forms['example'].submit();
                });
            }
        });
var html =   editor1 .html();    //获取内容

3. 设置编辑框内容

KindEditor.html('#kindeditor01', ‘内容’);   //设置内容

4. 样式冲突

css冲突,设置kindeditor样式的优先级

5. 按钮单独调用kindeditor上传单图片并预览

html代码:

<p><input type="hidden" id="url1" name="IDCardPicture1" value="" /> <input type="button" id="image1" value="选择图片" style="width: 150px;height: 30px;" /></p>
<div id="J_imageView1"></div>

JS代码:

K('#image1').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
showRemote : false,
imageUrl : K('#url1').val(),
clickFn : function(url, title, width, height, border, align) {
$("#licensecheck").html("");
var div = K('#J_imageView1');
div.html('');
div.append('<img src="' +url + '">');
K('#url1').val(url);
editor.hideDialog();
}
});
});
});

5. 其他配置正确,上传文件报错405,将kindeditor文件夹放在项目web根目录下即可。(ps:可能是js冲突)

6. 弹出框引用kindeditor,导致上传图片框在弹出框后面,以及不能点击,无法获取焦点等问题

   在kindeditor-all-min.js文件中找到如下方法,加入那两句有注释的代码

function KWidget(options) {
	this.init(options);
}
_extend(KWidget, {
	init : function(options) {
		$("#layui-layer-shade1").hide();   //隐藏遮罩层,解决图片上传框不能点击
		var self = this;
		self.name = options.name || '';
		...
		}
		if (self.z) {
			self.div.css({
				position : 'absolute',
				left : self.x,
				top : self.y,
				'z-index' : self.z*100     //调大z-index值,确保图片上传框在弹出框前面
			});
		}
        ...

8. KindEditor 和 jQuery-easyui ,layui.layer插件有冲突,不显示或者不能编辑的问题

   在 js加入

var editor1 = KindEditor.create('textarea[name="xxxxxxxxxxxxxxxxxxx"]', {
  allowFileManager : true
 });

会出现 编辑器 但是无法编辑

切换到html格式可以编辑 但是又切回去的时候 报这个错误

Uncaught TypeError: Cannot call method 'getSelection' of undefined

解决办法:

要在dialog 开打之后,在加载,即 onOpen事件, 关闭后注销 onOpen: function (event, ui) {
// 打开Dialog后创建编辑器

 layui.layer.open({
	                title: '<i class="glyphicon glyphicon-edit"></i> 编辑公司信息',
	                type: 1,
	                area:["1000px","600px"],
	                content: $('#kindWindow'),	
	                success: function(layero, index){
                        //打开Dialog后创建
	                	var editor1 = KindEditor.create('textarea[name="content1"]', {
	    				cssPath : '${ctx }/kindeditor/plugins/code/prettify.css',
	    				uploadJson : '${ctx }/kindeditor/jsp/upload_json.jsp',
	    				fileManagerJson : '${ctx }/kindeditor/jsp/file_manager_json.jsp',
	    				allowFileManager : true,
	    				afterCreate : function() {
	    					KindEditor.html('[name="content1"]', '');
	    				}
	    			});
	    			    prettyPrint();  
	                },
	                end:function(){
	                	// 关闭Dialog前移除编辑器
	                	KindEditor.remove('[name="content1"]');
	                },
	                btn: ['确认', '取消'],
	                btn1: function (index, layero) {
	                    layui.layer.msg('确认');
	                },
	                btn2: function (index, layero) {
	                    layui.layer.msg('取消');
	                }
	            });

 

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值