创建富文本编辑器AngularJS答案

【问题标题】：Creating Rich Text editor AngularJS创建富文本编辑器AngularJS
【发布时间】：2013-04-26 02:43:45
【问题描述】：

我知道有很多很棒的富文本编辑器可以很容易地移植到 Angular 中，并且有很多关于如何做到这一点的讨论，但我想创建自己的。

我有基本的想法了：

创建一个文本区域并观察输入并在输入更改时执行功能。我对 ngBindhtml 指令很熟悉，只是在我可以将其应用于元素的范围内。

知道如何创建一个将纯文本呈现为html 的函数吗？

【问题讨论】：

大多数编辑器隐藏文本区域，并在其位置显示正在输入到 div 的数据。一个很好的入门方法是查看一些非常简单的示例，然后创建您的指令。
这是一个看似复杂的问题的看似简单的解决方案
您还会发现这是必要的：stackoverflow.com/questions/263743/…
github.com/angular-ui/ui-tinymce/blob/master/src/tinymce.js ?
你见过Textangular吗？如果您想自己制作，可能会有很多东西需要学习。

标签： angularjs richtextbox wysiwyg

【解决方案1】：

我之前尝试过，但最终使用了textAngular。

基本上我用 iframe 替换了 textarea，类似于 tinyMCE 的做法。

元素上的 contenteditable 允许您替换 textarea 并直接在 div 上书写。您将以这种方式插入所有 html 元素，例如标题和文本。您必须处理文本上的光标位置，根据按钮和文本选择应用样式等。

【讨论】：

开始使用前的一些意见textAngular

【解决方案2】：

好吧，我也遇到了这个问题并创建了自己的编辑器，因为我需要添加 Table addition 等功能。repo 仍在开发中，但您可以了解一下 by taking a look at this plunkr。与旧答案不同，我尝试将其保留为component，以便可以根据需要在许多其他地方重复使用。

你可以starthis git repo to stay updated or feel free to add your inputs

【讨论】：

从其他问题中删除了重复的答案