вставка из Word в FCKEditor и CKEditor с сохранением всего форматирования

Аватар пользователя z006 z006 11 ноября 2010 в 4:17

Добрый день.столкнулся с проблемой.
необходима установка визуального редактора.поставил FCKEditor.вставляю текст из вордовского файла,который уже там отформатировали,"разукрасили" и таблицы сделали.вставился.но!таблицы не на всю ширину(в ворде на всю),абзацы по-разному стали,шрифты "не те"(в ворде юзали из стандартных наборов),на таблицах надписи сменили цвет с белого на темно-серый.если еще вставка делалась не через кнопку "вставка из ворда",то и отступы между строками не реальные делает ко всему прочему.
ок,погрешил на "не современность" редактора(ну 9 месяцев,хз...),поставил последний CKEditor.картина еще веселее.мало того что он делает отступы между строками дурные,так он еще и ниодин цвет не переносит.весь текст,что был цветным,просто черный.фон таблиц-белый,ну или транспарент,хз.что больше всего удивило,то что в окошечке "вставить из ворда" весь текст идеальный,как надо.нажимаю ОК,и в основном окне редактора уже все,как я выше описал.
что за ерунда и как исправить ситуацию?
да,на всякий случай,ворд 2000

0 Thanks

Комментарии

Аватар пользователя z006 z006 11 ноября 2010 в 4:19

да,забыл упомянуть,в примере на сайте вставка в редактор CKEditor происходит точно так-же...

Аватар пользователя kodo kodo 11 ноября 2010 в 5:47

Вот самому интересно, есть ли вообще однозначный перенос форматирования из формата Ворд во что-то другое, тем более в ХТМЛ? Ну да можно документ сохранить и в верде в ХТМЛ, но там такое будет... (вообщем-то тоже самое что и в СКЕдиторе, только еще наложется Ваше форматирование) Более менее корректно переносится в ОпенОфис, но и там с таблицами большая проблема.
Так что простого копипаста с ворда не получается, форматировать прийдется уже на сайте.

Аватар пользователя Softovick Softovick 11 ноября 2010 в 8:22

А если TinyMCE попробовать? Там вроде получше... А вообще все таки форматирование для web и для документов отличается, 100% совместимости все равно не будет.

Аватар пользователя z006 z006 11 ноября 2010 в 14:20

TinyMCE решил даже не ставить,протестил на экзампле на сайте у них.точно так-же как и CKEditor ведет себя.
Опен Офис пробовал,ситуацию не спасает.

Аватар пользователя Alamir Alamir 9 декабря 2010 в 22:23

Открываем Дримвьювер, входим в режим "Дизайнер", кидаем из Worda туда, затем берем ХТМЛку из Дрима и на сайт.
Дешево и сердито:)

Аватар пользователя Softovick Softovick 9 декабря 2010 в 23:26
Alamir wrote:

Открываем Дримвьювер, входим в режим "Дизайнер", кидаем из Worda туда, затем берем ХТМЛку из Дрима и на сайт.
Дешево и сердито:)

Dreamviewer стал настолько бесплатен?

Аватар пользователя ULiX80 ULiX80 3 июля 2014 в 22:26

Добрый день.
Я сам искал ответ на этот вопрос. Увидел ответ: "Никак. Хотите точь-в-точь - вставляйте картинку.", и это меня несколько разозлило. Я не люблю, когда мне говорят "никак".

Когда что-то становится не понятно, а гугл не помогает, нужно смотреть в первоисточник... в гены! :)

Ну не настолько конечно глубоко, достаточно изучить код скриптов.
Всё оказалось банальным по умолчанию CKEditor резал при вставке SPAN теги, которые и содержат стили форматирования отдельных фрагментов. Конечно он режет не только эти элементы, но мне достаточно было вернуть SPAN чтоб я видел то что хочу, вам возможно понадобится больше, но методика одна.

Сначала я думал, что за это отвечает плагин вставки из ворда (pasteFromWord) , но теги резались до фильтрации плагином.

Ссылка на описание плагина и его параметров:
http://ckeditor.com/addon/pastefromword

Изучив работу процедур плагина я обнаружил, что текст уже на входе плагина лишён форматирования, а значит плагин тут не причем. Тем более что как раз его фильтры по умолчанию пропускают любое форматирование ворда.

А далее я обнаружил любопытный параметр устанавливающийся при инициализации CKEDITOR.

extraAllowedContent

Конкретно у меня было задано
extraAllowedContent: 'div table tr td th colgroup col style[*]{*}'

Почитать об этом и других параметрах CKEDITO можно по ссылке на оф сайте

http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent

Я в своём скрипте конфигурации изменил строчку на:
extraAllowedContent: 'span div table tr td th colgroup col style[*]{*}',

и вставил дополнительно
pasteFromWordRemoveFontStyles: false

Тем самым разрешив теги SAPN, и отключив удаление стилей плагином. Шрифты и цвет стали передаваться при вставке, как и требовалось.

Если вам нужно ещё какое-то форматирование, то принцип уже вам ясен.

Надеюсь мои изыскания помогут ещё кому-то, кто не любит как и я ответы "никак"