ckeditor change段落元素產生的輸出

我們的應用程序使用ckeditor生成用戶友好的電子郵件內容發送電子郵件給客戶。電子郵件內容由商務人士準備，因此他們根本不知道任何html。ckeditor change段落元素產生的輸出

因此，我希望ckeditor自動添加內聯樣式到段落（<p>元素），例如<p style="line-height:20px;">，而不是僅生成<p>。

由於生成的輸出通過電子郵件發送，我沒有任何機會使用CSS文件。我試圖在<table>內包裝<p>元素，但我不能通過這種方式更改「line-height」屬性，因爲像Gmail，雅虎這樣的電子郵件站點已經擁有自己的<p>元素樣式。我認爲每個<p>元素都必須使用內聯樣式，我不知道如何實現這一點。

任何人都可以幫忙嗎？

感謝

來源

2012-07-18 Mehmet

沒有設置或快速修改代碼來做到這一點。

這裏有兩種方法。

如果你想惹惱你的用戶做到這一點（見AlfonsoML的評論）：
如果您想靈活做多<p>造型爲內容在編輯器中更新更多，最好的辦法可能會使用由@AlfonsoML創建的「onchange」插件。你可以在這裏下載：
onChange event for CKEditor

他演示瞭如何使用它來顯示在另一個<div>這裏的編輯內容：
pass Ckeditor value to div text without html tags?

安裝插件後，你可以做這樣的事情：

CKEDITOR.on('instanceCreated', function (e) { 
    e.editor.on('change', function() { 
     var editorContent = CKEDITOR.instances['TextAreaID'].getData(); 
     editorContent.replace('<p>', '<p style="line-height:20px;">'); 
     CKEDITOR.instances['TextAreaID'].setData(editorContent); 
    }); 
});

更好的方法：
如果您只想執行<p>樣式並且更喜歡避免每次內容更改時運行該函數的開銷，則可以加載樣式表以將樣式應用於編輯器中的<p>元素此配置設置：

config.contentsCss = '/css/mysitestyles.css';

然後使用onsubmit功能與形式。事情是這樣的：

<form name="ff" id="ff" action="xx" method="POST" onsubmit="return doSubmit();">

功能：

function doSubmit() { 
    var emailContent = $('textarea#TextAreaID').val();   
    emailContent.replace('<p>', '<p style="line-height:20px;">'); 
    $('textarea#TextAreaID').val(editorContent); 
};

來源

2012-07-18 12:31:23 codewaggle

當然，第一種方式是小便用戶的最佳途徑之一。如果您嘗試在發生更改時替換整個HTML，他們將失去選擇，插入位置，撤消將變得瘋狂......第二種方法更合理。 – AlfonsoML 2012-07-18 12:43:02

@AlfonsoML感謝您的洞察力，我沒有以這種方式使用onchange插件，並沒有意識到這種影響。 – codewaggle 2012-07-18 13:05:34

@AlfonsoML我知道你對CkEditor，jQuery，JavaScript等非常瞭解。請不要猶豫，如果我發佈了錯誤或可以改進的東西，請發表評論。這給了我一個學習和修正它的機會，這比有永久性的錯誤要好得多。 – codewaggle 2012-07-20 20:13:26

ckeditor change段落元素產生的輸出

回答

相關問題