2013-08-31 2 views
1

Вот нестандартная HTML элемент, который я определил (AngularJS делает это легко):CKEditor 4 и нестандартная HTML элемент

<exercise id="Sample Exercise" language="Scala" lectureId="5437"> This is the text of the lecture </exercise>

Если я использую этот элемент в HTML документе, каждый раз, когда я переключаюсь с CKEditor-х визуализации режима в режим источника новый пустой абзац добавляется между каждым из блоков элементов в документе:

<p>&nbsp;</p> 

2-й раз я переключаюсь, я получаю две вставки:

<p>&nbsp;</p> 

<p>&nbsp;</p> 

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

<p>&nbsp;</p> 

<p>&nbsp;</p> 

<p>&nbsp;</p> 

Может кто-нибудь предложить обходной путь?

+3

Зачем нужно составлять элемент HTML? Какую цель он выполняет, как это делается? Является ли использование обычного элемента с определенным классом не приемлемой альтернативой? –

+1

Я не буду вникать в эту дискуссию –

+2

Shrug - это ваши похороны, я думаю. Я думаю, что это вызовет больше проблем с CKEditor, чем это стоит. Я бы рассмотрел элемент-заполнитель (который может быть легко преобразован в элемент '' после редактирования) –

ответ

0

Мне казалось, что проще избежать пользовательских элементов, поэтому я использовал атрибуты данных HTML5.

<div class="exercise" data-id="Challenge #42" data-language="Scala" data-lectureid="5437"> 
    <p>Create a program that outputs the meaning of life, the universe, and everything.</p></div> 

Это сработало. Возможно, более высокая интеграция между CKEditor и AngularJS будет развиваться со временем.

1

Вопрос Pekka очень хороший - зачем вам загружать пользовательский элемент в CKEditor? Ни браузеры (которые выполняют часть WYSIWYG-редактирования), а не CKEditor (который делает другую часть) знают, как обрабатывать этот элемент, что это значит, как его отображать и как функции редактирования должны работать вокруг него. Например, если я понял ваш вопрос, вы написали около <exercise>, что это элемент блока. Как CKEditor и браузеры знают, что это элемент блока? : |

Второе, что вы должны понимать, это то, что CKEditor не является создателем веб-сайта WYSIWYG, а редактором «документов». Его содержание должно иметь для него смысл, и этот тег не будет иметь его.

В любом случае, если вы должны идти этим путем, есть некоторые вещи, которые вы можете сделать.

Вот два ответа, которые могут дать вам представление о том, что вы можете сделать: CKEditor strips <i> Tag.

Если вы решите не защитить источник ваших <exercise> тегов, но и сделать их, то вы также должны знать о CKEDITOR.dtd объекта, который я описал кратко здесь: ckeditor how to allow for .insertHtml("<customTag myAttr='value'"></customTag>").

+0

http://blog.angularjs.org/2012/05/custom-components-part-1.html –

+0

И? ............ – Reinmar

Смежные вопросы