如何使用文本內任何位置的可上傳圖像實現富文本編輯器

Question

我想實現一種RTE（Rich Text Editor），它能夠在文本內的任何位置上傳圖像。 我的目的是創建一個“添加/編輯新聞文章”頁面，客戶可以在其中編寫帶有圖像的故事。

我擅長PHP和Javascript編程，因此我正在尋求有關實現此方法的幫助。 是否要在此RTE中創建自定義按鈕以插入先前上傳的圖像或其他方式？ 如何顯示這些圖像供用戶選擇？ 等等。

獎勵積分：

• 上載多個文件：客戶可以選擇與該故事相關的10張圖像。
• 使用Flash以外的其他方法作為默認上傳方法。
• 我經常使用jQuery。
• RTE非常輕巧。 我不在乎客戶是否必須了解一些事情（例如減價或類似的東西），我只是不喜歡腫的RTE。
• 使用新技術，例如HTML5和/或CSS3。

讓我澄清一些事情。 我知道一些Javascript RTE，並且還在多個CMS中使用了它們。 所以我不需要這些的鏈接，我可以自己使用Google“ javascript RTE” :)。 但是，@ hakre之類的內容很有用，因為他指出了CKEditor的可擴展性，而我對此並不完全了解。

舉一個我正在尋找的答案的例子：“您可以使用CKEditor進行此操作，使用jquery-html5-upload異步上傳圖像，將所有上傳的圖像文件名保存在Javascript數組中，並使用自定義在CKEditor中創建一個新按鈕單擊處理程序，它將顯示Fancybox的覆蓋圖，並顯示所有圖像（文件名存儲在數組中），用戶單擊圖像，然后將html插入編輯器。”
那樣的東西，但更好:)（或者我應該說准確）。

Answer 1

這里有什么可以滿足您的要求的嗎？ http://ckeditor.com/developer-features

Answer 2

您看過TinyMCE還是CKEditor ？

Answer 3

您給自己的“假答案”非常准確。 您將需要支持自定義功能的RTE編輯器。

后勤工作將遵循以下路線：

1. 用戶按下一個按鈕
2. 空div會附加到具有唯一ID的輸入中
3. 圖片上傳器彈出窗口將打開，其中包含指向新div的指針
4. jQuery / AJAX / PHP的組合將允許用戶在頁面內上傳文件
5. 文件名在上傳過程后返回，並插入到原始附加的div中

如果您正在尋找每個步驟的特定代碼，則建議您查找一些教程，因為這不是我們可以為其編寫一些快速示例代碼的內容。