Какие-нибудь спорные плагины для Firefox / Webkit - PullRequest
Новая
       24

Какие-нибудь спорные плагины для Firefox / Webkit

2 голосов
/ 02 июля 2010

Привет всем, я сейчас работаю над созданием CMS для клиента, где страница редактирования выглядит точно , как отображаемая страница.

Следовательно, я не хочу WYSIWYG на основе iframe, я ищу что-то вроде оболочки для contenteditable , которая устраняет различия между Firefox и Webkit.

Например, «нажатие клавиши Enter» в Firefox приводит к тегу
, в то время как то же событие в Webkit приводит к его заключению в тег .

Если у вас нет предложений для редактора, то можете ли вы помочь мне решить эту проблему? Сначала я исправил это, проверив событие onkeyup , а затем использовал команду execCommand " undo ", а затем insertHtml"
"

Это хорошо работает, но проблема в том, что если пользователь находится в списке и нажимает клавишу ввода, он ожидает, что будет создан следующий элемент списка, но в итоге получится разрыв строки. Как определить местоположение каретки при нажатии клавиши ввода, чтобы можно было пропустить
режим вставки?

В идеале я бы даже не хотел, чтобы
текстовый блок инкапсулировался в тег

для целей SEO, но я также не смог решить эту проблему.

Любая помощь будет принята с благодарностью!

Ответы [ 4 ]

2 голосов
/ 22 апреля 2011

Алоха редактор это хорошо.Google это.

0 голосов
/ 24 августа 2012

Это сложная область, с которой вы будете бороться, чтобы получить права. Кроме того, если вы разрешаете пользователям вставлять содержимое, то использование iFrame - лучший способ обеспечить достоверные результаты и не испортить страницу.

Aloha редактор, TinyMCE и т. Д. Довольно большой и раздутый. Я предлагаю вам взглянуть на WYSIHTML5 https://github.com/xing/wysihtml5, http: www.createjs.org или что-то более простое https://github.com/mquan/freshereditor, однако я не рекомендую этот упрощенный подход.

0 голосов
/ 18 июня 2012

В исходном коде TinyMCE v3.5.2 имеется свойство конфигурации с именем content_editable. Этот флаг предотвращает рендеринг iframe. Опубликованная документация ничего не говорит об этом флаге. Я предполагаю, что это потому, что флаг, возможно, не был глубоко проверен.

Я вызвал TinyMCE на contenteditable div и отключил весь пользовательский интерфейс TinyMCE. Базовая функциональность работает нормально.

Параметры инициализации: 

$('#editor').tinymce({
        script_url: '/tinymcecustom/tiny_mce_jquery.js',
        content_editable: true,
        theme: "simple"
    });

HTML-наценка: 

<div id="editor" contenteditable="true" style="height: 900px"></div>

EditorTemplate.js (внутри папки темы): 

(function () {
tinymce.create('tinymce.themes.SimpleTheme', {
    init: function (ed, url) {
        this.editor = ed;
    },
    renderUI: function (o) {
        return {
            editorContainer: this.editor.id
        };
    }
});
tinymce.ThemeManager.add('simple', tinymce.themes.SimpleTheme); })();
0 голосов
/ 02 июля 2010

Между браузерами очень много различий, когда дело доходит до редактирования контента. Я не знаю ни одной библиотеки, которая устраняла бы все различия, и я подозреваю, что любой, кто пишет такую ​​библиотеку, просто напишет редактор WYSIWYG на основе браузера. В таком случае вам лучше всего посмотреть, как это делают крупные редакторы с открытым исходным кодом, такие как TinyMCE и CKEditor .

...