`
hwpok
  • 浏览: 251819 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

在线编辑器 兼容Firefox,IE Demo

阅读更多
rw_editor.js
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->/*
*write by 惠万鹏
*date 2008-12-04
*/

/** 判断是ie浏览器还是火狐浏览器 */
var IE_BROWSER = 0;
var FF_BROSWER = 1;

var browserType = IE_BROWSER;
if (window.netscape)
{
    browserType 
= FF_BROSWER;


/** 得到iframe对象的内容窗口 */
var oEditor = document.getElementById("editeFrame").contentWindow;

oEditor.document.designMode 
= 'On';
oEditor.document.contentEditable 
= true;
/** 兼容火狐浏览器 */
oEditor.document.write('
<html><body>aaa</body></html>');
oEditor.document.close();

/** 个性化窗口 */
var individuationWin = null;
/** 更改代码窗口 */
var editorWin = null;    
/** 预览窗口 */
var previewWin = null;
/** 编辑开始*********************************************** */
function initialHtml(hmtl)
{
    oEditor.document.designMode 
= "On";
    oEditor.document.contentEditable 
= true;
    oEditor.document.write(hmtl);
    oEditor.document.close();
}  
/** 编辑结束*********************************************** */


/** 编辑开始*********************************************** */
function editor()
{
    
if(editorWin == null  || editorWin.closed == true)
    {
        
var iWidth = 800,iHeight = 600//弹出窗口的宽度,弹出窗口的高度;
         var iTop = (window.screen.availHeight-30-iHeight)/2//获得窗口的垂直位置;
          var iLeft = (window.screen.availWidth-10-iWidth)/2;  //获得窗口的水平位置;
          
          
var winParameters = "width=" + iWidth + ",height=" + iHeight;
          winParameters 
+= ",left=" + iLeft + ",top=" + iTop;
          winParameters 
+= ",menubar=no,scrollbars=yes, resizable=yes,location=no, status=no";
    
        editorWin 
= window.open("editCode.html","编辑原代码窗口",winParameters);
    }
    
else
    {
        editorWin.focus();
    }
}
/** 编辑结束*********************************************** */

/** 个性化开始*********************************************** */
function individuation()
{
    
/** 兼容ie和fireFox */
    
if(individuationWin == null || individuationWin.closed == true)
    {
        
var iWidth = 200,iHeight = 100;
         
var iTop = (window.screen.availHeight-30-iHeight)/2;
          
var iLeft = (window.screen.availWidth-10-iWidth)/2;
          
          
var winParameters = "width=" + iWidth + ",height=" + iHeight;
          winParameters 
+= ",left=" + iLeft + ",top=" + iTop;
          winParameters 
+= ",menubar=no,scrollbars=yes, resizable=yes,location=no, status=no";
          
        individuationWin 
= window.open("individuation.html","个性化窗口",winParameters);
    }
    
else
    {
        individuationWin.focus();
    }
}
/** 个性化结束*********************************************** */


/** 预览开始*********************************************** */
function perview()
{
    
if(previewWin != null && !previewWin.closed)
    {
        previewWin.close();
    }
    
var iWidth = 1024, iHeight = 800;
     
var iTop = (window.screen.availHeight-30-iHeight)/2;
      
var iLeft = (window.screen.availWidth-10-iWidth)/2;
      
      
var winParameters = "width=" + iWidth + ",height=" + iHeight;
      winParameters 
+= ",left=" + iLeft + ",top=" + iTop;
      winParameters 
+= ",menubar=no,scrollbars=yes, resizable=yes,location=no, status=no";
    
    previewWin 
= window.open("","预览",winParameters);
    
var html = getAllText();
    previewWin.document.write(html);
}
/** 预览结束*********************************************** */

/** 得到所有文本-开始*********************************************** */
function getAllText()
{
    
var html = "html><body></body></html>";
    
if(browserType == IE_BROWSER)
    {
        html 
= _getAllText4IE();
    }
    
else if(browserType == FF_BROSWER)
    {
        html 
= _getAllText4FF();
    }
    
else
    {
        alert(
"this software only for ie and firefox!");
    }
    
return html;
}

function _getAllText4IE()
{
    
return oEditor.document.lastChild.outerHTML;
}

function _getAllText4FF()
{
    
/** fireFox下没有outerHTML,所以手工加上html标签 */
    
return "<html>" + oEditor.document.documentElement.innerHTML + "</hmtl>";
}
/** 得到所有文本-结束*********************************************** */

/**复制-开始 *************************************************/
function copy()
{
    
if(browserType == IE_BROWSER)
    {
        _getCopy4IE();
    }
    
else if(browserType == FF_BROSWER)
    {
        _getCopy4FF();
    }
    
else
    {
        alert(
"this software only for ie and firefox!");
    }
}

function _getCopy4IE()
{
    
var selectedText = oEditor.document.selection.createRange().text;
    
/** 执行拷贝操作 */
    setClipboard(selectedText); 
}

function _getCopy4FF()
{
    
/** 火狐下得到选中的文本 */
    
var selectedText = oEditor.getSelection().toString();
    
/** 执行拷贝操作 */
    setClipboard(selectedText); 
}
/**复制-结束 *************************************************/

/**粘贴-开始*************************************************/
function paste()
{
    
var html = getClipboard();
    insertHTML(html);
}
/**粘贴-结束*************************************************/


/**插入HTML-开始***************************************/  
function insertHTML(html)
{
    
if(browserType == IE_BROWSER)
    {
        _insertHTML2IE(html);
    }
    
else if(browserType == FF_BROSWER)
    {
        _insertHTML2FF(html);
    }
    
else
    {
        alert(
"this software only for ie and firefox!");
    }
}

function _insertHTML2IE(html)
{
    
if (oEditor.document.selection.type.toLowerCase() != "none")
    {
        oEditor.document.selection.clear() ;
    }
    oEditor.document.selection.createRange().pasteHTML(html) ; 
}

function _insertHTML2FF(html)
{
    
var r = oEditor.getSelection().getRangeAt(0);
    
var oFragment = r.createContextualFragment(html); 
    r.deleteContents();
    r.insertNode(oFragment);
}
/**插入HTML-结束***************************************/

editor.html
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
    
<input type="button" value="复制" onclick="copy();"
    
/><input type="button" value="粘贴" onclick="paste();"
    
/><input type="button" value="编辑" onclick="editor();"
    
/><input type="button" value="个性" onclick="individuation();"
    
/><input type="button" value="预览" onclick="perview();"/><br />
    
<iframe id="editeFrame" marginheight="1" marginwidth="1" width="550" height="286" scrolling="auto"></iframe>
    
<script type="text/javascript" src="copyPaste.js"></script>
    
<script type="text/javascript" src="rw_editor.js"></script>
</body>
</html>

individuation.html
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  
<head>
    
<title>个性化设置</title>
    
<script type="text/javascript">
        
function individuation()
        {
            window.opener.insertHTML(document.getElementById(
"individuationType").value);
        }
    
</script>
  
</head>
  
  
<body>
    
<select id="individuationType" name="individuationType" style="width:100;">
        
<option value="#name#">姓名</option>
        
<option value="#sex#">性别</option>
        
<option value="#age#">年龄</option>
        
<option value="#email#">EMAIL</option>
        
<option value="#address#">地址</option>
    
</select>
    
<input type="button" value="确定" onclick="individuation();">
  
</body>
</html>


分享到:
评论

相关推荐

    wangEditor2版本兼容IE8浏览器

    6. **示例和Demo**:压缩包中可能包含一些示例页面,展示了编辑器的基本用法和高级功能,这对于快速理解和测试编辑器是非常有帮助的。 7. **许可证信息**:在开源项目中,许可证文件是至关重要的,它规定了软件可以...

    WeisEditor v2.2.1(.net Web编辑器,兼容IE/Firefox).rar

    兼容IE,Firefox浏览器 新修改 提供初级API WeisAPI(详见Demo使用,Editor.InnerHTML及Editor.Focus() ) 新增功能有: 1:过滤危险的标签字符WeisConfig.isReplaceDangerousCode。 2:设置编辑器回车事件的模式...

    JS导入导出Excel 兼容IE、Firefox、Chrome等浏览器

    "JS导入导出Excel 兼容IE、Firefox、Chrome等浏览器"这一技术主题,聚焦于如何使用JavaScript(JS)在各种浏览器环境下处理Excel文件,包括古老的Internet Explorer(IE)、Firefox以及Chrome。下面我们将深入探讨这...

    umeditor网页编辑器完整demo

    - umeditor基于浏览器的JavaScript环境,兼容主流的浏览器如Chrome、Firefox、Safari、Edge和IE等。 - 采用异步加载机制,提高页面加载速度,优化用户体验。 - 兼容HTML5标准,支持现代Web技术,如canvas绘图、拖放...

    js绘图类库(兼容IE/FF/chrome) web流程图、图表

    1、基于raphael2.0的绘图(内含大量...2、几乎兼容所有浏览器包括ie, firefox,chrome,opera, Safari 3、内含说明文档和演示代码,详见demo文件夹 4、可动态拖动图形(贝磁曲线、动态拾色器、图表、地图导航、流程图等)。

    百度富文本编辑器UEditorDemo

    6. **跨平台兼容**:UEditor设计时考虑到了浏览器兼容性,支持主流的Chrome、Firefox、Safari、Edge和IE等浏览器,确保在不同环境下都能正常运行。 7. **API接口**:通过UEditor提供的API,开发者可以方便地与后端...

    商业源码-编程源码-CuteEditor6.4网页编辑器及Demo.zip

    它支持多种浏览器,包括IE、Firefox、Chrome和Safari,具有良好的跨平台兼容性。CuteEditor提供了丰富的编辑功能,如字体设置、颜色选择、对齐方式、插入图片、超链接、表格等,还支持HTML代码编辑模式。其界面友好...

    ASP.NET-[其他类别]口凡网编辑器源码及Demov1.0.zip

    8. **兼容性**:编辑器是否支持不同的浏览器和设备,如IE、Firefox、Chrome、Safari、Edge,以及移动设备。 通过分析和学习这个开源编辑器的源码,开发者可以了解到如何在ASP.NET环境中实现一个功能强大的Web组件,...

    kissy_editor淘宝官方。点开demo.html即可实现网页编辑器

    考虑到Web应用需要覆盖多种浏览器环境,Kissy Editor进行了全面的兼容性测试,确保在主流浏览器如Chrome、Firefox、Safari、IE(至少到IE8)等环境下稳定运行。 对于初次接触Kissy Editor的开发者,只需简单几步就...

    富文本编辑器froalaEditor(全面)附教程

    同时,它兼容现代浏览器,包括Chrome、Firefox、Safari、Edge以及旧版的IE11,确保了广泛的用户覆盖。 7. **版本信息** 压缩包文件名为“froala_editor_2.8.5”,表明这是froalaEditor的2.8.5版本。每个版本都可能...

    ueditor Demo

    7. **兼容性**:ueditor广泛兼容各种主流浏览器,包括Chrome、Firefox、Safari、IE等,确保在不同环境下都能稳定工作。 总的来说,ueditor是一款功能强大、易用且灵活的在线编辑器,无论你是开发个人博客、企业官网...

    fckeditor demo

    5. **跨浏览器兼容性**:FCKeditor设计时考虑了多浏览器支持,包括IE、Firefox、Chrome、Safari等,这在实际开发中是非常重要的。 6. **安全考虑**:在使用FCKeditor时,需要注意防止XSS(Cross Site Scripting)...

    富文本编辑器kindeditor

    KindEditor的主要特点是易用、可定制性强,支持多种浏览器环境,包括IE、Firefox、Chrome、Safari和Opera等。 在网页开发中,富文本编辑器扮演着重要的角色,它允许用户以WYSIWYG(所见即所得)的方式编辑内容,...

    fckeditor-java-demo-2.4.1.rar_DEMO_fckeditor_fckeditor demo_fcke

    FCKeditor是由Fernando Goycoolea开发的一款JavaScript实现的富文本编辑器,它的主要特点是兼容性好,支持多种浏览器,包括IE、Firefox、Chrome、Safari和Opera等。FCKeditor提供了丰富的文本编辑功能,如字体选择、...

    fckeditor源文件和demo

    - **兼容性**:FCKeditor支持多种浏览器,包括IE、Firefox、Chrome、Safari和Opera等,但不同版本的浏览器可能存在兼容性问题,需要在实际应用中进行测试。 - **安全性**:FCKeditor允许用户输入HTML,这可能导致XSS...

    fckedit 编辑器 实例

    它使用JavaScript编写,兼容各种主流浏览器,包括IE、Firefox、Chrome、Safari和Opera。 ### 2. 安装与配置 在`FCKeditor_demo`压缩包中,你应该能找到FCKeditor的基本结构,包括`editor`目录,其中包含了编辑器的...

    百度富文本编辑器

    6. **兼容性**:Ueditor兼容主流浏览器,包括Chrome、Firefox、Safari、IE(至IE9)等,确保在各种环境下都能稳定运行。 7. **轻量级**:尽管功能强大,但Ueditor的体积相对较小,加载速度快,对服务器资源占用低。...

    umeditor完整demo

    5. **兼容性好**:兼容主流浏览器,如Chrome、Firefox、Safari、IE9+等。 6. **API接口**:丰富的API接口,可以定制编辑器功能,满足个性化需求。 **配置与使用UMEditor**: 1. **下载与解压**:首先,你需要从官方...

    xheditor编辑器asp.net源码

    xheditor是一款基于JavaScript的开源富文本编辑器,支持HTML5,兼容主流浏览器如Chrome、Firefox、Safari、IE6+。其界面简洁,操作友好,具备多种编辑模式,包括源代码模式、预览模式、文本模式等,满足不同用户的...

    HTML编辑器FCKeditor使用详解

    9. **兼容性**:与大部分主流浏览器(如IE、Firefox、Chrome、Safari等)兼容。 在使用FCKeditor时,首先需要在项目中引入FCKeditor的库文件,这通常包括JavaScript文件、CSS文件以及必要的图片资源。然后通过...

Global site tag (gtag.js) - Google Analytics