ComponentOne Wijmo Editor 在光标处添加文本

最新推荐文章于 2018-03-11 23:08:46 发布

原创最新推荐文章于 2018-03-11 23:08:46 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #object #browser #jquery #function #image

C1 ASP.NET Wijmo 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在WijmoEditor光标位置插入文本。通过自定义方法及利用jQuery，演示了如何在使用iFrame加载的WijmoEditor中实现这一功能。

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