ComponentOne Wijmo HTML 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>

截图展示:

ComponentOne Wijmo Editor

 

你也试一试?

Demo下载

很高兴能和大家分享 ComponentOne 的使用方法、讨论 ComponentOne 使用过程中遇到的问题。

葡萄城控件产品网站:http://www.gcpowertools.com.cn/ 
葡萄城技术支持论坛:http://gcdn.grapecity.com/

posted @ 2012-07-25 12:10  葡萄城开发工具  阅读(400)  评论(0编辑  收藏  举报