AngularJs內聯編輯插入html標記

我想在angularJs中創建一個可插入格式化html標記的內聯可編輯內容。AngularJs內聯編輯插入html標記

我創建了一個plunker：http://plnkr.co/edit/cHgr6BxzoT3LWhc35kmX?p=preview

但是，當我嘗試插入一些HTML標籤一樣，例如：

<b>test</b>

我希望看到一個大膽的文本，但它只能顯示簡單的文本和HTML不...

[編輯]

也許我不能很好地解釋我想要什麼。我想創建一個簡單的html編輯器，它可以修改文本，例如添加鏈接，粗體文本，標題標籤等等......只需編寫html標籤並在頁面中編譯即可。

的答案是正確的，如果我想從我的控制器輸出的文本，但我想使這個編輯。

來源

2013-06-02 Tropicalista

嘗試'ngBindHtmlUnsafe' http://docs.angularjs.org/ api/ng.directive：ngBindHtmlUnsafe –

我已經更新了我的plunker：似乎沒有正常工作... – Tropicalista

嘗試更新此作品=>'$ scope.name ='世界';' –

如果你更新你的指令的元素焦點/模糊，你可以實現你想要的。

當你雖然編輯它，我把它切換回「HTML編輯模式」

element.bind("focus", function(){ 
    scope.name = scope.name.replace(/</g, "&lt;").replace(/>/g, "&gt;"); 
    scope.$apply(); 
    }) 
    element.bind("blur", function() { 
    scope.name = element[0].innerHTML.replace(/[&]lt[;]/g, "<").replace(/[&]gt[;]/g, ">"); 
    scope.$apply(); 
    });

更新plunkr：http://plnkr.co/edit/cfSBctBbK6cpwfKrwwWf?p=preview

來源

2013-06-10 16:21:28

這似乎是我正在尋找... – Tropicalista

這是一個指令。而不是使用ng-bind使用ng-bind-html-unsafe。然後你就可以傳遞給你的模型字面HTML這樣的：

$scope.name = '<b>World</b>';

來源

2013-06-05 00:00:23

範圍不會更新，當我添加一些文本... – Tropicalista

從您的PLUNK我可以看到，你不僅試圖綁定到模型，但你想包裝成contenteditable指令。在這種情況下，看看$編譯（）函數[http://docs.angularjs.org/api/ng.$compile] 在您的鏈接（）函數中的指令，你必須把它在HTML模板，使你的綁定表達式變得「活着」 –

我試過了，但不能得到它的工作...... – Tropicalista

您應該使用或激勵自己與CodeMirror UI directive，從AngularUI。

製備的工作Plunker here，但依賴關係並不好。

來源

2013-06-06 11:29:57

AngularJs內聯編輯插入html標記

回答

相關問題