2

Привет всем, я в настоящее время работаю над созданием CMS для клиента, где страница редактирования выглядит точно, как и рендеринговая страница.Какие-нибудь контентные подключаемые плагины для Firefox/Webkit?

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

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

Если у вас нет предложений для редактора, то можете ли вы помочь мне решить эту проблему? То, как я установил его первым должен был проверить событие OnKeyUp, а затем использовать ExecCommand «расстегнуть», а затем insertHtml «< бр />»

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

В идеале я бы даже не хотел, чтобы текстовый блок был инкапсулирован в тег < p> для целей SEO, но я тоже не смог его решить.

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

ответ

0

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

2

Редактор Aloha хорош. Погугли это.

+0

@Nikhil Благодарность за голосование. Я также написал KitGUI.com, который является CMS, который имеет на редактирование страницы. Вы можете видеть это в моем профиле. Я использую редактор Aloha как свою конечную цель с точки зрения того, насколько он богат на странице. У меня есть встроенный редактор, но он очень простой. –

0

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

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

Опция Init:

$('#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

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

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