內聯ckeditor中的角度綁定

我正在使用CKEditor進行內聯編輯，我想將一個元素綁定到角度範圍值。內聯ckeditor中的角度綁定

<div contentEditable="true"> 
    <p>Here is the value: {{testval}}</p> 
</div>

testval應該以與編輯器外部相同的方式進行更新。

爲了在編輯器中保護這些文字，我想要做類似於placeholder plugin的操作。換句話說，我打算有一個佔位符，動態顯示最終文本，而不僅僅是佔位符。

我見過幾個例子，說明如何用角度來綁定整個內容，但不是單個的元素。對於angular和ckeditor，我還是比較新的，所以任何幫助或指針都會很感激。

來源

2013-10-02 Geoff

我不知道我是否完全理解你正在嘗試做什麼。但是如果意圖將javascript（angular）綁定到內聯所見即所得編輯器，那麼這可能是一個糟糕的主意，因爲您將網站置於XSS和CSRF攻擊之下。但是，再次，也許我不理解... –

感謝您的評論，你是正確的;我希望將角度綁定到內聯所見即所得的編輯器。然而，編輯的目的是提供一個實時可編輯的結構化報告（基本上是一個郵件合併）。即我們不打算將編輯器的結果寫回數據庫，它只會用於用戶會話，然後他們將打印編輯後的文檔。 – Geoff

這聽起來像你需要使用一個指令，你想要什麼。我可能會因爲我不完全熟悉而感到失望，但是根據你提供的內容，我們假設這個例子。

HTML

<body ng-app="myApp"> 
    <div content-editable content="content"></div> 
</body>

的JavaScript

angular.module('myApp', []) 
    .directive('contentEditable', function() { 
     restrict: 'A', 
     replace: true, 
     scope: { 
      // Assume this will be html content being bound by the controller 
      // In the controller you would have: 
      // $scope.content = '<div>Hello World</div>' 
      content: "=" 
     }, 
     template: '<div contentEditable="true"><p>Here is the value {{ content }}</p></div>' 
    });

仍然不知道如果我完全理解，但讓我知道如果我越來越近。

來源

2013-10-04 01:20:04

我假設你想要將模型中的HTML文本綁定到元素。我使用ng-bind-html來渲染模型中的內容，並創建了指令ck-inline來添加內聯功能並將模型綁定到內聯編輯器中發生的更改。這個指令需要一個ng-bind-html的工作，你還需要ngSanitize添加到你的模塊。添加指令ck內聯到你的元素和

我也使用$超時，因爲我注意到，如果我沒有呈現文本，然後ckeditor以某種方式刪除所有的值弄亂模型（這不會發生與非內聯選項）。這是代碼。

yourModule.directive('ckInline', ['$sce', '$timeout', function($sce, $timeout){ 
    return{ 
     require : '?ngBindHtml', 
     scope:{value:"=ngBindHtml"}, 
     link : function(scope, elm, attr, ngBindHtml) 
     { 
      $timeout(function() 
      { 
       var ck_inline; 
       elm.attr("contenteditable", "true"); 
       CKEDITOR.disableAutoInline = true; 
       ck_inline = CKEDITOR.inline(elm[0]); 

       if (!attr.ngBindHtml) 
        return; 

       ck_inline.on('instanceReady', function() 
       { 
        ck_inline.setData(elm.html()); 
       }); 

       function updateHtml() 
       { 
        scope.$apply(function() 
        { 
         scope.value = $sce.trustAsHtml(ck_inline.getData()); 
        }); 
       } 


       ck_inline.on('blur', updateHtml); 
       ck_inline.on('dataReady', updateHtml); 

      }); 
     } 
    }; 
}]);

來源

2014-05-11 05:23:26 piacenti

內聯ckeditor中的角度綁定

回答

相關問題