ComponentOne Wijmo Editor 在光標處添加文本

 ComponentOne Wijmo Editor 是一款強大的HTML 編輯器，可以插入table, image, links 等標籤，但是沒有在光標處直接插入標籤的功能。但是，現在Wijmo Editor 是一款基於 jQuery 控件。現在們可以通過客戶端 object 模型去實現。

在本文中，我們將通過自定義方法來實現該功能。
首先，我們要插入wijmo:C1Editor 標籤來展示 Wijmo Editor 。在使用 iFrame 加載Wijmo Editor 之後，我們就可以使用 createRange 和 execCommand 方法來實現在光標處插入文本了。
下面是實現該功能的完整代碼： 

<script type="text/javascript"> 

  

function insetTextAtCursor(inputText) { 

    //get the container 

    var $designView = $("iframe", $(".wijmo-wijeditor-container")), 

         win, doc, range; 

  

    if ($designView && $designView.length > 0) { 

        //retrieve the Window object generated by the iframe 

        win = $designView[0].contentWindow; 

     } 



    if (win) { 

         //access the document object 

         doc = win.document; 

     } 

  

     if (doc) { 

        try { 

           //check if the browser is IE 

           if ($.browser.msie) { 

              //insert the given text 

              doc.body.focus(); 

              range = doc.selection.createRange(); 

              range.pasteHTML(inputText); 

              range.collapse(false); 

              range.select(); 

           } else { 

              doc.execCommand('insertText', false, inputText); 

           } 

        } catch (e) { 

     } 

   } 

} 

</script>

截圖展示：

 

你也試一試？

Demo下載

很高興能和大家分享 ComponentOne 的使用方法、討論 ComponentOne 使用過程中遇到的問題。

葡萄城控件產品網站：http://www.gcpowertools.com.cn/ 
葡萄城技術支持論壇：http://gcdn.grapecity.com/