2012-03-30 62 views
2

我想實現編輯描述字段的功能,其中使用telerik mvc編輯器進行編輯。編輯器需要隱藏,除非用戶單擊表示可編輯部分的跨度,並且一旦完成,隱藏編輯器並將標記的條目放置在可編輯元素中。如何在Telerik編輯器上使用knockoutjs綁定?

我不確定在哪裏應用knockout綁定,以便在編輯器被隱藏後跨度中顯示的任何內容都會顯示在telerik編輯器中。編輯器創建一個iframe,其中包含生成的標記html作爲用戶輸入的內容。轉換後的標記將作爲html編碼值存儲在iframe之外的textarea中。

如果嘗試添加綁定到生成的textarea,但沒有看到與data-bind =「text:imgDescr」更新綁定的範圍。

Her'es的Razor視圖

<div> 
    <span data-bind="text: imgDescr"></span> 
</div> 
<div> 
@{ Html.Telerik().Editor() 
    .Name("editor") 
    .HtmlAttributes(new {style = "height:400px"}) 
    .Encode(false) 
    .Render();  
} 
</div> 

和JS

function appViewModel() { 
    this.ImgName = ko.observable(helpText); 
    this.ImgDescr = ko.observable(helpText); 
} 

$('t-raw-content').attr('data-bind', "value: ImgDescr"); 

// Activates knockout.js 
ko.applyBindings(new appViewModel()); 

如何可以這樣做有什麼建議?我也研究過使用tinyMCE,但我認爲渲染是以類似的方式處理的。

+0

你確定$('t-raw-content')是一個正確的jQuery選擇器。這應該是$('。t-raw-content')還是$('#t-raw-content')? – 2012-04-02 08:47:58

回答

0

利用上市herehere的例子設置它和淘汰賽維基here提供tinyMCE的綁定例子我能得到我所需要的方式約束編輯器。

我缺少的部分是jquery.tinymce.js腳本。

所述結合在自定義綁定做如在上面的例子和做的結合所需要的唯一線在自定義綁定的init部分是

setTimeout(function() { $(element).tinymce(options); }, 0); 

這是我所擁有的jsfiddle。在jsFiddle中這不是一個完全可行的例子,但是顯示了我在頁面上的所有內容。

0

如果你的編輯器是tinymce編輯器(?),添加一個綁定到textarea是沒有幫助的。 您可以使用tinymce.get('editor_id').getContent();存取權限的編輯內容,並使用tinymce.get('editor_id').setContent('This is a demo text.');

相關問題