KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果。不仅结构小巧,而且功能强大,最主要的是它采用插件的开发管理方式,能很容易再它的基础上添加插件来实现自己的功能。但是他支持flash和embed插入视频,公司的需求是插入video视频,有MP4远程视频地址、webm远程视频地址、缩略图远程地址;
1.KindEditor插件开发(官网有个小例子,好吧,还能再小点吗?)
基本上添加一个插件要做这几部:
.ke-icon-插件名{
background-image: url(../skins/default/default.gif); // 可以修改图片,把你需要的图标ps进去 background-position: 0px -672px; //通过背景定位,显示到想要的图片 width: 16px; height: 16px; }
添加plugins/插件名/件名.js文件
一个简单插件的基本流程,当然也可以像官方案例一样,不动源文件,写在外边!
2. video视频插件插件开发,我也就不谈遇到的坑了,就直接亮代码说作用了!
为了省时间,和轻松,我是直接将KindEditor的media插件该为 实现video的,因为写的匆忙,还有下一个要完成,所以实现上就没有进行优化,只是遇河搭桥,见缝插针;
现在开始正题:
因为用的原插件,所以虚有其表的工作就不用做了,直接编辑插件
将media/media.js和kindeditor-min.js改成下面这样
KindEditor.plugin('media', function(K) {
var self = this, name = 'media', lang = self.lang(name + '.');
self.plugin.media = {
edit : function() {
var html = [
'',
//url
'',
'',
' ',
' ',
' ',
'',
//Webm地址
'',
'',
'',
'',
//缩略图地址
'',
'',
'',
'',
// //autostart
// '',
// '',
// ' ',
// '',
''
].join('');
var dialog = self.createDialog({
name : name,
width : 450,
height : 230,
title : self.lang(name),
body : html,
yesBtn : {
name : self.lang('yes'),
click : function(e) {
var url = K.trim(urlBox.val()),
width = widthBox.val(),
height = heightBox.val();
if (url == 'http://' || K.invalidUrl(url)) {
alert(self.lang('invalidUrl'));
urlBox[0].focus();
return;
}
if (width == 'http://' || K.invalidUrl(width)) {
alert(self.lang('invalidUrl'));
widthBox[0].focus();
return;
}
if (height == 'http://' || K.invalidUrl(height)) {
alert(self.lang('invalidUrl'));
heightBox[0].focus();
return;
}
var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
src : url,
type : width,
poster : height
});
self.insertHtml(html).hideDialog().focus();
}
}
}),
div = dialog.div,
urlBox = K('[name="url"]', div),
widthBox = K('[name="width"]', div),
heightBox = K('[name="height"]', div);
var img = self.plugin.getSelectedMedia();
if (img) {
urlBox.val(img.attr('alt'));
widthBox.val(img.attr('title'));
heightBox.val(img.attr('src'));
}
urlBox[0].focus();
urlBox[0].select();
},
'delete' : function() {
self.plugin.getSelectedMedia().remove();
// [IE] 删除图片后立即点击图片按钮出错
self.addBookmark();
}
};
self.clickToolbar(name, self.plugin.media.edit);
});
/* KindEditor 4.1.10 (2013-11-23), Copyright (C) kindsoft.net, Licence: http://www.kindsoft.net/license.php */
(function(w, i) {
function Z(a) {
if (!a) return ! 1;
return Object.prototype.toString.call(a) === "[object Array]"
}
function wa(a) {
if (!a) return ! 1;
return Object.prototype.toString.call(a) === "[object Function]"
}
function J(a, b) {
for (var c = 0,
d = b.length; c < d; c++) if (a === b[c]) return c;
return - 1
}
function m(a, b) {
if (Z(a)) for (var c = 0,
d = a.length; c < d; c++) {
if (b.call(a[c], c, a[c]) === !1) break
} else for (c in a) if (a.hasOwnProperty(c) && b.call(a[c], c, a[c]) === !1) break
}
function B(a) {
return a.replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "")
}
function xa(a, b, c) {
c = c === i ? ",": c;
return (c + b + c).indexOf(c + a + c) >= 0
}
function s(a, b) {
b = b || "px";
return a && /^\d+$/.test(a) ? a + b: a
}
function t(a) {
var b;
return a && (b = /(\d+)/.exec(a)) ? parseInt(b[1], 10) : 0
}
function C(a) {
return a.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """)
}
function fa(a) {
return a.replace(/</g, "<").replace(/>/g, ">").replace(/"/g, '"').replace(/&/g, "&")
}
function ga(a) {
var b = a.split("-"),
a = "";
m(b,
function(b, d) {
a += b > 0 ? d.charAt(0).toUpperCase() + d.substr(1) : d
});
return a
}
function ya(a) {
function b(a) {
a = parseInt(a, 10).toString(16).toUpperCase();
return a.length > 1 ? a: "0" + a
}
return a.replace(/rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/ig,
function(a, d, e, g) {
return "#" + b(d) + b(e) + b(g)
})
}
function u(a, b) {
var b = b === i ? ",": b,
c = {},
d = Z(a) ? a: a.split(b),
e;
m(d,
function(a, b) {
if (e = /^(\d+)\.\.(\d+)$/.exec(b)) for (var d = parseInt(e[1], 10); d <= parseInt(e[2], 10); d++) c[d.toString()] = !0;
else c[b] = !0
});
return c
}
function Ja(a, b) {
return Array.prototype.slice.call(a, b || 0)
}
function l(a, b) {
return a === i ? b: a
}
function E(a, b, c) {
c || (c = b, b = null);
var d;
if (b) {
var e = function() {};
e.prototype = b.prototype;
d = new e;
m(c,
function(a, b) {
d[a] = b
})
} else d = c;
d.constructor = a;
a.prototype = d;
a.parent = b ? b.prototype: null
}
function eb(a) {
var b;
if (b = /\{[\s\S]*\}|\[[\s\S]*\]/.exec(a)) a = b[0];
b = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
b.lastIndex = 0;
b.test(a) && (a = a.replace(b,
function(a) {
return "\\u" + ("0000" + a.charCodeAt(0).toString(16)).slice( - 4)
}));
if (/^[\],:{}\s]*$/.test(a.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]").replace(/(?:^|:|,)(?:\s*\[)+/g, ""))) return eval("(" + a + ")");
throw "JSON parse error";
}
function Rb(a, b, c) {
a.addEventListener ? a.addEventListener(b, c, fb) : a.attachEvent && a.attachEvent("on" + b, c)
}
function za(a, b, c) {
a.removeEventListener ? a.removeEventListener(b, c, fb) : a.detachEvent && a.detachEvent("on" + b, c)
}
function gb(a, b) {
this.init(a, b)
}
function hb(a) {
try {
delete a[$]
} catch(b) {
a.removeAttribute && a.removeAttribute($)
}
}
function aa(a, b, c) {
if (b.indexOf(",") >= 0) m(b.split(","),
function() {
aa(a, this, c)
});
else {
var d = a[$] || null;
d || (a[$] = ++ib, d = ib);
v[d] === i && (v[d] = {});
var e = v[d][b];
e && e.length > 0 ? za(a, b, e[0]) : (v[d][b] = [], v[d].el = a);
e = v[d][b];
e.length === 0 && (e[0] = function(b) {
var c = b ? new gb(a, b) : i;
m(e,
function(b, d) {
b > 0 && d && d.call(a, c)
})
});
J(c, e) < 0 && e.push(c);
Rb(a, b, e[0])
}
}
function ha(a, b, c) {
if (b && b.indexOf(",") >= 0) m(b.split(","),
function() {
ha(a, this, c)
});
else {
var d = a[$] || null;
if (d) if (b === i) d in v && (m(v[d],
function(b, c) {
b != "el" && c.length > 0 && za(a, b, c[0])
}), delete v[d], hb(a));
else if (v[d]) {
var e = v[d][b];
if (e && e.length > 0) {
c === i ? (za(a, b, e[0]), delete v[d][b]) : (m(e,
function(a, b) {
a > 0 && b === c && e.splice(a, 1)
}), e.length == 1 && (za(a, b, e[0]), delete v[d][b]));
var g = 0;
m(v[d],
function() {
g++
});
g < 2 && (delete v[d], hb(a))
}
}
}
}
function jb(a, b) {
if (b.indexOf(",") >= 0) m(b.split(","),
function() {
jb(a, this)
});
else {
var c = a[$] || null;
if (c) {
var d = v[c][b];
if (v[c] && d && d.length > 0) d[0]()
}
}
}
function Ka(a, b, c) {
b = /^\d{2,}$/.test(b) ? b: b.toUpperCase().charCodeAt(0);
aa(a, "keydown",
function(d) {
d.ctrlKey && d.which == b && !d.shiftKey && !d.altKey && (c.call(a), d.stop())
})
}
function ba(a) {
for (var b = {},
c = /\s*([\w\-]+)\s*:([^;]*)(;|$)/g,
d; d = c.exec(a);) {
var e = B(d[1].toLowerCase());
d = B(ya(d[2]));
b[e] = d
}
return b
}
function I(a) {
for (var b = {},
c = /\s+(?:([\w\-:]+)|(?:([\w\-:]+)=([^\s"'<>]+))|(?:([\w\-:"]+)="([^"]*)")|(?:([\w\-:"]+)='([^']*)'))(?=(?:\s|\/|>)+)/g,
d; d = c.exec(a);) {
var e = (d[1] || d[2] || d[4] || d[6]).toLowerCase();
b[e] = (d[2] ? d[3] : d[4] ? d[5] : d[7]) || ""
}
return b
}
function Sb(a, b) {
return a = /\s+class\s*=/.test(a) ? a.replace(/(\s+class=["']?)([^"']*)(["']?[\s>])/,
function(a, d, e, g) {
return (" " + e + " ").indexOf(" " + b + " ") < 0 ? e === "" ? d + b + g: d + e + " " + b + g: a
}) : a.substr(0, a.length - 1) + ' class="' + b + '">'
}
function Tb(a) {
var b = "";
m(ba(a),
function(a, d) {
b += a + ":" + d + ";"
});
return b
}
function ia(a, b, c, d) {
function e(a) {
for (var a = a.split("/"), b = [], c = 0, d = a.length; c < d; c++) {
var e = a[c];
e == ".." ? b.length > 0 && b.pop() : e !== "" && e != "." && b.push(e)
}
return "/" + b.join("/")
}
function g(b, c) {
if (a.substr(0, b.length) === b) {
for (var e = [], h = 0; h < c; h++) e.push("..");
h = ".";
e.length > 0 && (h += "/" + e.join("/"));
d == "/" && (h += "/");
return h + a.substr(b.length)
} else if (f = /^(.*)\//.exec(b)) return g(f[1], ++c)
}
b = l(b, "").toLowerCase();
a.substr(0, 5) != "data:" && (a = a.replace(/([^:])\/\//g, "$1/"));
if (J(b, ["absolute", "relative", "domain"]) < 0) return a;
c = c || location.protocol + "//" + location.host;
if (d === i) var h = location.pathname.match(/^(\/.*)\//),
d = h ? h[1] : "";
var f;
if (f = /^(\w+:\/\/[^\/]*)/.exec(a)) {
if (f[1] !== c) return a
} else if (/^\w+:/.test(a)) return a;
/^\//.test(a) ? a = c + e(a.substr(1)) : /^\w+:\/\//.test(a) || (a = c + e(d + "/" + a));
b === "relative" ? a = g(c + d, 0).substr(2) : b === "absolute" && a.substr(0, c.length) === c && (a = a.substr(c.length));
return a
}
function U(a, b, c, d, e) {
a == null && (a = "");
var c = c || "",
d = l(d, !1),
e = l(e, "\t"),
g = "xx-small,x-small,small,medium,large,x-large,xx-large".split(","),
a = a.replace(/(<(?:pre|pre\s[^>]*)>)([\s\S]*?)(<\/pre>)/ig,
function(a, b, c, d) {
return b + c.replace(/<(?:br|br\s[^>]*)>/ig, "\n") + d
}),
a = a.replace(/<(?:br|br\s[^>]*)\s*\/?>\s*<\/p>/ig, ""),
a = a.replace(/(<(?:p|p\s[^>]*)>)\s*(<\/p>)/ig, "$1
$2"),
a = a.replace(/\u200B/g, ""),
a = a.replace(/\u00A9/g, "©"),
a = a.replace(/\u00AE/g, "®"),
a = a.replace(/<[^>]+/g,
function(a) {
return a.replace(/\s+/g, " ")
}),
h = {};
b && (m(b,
function(a, b) {
for (var c = a.split(","), d = 0, e = c.length; d < e; d++) h[c[d]] = u(b)
}), h.script || (a = a.replace(/(<(?:script|script\s[^>]*)>)([\s\S]*?)(<\/script>)/ig, "")), h.style || (a = a.replace(/(<(?:style|style\s[^>]*)>)([\s\S]*?)(<\/style>)/ig, "")));
var f = [],
a = a.replace(/(\s*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?:\s+[\w\-:]+=[^\s"'<>]+)|(?:\s+[\w\-:"]+="[^"]*")|(?:\s+[\w\-:"]+='[^']*'))*)(\/)?>(\s*)/g,
function(a, n, q, r, K, ja, i) {
var n = n || "",
q = q || "",
l = r.toLowerCase(),
o = K || "",
r = ja ? " " + ja: "",
i = i || "";
if (b && !h[l]) return "";
r === "" && kb[l] && (r = " /");
lb[l] && (n && (n = " "), i && (i = " "));
La[l] && (q ? i = "\n": n = "\n");
d && l == "br" && (i = "\n");
if (mb[l] && !La[l]) if (d) {
q && f.length > 0 && f[f.length - 1] === l ? f.pop() : f.push(l);
i = n = "\n";
K = 0;
for (ja = q ? f.length: f.length - 1; K < ja; K++) n += e,
q || (i += e);
r ? f.pop() : q || (i += e)
} else n = i = "";
if (o !== "") {
var z = I(a);
if (l === "font") {
var L = {},
F = "";
m(z,
function(a, b) {
if (a === "color") L.color = b,
delete z[a];
a === "size" && (L["font-size"] = g[parseInt(b, 10) - 1] || "", delete z[a]);
a === "face" && (L["font-family"] = b, delete z[a]);
a === "style" && (F = b)
});
F && !/;$/.test(F) && (F += ";");
m(L,
function(a, b) {
b !== "" && (/\s/.test(b) && (b = "'" + b + "'"), F += a + ":" + b + ";")
});
z.style = F
}
m(z,
function(a, d) {
Ub[a] && (z[a] = a);
J(a, ["src", "href"]) >= 0 && (z[a] = ia(d, c)); (b && a !== "style" && !h[l]["*"] && !h[l][a] || l === "body" && a === "contenteditable" || /^kindeditor_\d+$/.test(a)) && delete z[a];
if (a === "style" && d !== "") {
var e = ba(d);
m(e,
function(a) {
b && !h[l].style && !h[l]["." + a] && delete e[a]
});
var g = "";
m(e,
function(a, b) {
g += a + ":" + b + ";"
});
z.style = g
}
});
o = "";
m(z,
function(a, b) {
a === "style" && b === "" || (b = b.replace(/"/g, """), o += " " + a + '="' + b + '"')
})
}
l === "font" && (l = "span");
return n + "<" + q + l + o + r + ">" + i
}),
a = a.replace(/(<(?:pre|pre\s[^>]*)>)([\s\S]*?)(<\/pre>)/ig,
function(a, b, c, d) {
return b + c.replace(/\n/g, '\n') + d
}),
a = a.replace(/\n\s*\n/g, "\n"),
a = a.replace(/\n/g, "\n");
return B(a)
}
function nb(a, b) {
a = a.replace(//ig, "").replace(//ig, "").replace(/"];
Z(c) || (c = [c]);
m(c,
function(a, b) {
b && e.push('')
});
d && e.push("");
e.push("