ComponentOne Wijmo Editor 在光标处添加文本

ComponentOne Wijmo Editor 是一款强大的HTML 编辑器,可以插入table, image, links 等标签,但是没有在光标处直接插入标签的功能。但是,现在Wijmo Editor 是一款基于 jQuery 控件。现在们可以通过客户端 object 模型去实现。在本文中,我们将通过自定义方法来实现该功能。

发布于 2012/11/16 00:00

ComponentOne Enterprise

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下载:

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年,40余年来始终聚焦软件开发技术,有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态,与超过3000家合作伙伴紧密合作,产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态