CKeditor Preview Plugin.js, редактирование для Chrome и IE. Поскольку он отказывается от стиля CSS

Я интегрирую редактор WYSIWYG для довольно простой CMS. Я выбрал CKeditor и использую кнопку «Предварительный просмотр». Дело в том, что он несовместим в трех основных браузерах. (IE, Chrome и Firefox).

Если вы когда-либо использовали CKeditor, вы знаете, что в прилагаемых к нему файлах есть два места, где можно найти «preview.html». Это:

http://sitename/ckeditor/plugins/preview

а также

http://sitename/ckeditor/_source/plugins/preview

Последний также содержит файл plugin.js, который относится к плагину предварительного просмотра, и где, как мне кажется, лежит ответ на мой вопрос. Этот код можно найти здесь:

http://jsfiddle.net/keKLP/

Просто так, чтобы вы могли это видеть. Теперь проблема в том, что предварительный просмотр по умолчанию представляет собой просто текст. Поэтому я отредактировал страницы preview.html и обернул часть кода, извлекающего содержимое из редактора, в HTML, включая ссылки на таблицы стилей и пути к изображениям. В Firefox это работает нормально, но только в Firefox. В хроме и IE не тянет ни стилей, ни картинок, ничего. Когда я заглянул в него, я заметил, что предварительный просмотр Firefox открывает новое окно, указывающее на фактический адрес. Адрес:

http://mysite.co.uk/ckeditor/plugins/preview/preview.html

где, поскольку IE и Chrome открывают новое окно/вкладку, указывающую на:

about:blank

Просматривая этот файл JavaScript (plugin.js), указанный выше, я вижу, что он делает что-то другое для Firefox, чем для других браузеров. Я изменил почти все, что говорит «путь» или «URL» в файле, пытаясь заставить его указывать на то же место, что и Firefox в других браузерах, а не на about:blank.

Однако я не эксперт по JavaScript и чувствую, что мне не хватает понимания точной проблемы. Это сводит меня с ума, может ли кто-нибудь указать мне немного JavaScript в этом файле, на который я должен смотреть, или пролить свет на проблему? ЛЮБАЯ помощь очень ценится.


javascript plugins preview ckeditor
person Bohdi    schedule 07.09.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Существует возможный способ отследить файл .js плагинов предварительного просмотра и попытаться отредактировать способ, которым он вызывает всплывающее окно предварительного просмотра. Однако это многословно и проблематично, так как в firefox всегда работает лучше, чем в любом другом браузере.

Мое решение состояло в том, чтобы удалить ckeditor и внедрить TinyMCE. Страница предварительного просмотра намного проще редактировать и не вызывает никаких проблем.

person Bohdi    schedule 17.09.2012

arrow_upward
1
arrow_downward

Я решил эту проблему, добавив свои собственные файлы (css, js, meta и т. д.) в ckeditor.js. Я создал строковую переменную, содержащую html-код (со ссылкой, метаданными, скриптами) следующим образом:

var my_includefiles='<link href="http://assets.mydomain.com/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /><link href="http://assets.mydomain.com/css/mainstyle.css" rel="stylesheet" type="text/css" charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>';

И я только что добавил свою переменную в эту часть кода (часть _cke_htmlToLoad):

a=a.config.docType+'<html dir="'+a.config.contentsLangDirection+'"><head>'+e+CKEDITOR.tools.buildStyleHtml(a.config.contentsCss)+my_includefiles+"<title>"+a.lang.preview.preview+"</title></head>"+(b+">")+a.getData()+"</body></html>"

После этого предварительный просмотр с моими собственными стилями и поведением отлично работал в IE9, FF19, Opera12, но не в Chrome (25), поэтому, чтобы заставить его работать в Chrome, я удалил эту часть кода ckeditor.js.

CKEDITOR.env.webkit&&setTimeout(function(){f.body.innerHTML=f.body.innerHTML+""},0)

Это решило проблему. Я надеюсь, что это поможет.

person Dıego Edwαrd    schedule 26.03.2013