如何使用ng2-ckeditor作爲內聯？

我已經使用了ng2-ckeditor，但是我需要將它作爲內聯使用，那麼我如何使用它作爲內聯？如何使用ng2-ckeditor作爲內聯？

https://www.npmjs.com/package/ng2-ckeditor

我使用角的CLI angular2發展。在NG2-CKEditor的/ SRC

變化this.instance = CKEDITOR.replace（this.host.nativeElement，配置）

來源

2017-04-20 abhy

你可以放一些你的代碼，你到底想要什麼？ –

請參閱http://stackoverflow.com/questions/43342556/cannot-set-property-dir-of-undefined-ckeditor-in-angular2 – abhy

我也有同樣的要求，請任何人可以sugget任何東西 – Runali

要NG2-CKEditor的做直列，變化ckeditor.component.js; to this.instance = CKEDITOR.inline（this.host.nativeElement，config）; 這個工作在我的本地系統，但對生產

面臨的問題，但更換後，本我得到

的「未定義無法設置屬性‘目錄’」我已經嘗試設置index.html中的，但BASE_PATH沒有幫助。

來源

2017-04-20 12:40:26 abhy

首先了解經典 ckeditor和內嵌之間的差異。

經典的CKEditor使用一個IFrame，其ng2-ckeditor包裹物，並提供了一個角度成分，如：

<ckeditor></ckeditor>

即模板內部和內部創建的角2成分是在iFrame。這個iFrame加載自己的CSS（contents.css默認來自ckeditor CDN）。這意味着您的編輯器實例與您的網站css隔離。

行內ckeditor在HTML元素（例如div或textarea - 請注意並非所有元素都是supported）上使用html contenteditable屬性。

由於這是現在在你的頁面一個div，你的網站風格將應用編輯器內（例如，如果用戶按下輸入，從而在編輯器中<p>元素，無論<p> CSS被網頁上的應用會適用於編輯器中的用戶<p>）。

因此，首先在你的模板創建的div：

<div id="inline-editor1" contenteditable="true"> 
</div

現在你需要告訴CKEDITOR有關股利。

所以在@Component裝修前，您的組件的頂部，加入這一行：

declare var CKEDITOR: any;

最後，在你的ngOnInit，告訴CKEDITOR你的div：

ngOnInit() { 
    this.setConfig(); 
    CKEDITOR.disableAutoInline = true; 
    CKEDITOR.inline('inline-editor1');  
    }

現在，當您點擊裏面該div，你會得到內聯ckeditor工具欄。

Docs here。

警告 - 請注意

此方法意味着您將無法使用[（ngModel）綁定到行內編輯器的內容（你可以與NG2-CKEditor的）。你將不得不使用標準的JavaScript來提取contents of the editor for saving。

Here is a plunkr顯示了ng2-ckeditor和內聯編輯器。注意內聯編輯器如何不綁定到任何模型。

來源

2017-10-13 15:25:04 rmcsharry

你能給我任何plunker鏈接，或任何示例，我試過，但沒有得到內聯編輯器 – Runali

本質上，你需要一個div（或textarea）與一個id。如果要顯示內聯編輯器，請調用CKEDITOR.inline（），並確保disableAutoInline設置爲true。這裏是一個角色1的執行者：https://plnkr.co/edit/YUOYGa?p=preview還要注意，這實際上只是使用javascript來創建編輯器，並且沒有模型綁定到編輯器的內容 - 就像我給的CAVEAT。 – rmcsharry

@Runali我在我的回答中添加了一個angular2 plunker鏈接 – rmcsharry

如何使用ng2-ckeditor作爲內聯？

回答

相關問題