`
libg
  • 浏览: 58405 次
  • 性别: Icon_minigender_1
  • 来自: 河北邯郸
社区版块
存档分类
最新评论

Javascript实现web编辑器-兼容FF和IE

阅读更多

背景: CREAT需要进行文本分析,主要的任务就是从一大段原始需求文本中,通过人工或者自动的手段,识别出有用的元素,并打上标记。 由于自然文本的任意性,用自动的方法无法完全精确地得出文本的处理结果,即使是人工处理,也往往需要进行几轮迭代式的分析处理。 Web编辑器即使设计来支持人工处理的这一过程的。 

实现说明: 

IFrame作为编辑器主体。 

设置一下iframe的属性,iframe即可作为编辑器了。

<iframe frameborder="0" id="WebEditor" style="border: 1px dashed black;
height: 320px; width: 760px"
></iframe>
<script language="javascript">
Editor 
= document.getElementById("WebEditor").contentWindow;
Editor.document.designMode 
= "on";//使document处于可编辑状态
Editor.document.open();
//For FF, 打开新的document以便编辑新内容
//Editor.document.write("");//可以设置header信息等, Iframe可以看成一个独立的html页面
Editor.document.close();//关闭document,强制发送数据显示
</script>

 

Javascript处理文本格式 

调用execCommand函数处理文本,可以实现粗斜下划、对齐方式、超链接、字体(大小、颜色等功能) execCommand函数的语法:

bSuccess = object . execCommand ( sCommand ,bUserInterface , vValue )

    document.execCommand() 解析


function format(what, opt)
{
    Editor.focus();
    Editor.document.execCommand(what, 
false, opt);
}

 

识别选择的文本,操纵DOM 

这里有几个FF和IE不同的地方,一个是回车,IE下是<p>,比FF的<br/>空了很多,解决方法是重载编辑器document的回车事件:

Editor.document.onkeypress = fnKeypress;
function fnKeypress(){
    
if(document.all){
        
var ev = Editor.event;
        
if(ev.keyCode==13 && !ev.shiftKey){//判断回车键
            var s = Editor.document.selection;
            
if (s!=null){
                
var r = s.createRange();
                
if (r!=null{
                    r.pasteHTML(
"<BR/>");
                    r.select();
//将光标移动到新行
                }

            }

            
return false;
        }

    }

}

处理选择的文本:

function message()
{
    
if(document.all)//如果是 IE. (虽然,FF也可以用document.all)
    alert(Editor.document.selection.createRange().text);
    
else{
        
//alert(Editor.document.getSelection());
        alert(Editor.getSelection());
        
var selection = Editor.getSelection().getRangeAt(0);
        
var linkElement = Editor.document.createElement("a"); //创建一个新的<A>节点
        linkElement.href = "http://asers.blog.sohu.com";//设置<A>节点的href属性
        selection.surroundContents(linkElement);//加入超链接
    }

}

 

插入html代码:

 

function insert(html)
{
    
debugger;
    
if(window.event)
    Editor.document.selection.createRange().pasteHTML(html);
    
else
    format(
"insertHTML", html);
}

评论

相关推荐

    163网易编辑器(兼容FF,IE6,IE7,IE8)

    编辑器的设计目标是提供一个友好、高效的文字录入与排版环境,使得用户无论在Firefox(FF)、Internet Explorer 6(IE6)、Internet Explorer 7(IE7)还是Internet Explorer 8(IE8)等不同浏览器下都能获得一致的...

    备忘:兼容ff和ie的鼠标样式+javascript字符串hash+浮动提示

    标题中的“兼容ff和ie的鼠标样式”指的是在网页开发中如何实现鼠标指针效果在Firefox(火狐浏览器)和Internet Explorer(IE浏览器)之间的兼容性。由于不同的浏览器对CSS样式的支持存在差异,开发者需要编写特定的...

    光标处插入,兼容IE6,IE7,FF等,适用于编辑器,浏览插入表情

    本文将围绕“光标处插入”这一主题,深入探讨如何在不同的浏览器环境下,如IE6、IE7和Firefox(FF)中实现兼容性的光标插入功能,特别适用于编辑器中的表情浏览和插入。 首先,让我们了解光标插入的基本概念。在Web...

    简单纯UBB编辑器,支持IE,FF。

    3. **跨浏览器兼容性**:由于UBB编辑器支持IE和FF,这意味着它采用了兼容多浏览器的Web开发技术,如JavaScript和CSS,确保用户在不同浏览器环境下都能获得一致的编辑体验。 4. **源码获取与改造**:描述中的“网上...

    一款垃圾中的极品HTML编辑器(兼容IE OR FF)

    【编辑器兼容性】 在Web开发中,浏览器兼容性是至关重要的。不同的浏览器可能对HTML、CSS和JavaScript的解析方式不同,导致同一代码在不同浏览器上表现不一。FreeEditor的开发者表明该编辑器能够在IE和FF下运行,这...

    JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)

    在网页开发中,编辑器是常见的一种用户交互组件,它允许用户输入和编辑文本内容,如富文本编辑器。在JavaScript中,对于基于iframe的编辑器,有时我们需要在用户光标所在的位置插入文本或者图片。本文将详细讲解如何...

    javaScript55个技巧

    需要注意的是,这种方法只在IE浏览器中有效,并且由于安全性和兼容性问题,在现代Web开发中已不再推荐使用。 以上是对提供的部分JavaScript技巧的详细解读。这些技巧涵盖了从安全性增强到用户体验改善等多个方面,...

    javascript获取选中的文本的方法代码.docx

    在网页开发过程中,有时候我们需要获取用户在页面上选中的文本内容,例如在富文本编辑器、文字处理工具或者交互式文档中。通过JavaScript,我们可以轻松实现这一功能。 #### 方法一:兼容IE与现代浏览器 ```...

    美工笔试题目

    掌握如Photoshop、Illustrator、Sketch等图形设计软件,以及Sublime Text、Visual Studio Code等代码编辑器,是Web设计师的基本要求。 ### 5. 配色技巧 了解色彩理论,能够运用三原色和四原色创造和谐的配色方案,...

    JS代码收藏大全

    - **应用场景**:适用于那些不希望用户直接访问或修改页面元素的情况,如在线编辑器或某些交互式应用。 #### 二、禁止选中、复制页面内容 - **代码实现**: ```html ``` - **作用**:此代码段可以阻止用户...

    jQuery获取剪贴板内容的方法

    然而,某些场景下,例如在线文本编辑器、富文本输入框的实现,经常需要处理剪贴板的内容。本文将详细介绍jQuery获取剪贴板内容的方法,并提供针对不同浏览器的实现技巧。 ### jQuery获取剪贴板内容的方法 在介绍...

    网页制作常用的小技巧

    在输入框等元素上设置`style="ime-mode:disabled"`,可以禁用输入法编辑器(IME)模式。 ```html &lt;input style="ime-mode:disabled"&gt; ``` 这对于某些特定场景下的输入控制非常有用。 #### 8. 检测框架嵌套 如果...

    JS操作Word生成表格

    在IT行业中,JavaScript(简称JS)通常用于网页前端交互,但通过特定的库和API,我们也能使用JS来操作Microsoft Word文档,包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能,以及相关的...

    filter教程

    然而,由于浏览器兼容性的限制,使用滤镜时可能需要配合JavaScript或polyfills来实现跨浏览器的支持。此外,过度依赖滤镜可能导致页面性能下降,因此在实际应用中需要权衡效果和性能。 最后,学习CSS滤镜时,除了...

    网管教程 从入门到精通软件篇.txt

     创建和删除硬盘驱动器上的分区。diskpart 命令仅在使用故障恢复控制台时才可用。  diskpart [ /add |/delete] [device_name |drive_name |partition_name] [size]  参数 无  如果不带任何参数,diskpart ...

Global site tag (gtag.js) - Google Analytics