Существует плагин iframe, встроенный в CKEditor, который позволяет вставлять iframe в редактор, но отображает довольно некрасивый заполнитель, независимо от того, что находится в iframe.Я работаю над плагином, который принимает идентификатор видео от пользователя и создает iframe, который указывает на страницу для отображения видео на нашем веб-сайте.Я хотел бы, чтобы мои пользователи увидели местозаполнитель, который дает понять, что они вставили видео:
Гадкий местозаполнитель iframe:
Довольно заполнитель видео:
Чтобы продвинуться дальше, я добавил этот кусочек Javascript в функцию onOk моего плагина.Я включил контекст:
onOk: function () {
var videoID = this.getValueOf('info', 'video_id');
var caption = this.getValueOf('info', 'caption');
var display = this.getValueOf('info', 'display');
var size = this.getValueOf('info', 'size');
var width = size * 160;
var height = size * 120;
if (videoID.length > 0) {
if (display == 0) {
e.insertHtml("<a onclick=window.open(this.href,this.target,'width=" + width + ",height=" + height + "'); return false; target=newVideo href=/kbs/Video.aspx?videoId=" + videoID + "&Width=" + width + "&Height=" + height + ">" + caption + "</a>");
} else {/*Here is the relevant code that is applied when display is set to embedded*/
var iframeNode;
//iframeNode = "<iframe height='" + (height + 40) + "' width='" + (width + 40) + "' src='/kbs/Video.aspx?videoId=1&height=" + height + "&width=" + width + "' frameBorder='0' scrolling='no'></iframe>");
iframeNode = new CKEDITOR.dom.element('iframe');
iframeNode.setAttribute('class', 'GROK-Video');
iframeNode.setAttribute('height', height+40);
iframeNode.setAttribute('width', width + 40);
iframeNode.setAttribute('src', '/kbs/Video.aspx?videoId=1&height=' + height + '&width=' + width);
iframeNode.setAttribute('frameBorder', 0);
iframeNode.setAttribute('scrolling', 'no');
var newFakeImage = e.createFakeElement(iframeNode, 'cke_GROKVideo', 'iframe', true);
e.insertElement(newFakeImage);
}
}
}
Волшебство в функции редактора createFakeElement.Он заменяет мой iframe фиктивным элементом, который отображается как любое изображение, которое я выбираю с этим битом CSS в моем plugin.js:
editor.addCss(
'img.cke_GROKVideo' +
'{' +
'background-image: url(' + CKEDITOR.getUrl(this.path + 'images/YouTubePlayButton.png') + ');' +
'background-position: center center;' +
'background-repeat: no-repeat;' +
'border: 1px solid #a9a9a9;' +
'width: 80px;' +
'height: 80px;' +
'}'
);
Что ж, я довольно далеко продвинулся, но проблема возникает, когдаисточник просмотрен.Изображение снова превращается в iframe, а плагин iframe заменяет его собственным заполнителем!Еще хуже, когда документ сохраняется и снова открывается для редактирования, происходит то же самое.Как сохранить заполнитель кнопки воспроизведения, не нарушая и не заменяя встроенный заполнитель плагина iframe?Плагин для разрыва страницы, кажется, делает нечто похожее с div, но я не уверен, как CKEditor различает div разрыва страницы и обычный div, когда он помещает поддельные элементы в редактор.Кто-нибудь пробовал что-то подобное?Я бы предпочел не создавать пользовательский элемент HTML на моем веб-сайте только для этого.