`
javasogo
  • 浏览: 1817326 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

tinymce编辑器的光标位置插入内容时,光标丢失问题解决办法

阅读更多

在上个项目中,碰到这样一个问题:在tinymce编辑器中,想在光标位置插入内容,在弹出的dialog(是跨域的)中选择内容后,点击确定,关闭弹出窗口,将选中的内容信息myHTML插入到编辑器中的记录的光标位置, 我的写法是 :
tinyMCE.execCommand("mceInsertContent", false, myHTML);
最后发现火狐FF下是正常的,即在光标地方插入我的内容myHTML,而在IE6\7\8下 ,都会把原来所有的内容都覆盖掉。

困扰好几天,发贴提问(http://topic.csdn.net/u/20100812/22/516220a2-9a6a-4820-9ff4-808f75a4dbd9.html)也没人答上,最后还是自己解决了,具体原因和解决办法如下:

原因:是由于IE下,在弹出的dialog(是跨域的)中选择内容后,原来的光标位置丢失了,所以导致在插入的时候,找不到原来的光标位置,所以出现以上问题。
解决思路:在弹出窗口前,记录IE的编辑位置,到插入的时候,复位光标位置然后再插入。
解决方法:
1、 //弹出窗口前,记录IE的编辑光标
var ieSelectionBookmark;

if (isIE) {
ieSelectionBookmark = tinyMCE.get('myEditor').selection.getBookmark

}

// 在弹出的dialog,点击确定往编辑器插入内容前,复位IE的编辑光标

if (isIE) {
tinyMCE.get('myEditor').selection.moveToBookmark(ieSelectionBookmark);

}
// 往编辑器插入内容
tinyMCE.execCommand('mceInsertContent', false, output );
这个种写法在IE6下是OK的,但是到了IE7、IE8下就失效了,原因是tinyMCE的该API方法不支持IE7、IE8。


2、 //弹出窗口前,记录IE的编辑光标
var ieSelectionBookmark;

if (isIE) {
tinyMCE.activeEditor.focus();
ieSelectionBookmark = tinyMCE.activeEditor.selection.getBookmark();

}

// 在弹出的dialog,点击确定往编辑器插入内容前,复位IE的编辑光标

if (isIE) {
tinyMCE.activeEditor.selection.moveToBookmark(ieSelectionBookmark);

}
// 往编辑器插入内容
tinyMCE.execCommand('mceInsertContent', false, output );
这种写法在IE6、7、8下都好用。

参考资料:http://tinymce.moxiecode.com/punbb/viewtopic.php?id=19151

分享到:
评论

相关推荐

    vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容 html: ($event, draggable='true' v-for=(item, key=index click=dropRelease($event,> {{item.labelName}} <div cont

    带代码编辑的tinymce编辑器

    作为一个专业的 IT 从业者,理解和掌握 Tinymce 编辑器是提升网页内容编辑体验的关键。 ### 1. 编辑器概述 Tinymce 支持多种操作系统和浏览器,具有高度可定制性,可以根据项目需求进行样式和功能的调整。其核心...

    tinymce编辑器内预览视频

    解决tinymce编辑器内不能预览视频,替换tinymce/plugins/media/plugin.min.js即可。因为默认富文本编辑器内是一个img标签,并不能播放。

    javascript 在光标处插入指定内容

    在JavaScript中,向文本输入框或者富文本编辑器在光标位置插入特定内容是一项常见的需求。这涉及到对DOM(文档对象模型)的操作以及对文本选取的理解。以下将详细阐述实现这个功能所需的知识点。 首先,我们需要...

    TinyMCE 富文本编辑器

    TinyMCE是一款强大的开源富文本编辑器,广泛应用于网页内容编辑和内容管理系统中。它提供了丰富的功能,使得用户可以像在Word中一样编辑文本,包括字体样式、字号、颜色、对齐方式、列表、图像插入、链接添加等。...

    TinyMCE编辑器(HTML编辑器) v4.1.5 中文官方版.zip

    TinyMCE是一个基于浏览器的所见即所得编辑器,平台独立于Web之外,支持目前流行的各种浏览器,由javascript写成。这个编辑器可工作在Mozilla, firefox和MSIE上.很多网站系统都采用了 TinyMCE,其中包括 Wordpress。...

    在vue3项目中使用tinymce编辑器

    在Vue3项目中集成TinyMCE编辑器是一个常见的需求,特别是在构建富文本编辑功能时。TinyMCE是一款功能强大的开源富文本编辑器,它提供了丰富的API和插件,可以定制化满足各种复杂的编辑需求。本篇文章将详细讲解如何...

    tinymce编辑器组件

    Tinymce编辑器组件是一款强大的富文本编辑工具,广泛应用于网页内容编辑、CMS系统以及各种Web应用程序中。...开发者可以根据实际需求,利用Tinymce提供的各种API和插件系统,构建出符合业务场景的富文本编辑解决方案。

    tinymce富文本编辑器

    Tinymce是一款广泛应用于Web开发领域的专业富文本编辑器,它以其强大的功能、良好的用户体验和出色的兼容性而闻名。本文将深入探讨Tinymce的核心特点、使用方法以及与JavaScript、jQuery的整合。 首先,Tinymce的...

    简体中文tinymce编辑器插件下载

    Tinymce是一款广泛使用的开源富文本编辑器,它允许开发者在网页上创建功能强大的文本输入区域。这个编辑器支持多种语言,其中包括简体中文,使得中国用户可以方便地进行文字编辑和排版工作。"简体中文tinymce编辑器...

    tinymce编辑器汉化

    Tinymce 是一款非常流行的开源富文本编辑器,被广泛应用于网页内容编辑、CMS系统以及各种在线文本处理场景。它提供了丰富的功能,如图片上传、链接插入、格式调整等,使得非程序员也能轻松编辑出具有专业排版效果的...

    tinymce富文本编辑器集成demo,添加powerpaste插件,支持word、excel带格式粘贴

    Tinymce是一款流行的开源JavaScript富文本编辑器,它提供了丰富的功能和高度可定制性,广泛应用于网站、博客、内容管理系统等场景。在本示例中,我们关注的是如何将Tinymce与PowerPaste插件集成,以支持从Word和...

    TinyMCE富文本编辑器资源包

    这个"TinyMCE富文本编辑器资源包"包含了TinyMCE的最新版本——版本6的相关资源,旨在提供一个功能完备、易用且高度可定制的文本编辑解决方案。 TinyMCE 6在设计时注重性能提升和用户体验优化,它引入了多项新特性,...

    TinyMCE编辑器 v6.2.0.zip

    1. **富文本编辑器**:TinyMCE允许用户在网页上编辑文本,就像在桌面应用程序中一样,包括字体样式、颜色、大小调整、列表、表格、链接、图片插入等功能。 2. **源码源代码**:TinyMCE是一款开源项目,其源代码可供...

    tinymce 富文本编辑器导出插件

    tinymce 富文本编辑器导出插件, 支持导出word 导出pdf,可通过配置修改下载文件名称

    html编辑器《TinyMCE 在线编辑器》

    TinyMCE是一款强大的HTML编辑器,它被广泛用于网站建设和内容管理系统中,为用户提供了一个直观且功能丰富的文本编辑界面。这个在线编辑器支持多种富文本格式,如图像、链接、表格、列表等,使得非技术用户也能轻松...

    TinyMCE富文本编辑器导出为word文档(JS实现)

    TinyMCE富文本编辑器是一款广泛应用的开源JavaScript编辑器,它提供了丰富的文本格式化功能,让用户可以在网页上创建和编辑类似Word的文档。本示例着重讲解如何利用JavaScript技术将TinyMCE编辑器中的内容导出为Word...

    CSS3可视化网页编辑器 基于tinymce编辑器.zip

    【CSS3可视化网页编辑器与TinyMCE编辑器】 在现代网页开发中,CSS3(层叠样式表第三版)和HTML5已经成为构建交互式、响应式和视觉吸引力强的网页的标准工具。CSS3提供了丰富的样式功能,如渐变、阴影、动画、过渡等...

    tinymce在线编辑器

    TinyMCE是一款强大的在线文本编辑器,被广泛用于网站建设和内容管理系统中,为用户提供了一个类似Microsoft Word的富文本编辑环境。...通过深入学习TinyMCE,开发者可以构建出符合特定需求的高级在线编辑解决方案。

Global site tag (gtag.js) - Google Analytics