CKEditor的4和非標準HTML元素

這裏是我定義的非標準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>

的第二時間I開關，我得到兩個插入：

<p>&nbsp;</p> 

<p>&nbsp;</p>

第三次我轉，我得到三個插入每塊級元素之間，等：

<p>&nbsp;</p> 

<p>&nbsp;</p> 

<p>&nbsp;</p>

任何人都可以提出一個解決辦法？

來源

2013-08-31 Mike Slinn

爲什麼需要組成一個HTML元素？它服務的目的是什麼，它是如何呈現的？使用具有特定類別的普通元素不是可行的替代方案嗎？ –

我不打算進入討論 –

聳肩 - 這是你的葬禮我猜。我認爲這會給CKEditor帶來更多麻煩，而不是值得的。我會考慮一個佔位符元素（在編輯後可以很容易地將其轉換爲「」元素） –

避免自定義元素似乎更容易，所以我使用了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之間的更大集成將隨着時間的推移而發展。

來源

2013-09-01 13:20:59

Pekka的問題非常好 - 您爲什麼需要將自定義元素加載到CKEditor中？無論是瀏覽器（執行所見即所得編輯的一部分）還是不是CKEditor（它的另一部分）都知道如何處理這個元素，它的含義，如何渲染它以及如何編輯功能。例如，如果我理解你的問題，你寫了關於<exercise>它是一個塊元素。 CKEditor和瀏覽器如何知道它是一個塊元素？：|

你應該明白的第二件事是，CKEditor不是一個所見即所得的網站建設者，而是一個「文件」編輯器。它的內容必須有它的意義，而且標籤不會有它。

無論如何，如果你必須這樣做，有一些事情你可以做。

這裏有兩個答案，可以給你一個想法你可以做什麼：CKEditor strips <i> Tag。

如果您決定不保護您的<exercise>標籤的來源，但要呈現它們，那麼您還應該瞭解CKEDITOR.dtd對象，這裏我簡要介紹一下：ckeditor how to allow for .insertHtml("<customTag myAttr='value'"></customTag>")。

來源

2013-09-01 09:34:06 Reinmar

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

而且？ ............ – Reinmar

CKEditor的4和非標準HTML元素

回答

相關問題