插入帶有FCKeditor插件的「佔位符」，以後用動態內容代替

我正在爲FCKeditor編寫一個插件，這意味着將動態內容的佔位符插入到HTML中。界面如下圖所示：插入帶有FCKeditor插件的「佔位符」，以後用動態內容代替

Interface

目前，該插件插入下面的HTML：

<div title="Dynamic Element: E-Cards (sidebar)" class="dynamicelement ecards-sidebar">&nbsp;</div>

的Javascript在我的插件，實現了這些佔位符的實際插入的片段是這樣的：

function insertNewDiv() { 
    var divNode = oEditor.FCK.EditorDocument.createElement('div'); 
    oEditor.FCK.InsertElement(divNode); 
    oEditor.FCK.Focus(); 
    oEditor.FCK.Events.FireEvent('OnSelectionChange'); 
    return divNode; 
}

爲了讓它在FCKeditor窗口看起來不錯，我在FCKeditor窗口中應用了一些CSS，包括fo llowing，在那裏寫標題：反正

.dynamicelement:before { 
    content: attr(title); 
}

，比其他造型，FCKeditor的將這些元素div沒有不同於在窗口中的任何其他div元素。這對我不好。

我需要這些佔位符具有以下特點：

內容到佔位符插入是不允許的。
點擊它應該選擇它作爲一個整體。
點擊刪除鍵時，選擇它應刪除它。
編輯它（除了刪除它）的唯一方法是選擇它，然後單擊工具欄按鈕打開編輯對話框。
它應始終被視爲一個塊級元素
如果HTML輸出使用自定義標記名稱或沒有（<dynamicelement>而不是<div class="dynamicelement">）沒關係。

FCKeditor API是否提供了一種方式來給它命令，例如「按照以下方式對待匹配選擇器'div.dynamicelement'的每個元素：...」？

另外，是否還有另一個FCKeditor插件可以做類似的事情，我可以參考一下，在我的研究中我可能忽略了這一點？

編輯：順便說一句，我已經知道CKeditor。我使用FCKeditor的原因有兩個：它適用於我的CMS，我正在使用的配置選項對我的客戶來說是完美的（除了顯然，佔位符的東西）等。

來源

2011-02-27 mattalxndr

我通過複製使「分頁符」按鈕工作的代碼來解決此問題。

在涉及源代碼的過程中，我瞭解到FCKeditor具有插入佔位符的本地方法。

創建一個「假圖像」並將其插入到編輯器DOM中。不管你想要什麼，你都可以設計風格。
使用Javascript，將其連接到有問題的div。
隱藏div（儘管它仍然出現在源代碼和輸出中）。

雖然處於所見即所得模式，但您正在玩這個假圖像，並且所做的更改正在轉移到div。

需要在插件中做一些小小的工作。如果您的grep爲FCK__PageBreak，您會在源代碼中找到它們，隨時可以將其複製到您的插件中。 FCK__PageBreak是分頁符的假圖像的類名稱。

來源

2011-02-27 09:32:57 mattalxndr

您可能會能夠使用ProtectedSource得到你想要的東西：

編輯器提供了一種「保護」源的一部分，同時編輯或更改視圖保持不變。只需在配置文件中使用「FCKConfig.ProtectedSource.Add」功能即可。

但是：

注意，目前有沒有什麼辦法可以「鎖定」顯示在編輯器的內容。使用ProtectedSource保護的內容實際上在編輯過程中不可見。例如，它可以用來保護自定義非標準標記或服務器端腳本。默認情況下，FCKeditor使用它來保護<腳本>標籤在編輯期間不被激活。

你也許可以用一個佔位符圖像一起使用：

你的插件添加兩個「真正的」保護標籤和佔位符。
服務器去掉佔位符，並將事情做到真正的標籤;然而，如果佔位符不在那裏，但「真實」的東西是刪除「真實」的東西。
編輯時，服務器在將東西發送到瀏覽器之前插入佔位符圖像。

這一切似乎有點令人費解，所以你可能是一個簡單的組裝機更好：

插件只插入一個佔位符圖像與特定class或假的你選擇的屬性。
調整圖像插件忽略您的佔位符。
將佔位符圖像替換爲服務器上的真實內容。
當他們編輯內容時，將其發回給瀏覽器時，用佔位符圖像替換真實的東西。

或者，你可以使用自己的自定義標籤（即<dynamicelement>），然後使用ProtectedTags:

在許多情況下，它能夠切換到源視圖中的FCKeditor，並添加一個很重要自定義處理所需的自定義標籤很少，或其他。問題在於瀏覽器不知道如何處理非標準的HTML標籤，並且通常會在查找它們（特別是IE）時破壞DOM樹。

，與一些CSS相結合，顯示<dynamicelement>很好（比如某些尺寸和背景圖像）可能做的伎倆沒有太多的髒kludging。

來源

2011-02-27 06:50:04

儘管您的任何建議都不是我的答案，但我需要您的意見才能找到我所在的位置。感謝您的建議。 – mattalxndr 2011-02-27 09:34:09

插入帶有FCKeditor插件的「佔位符」，以後用動態內容代替

回答

相關問題