如何從angular-ui/ui-tinymce配置tinymceOptions

我決定在我的博客中使用ui-tinymce（tinymce的角度版本）。但是我找不到相同的文檔。將欣賞任何資源或配置tinymceOptions的任何建議。如何從angular-ui/ui-tinymce配置tinymceOptions

這是git的鏈接 - https://github.com/angular-ui/ui-tinymce

2014-02-22 Abhishek Prakash

我以前做過這件事 - 讓我看看我能不能掀起一個例子。可悲的是我發現缺乏文檔，因此需要一些試驗和錯誤。 – jCuga

假設你有你的角度應用程序的工作，它只是在配置編輯器的問題，您可以配置與被記錄爲無棱角相同的選項編輯器，基地TinyMCE的位置：http://www.tinymce.com/wiki.php/configuration

如果你點擊一個特定的選項，你會看到你如何配置無棱角TinyMCE的，像這樣：

tinymce.init({ 
    resize: false 
});

所以，我們要做的安古拉相當於定製使用ui-tinymce而不是tinymce.init（），您可以在範圍變量$ scope.tinymceOptions中設置選項。所以在配置UI的TinyMCE的示例不允許用戶調整，有一個400/300寬度/高度，讓打印和文字顏色/背景選擇器將是：

myAppModule.controller('MyController', function($scope) { 
    $scope.tinymceOptions = { 
     resize: false, 
     width: 400, // I *think* its a number and not '400' string 
     height: 300, 
     plugins: 'print textcolor', 
     toolbar: "undo redo styleselect bold italic print forecolor backcolor" 

    }; 
});

而且你的觀點可能看起來像這樣（注意tinymceOptions）：

<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>

UI的TinyMCE的應該有一些內置的插件，你可以在這裏找到文檔：http://www.tinymce.com/wiki.php/Plugins

對於工具欄選項查看完整列表：http://www.tinymce.com/wiki.php/Controls

從我記得，你不能在事後改變tinymceOptions。我的意思是，在編輯器加載後，如果您想稍後更改一些$ scope.tinymceOptions，那麼這些更改不會在編輯器中自動更新，因爲我相信ui-tinymce代碼將選項傳遞給tinymce.init （）只有一次，當它被加載。

你也可以像手動設置編輯內容的東西，通過使用普通的TinyMCE的JavaScript的鉤子一樣：）

tinyMCE.activeEditor.setContent('<h1>hello world</h1><p>this is my story. the end.</p>');

同樣，你可以使用的getContent（參見：http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent 但我相信你也可以訪問編輯器內容通過本示例中的$ scope.tinymceModel變量。（使用情況是，如果你點擊一個按鈕來保存編輯器的內容，那麼你如何得到編輯器的內容......）

但更具角度的方法是通過ng-模型和範圍變量，而不是依靠原始tinymce javascript api。

希望有所幫助。總之，ui-tinymce是一個非常簡單的TinyMce封裝。所以任何你可以用普通的tinymce做的事情，你大部分都可以用角度化版本來做。我認爲這就是爲什麼沒有很多定製ui-tinymce的文檔的原因，但這個事實對於新手來說並不明顯。

來源

2014-02-23 17:33:02 jCuga

謝謝jCuga，它幫了很多。 –

如果我需要刪除TinyMCE編輯器，該怎麼辦？不知怎的，是否有可能從控制器上做到這一點？ – ilter

這不是在docs - > ui-tinymce =「tinymceOptions」中。我花了很長時間才弄清楚爲什麼我設定的選項沒有反映在編輯上。非常感謝。 – Strategist

儘管jCuga提供了一個非常有用的解釋，但仍然無法獲得定製的設置。 TinyMCE編輯器將加載，但使用默認設置。看起來其他人也有類似的問題，對於ui-tinymce指令項目，其記錄爲issue #158。對我來說主要的問題似乎是，因爲我定義了Angular控制器中的設置選項，文檔建議，默認的tinymceOptions變量永遠不會被覆蓋，因爲我的控制器永遠不會被加載。我解決了這個通過簡單地參照控制器這樣：

<textarea ui-tinymce="tinymceOptions" ng-controller="RichTextCtrl"></textarea>

一旦我加入了NG-控制器參考，我的自定義設置來替代默認設置。

來源

2016-01-05 15:21:22

如何從angular-ui/ui-tinymce配置tinymceOptions

回答

相關問題