`

实现html进入编辑状态,在线编辑器中用到的(html的designMode)

 
阅读更多
<head>
    <script type="text/javascript">
        var editorDoc;
        function InitEditable () {
            
            var editorBody = document.body;

                // turn off spellcheck
            if ('spellcheck' in editorBody) {    // Firefox
                editorBody.spellcheck = false;
            }

            if ('contentEditable' in editorBody) {
                    // allow contentEditable
                editorBody.contentEditable = true;
            }
            else {  // Firefox earlier than version 3
                if ('designMode' in editorDoc) {
                        // turn on designMode
                    editorDoc.designMode = "on";                
                }
            }
        }

        function ToggleBold () {
            editorDoc.execCommand ('bold', false, null);
        }
    </script>
</head>
<body onload="InitEditable ();">
   
</body>
分享到:
评论

相关推荐

    HTML在线编辑器原理

    HTML在线编辑器是一种基于Web的工具,允许用户直接在浏览器中编辑HTML...在实际应用中,HTML在线编辑器还会结合其他技术,如AJAX来实现实时预览,或者使用富文本编辑器库如CKEditor、TinyMCE等来提供更复杂的编辑功能。

    HTML在线编辑器原理-简单深入.docx

    本文将详细介绍HTML在线编辑器的基本原理和技术实现细节,主要包括HTML在线编辑器的概念、应用场景、关键技术(如DHTML和DOM操作)、以及具体的实现步骤。 #### 二、基础知识 1. **HTML在线编辑器**:是一种基于...

    HTML在线编辑器的基本概念与相关资料第1/2页

    HTML在线编辑器的核心原理在于利用浏览器的内置功能来实现文本编辑和HTML代码的生成。具体来说,这涉及到以下几个关键步骤: 1. **检测浏览器版本**:确保用户使用的浏览器支持必要的编辑功能,如IE5.0及以上版本。...

    DesignMode

    15. **解释器模式(Interpreter)**:给定一个语言,定义它的文法表示,并提供一个解释器用于解释该语言中的句子。 16. **迭代器模式(Iterator)**:提供一种方法顺序访问聚合对象的元素,而又不暴露其底层表示。 ...

    编辑器中designMode和contentEditable的属性的介绍

    在实现在线编辑器的过程中,有两个关键的属性至关重要,即`designMode`和`contentEditable`。它们分别在不同的浏览器环境下启用文档的编辑功能。 `designMode`是HTML文档的`document`对象的一个属性,主要用于...

    C# winfrom html编辑器2

    总的来说,创建一个C# WinForm HTML编辑器2涉及到多个技术层面,包括对WinForm控件的理解、HTML和DOM操作、用户界面设计以及可能的文件处理和解压缩。通过学习和实践,开发者可以创建出功能丰富、用户友好的桌面HTML...

    如何检测控件的DesignMode

    在C#中,`DesignMode`属性主要用在自定义UserControl中,以便在Visual Studio设计器中提供更好的交互体验。 首先,`DesignMode`属性是`System.ComponentModel.Component`类的一部分,因此所有继承自`Component`的类...

    利用FCKeditor在JSP_JavaEE中实现在线编辑.pdf

    实现在线编辑功能需要解决两个关键问题:一是实现编辑区域与自动产生 HTML 代码,二是设计简单的在线编辑器。实现编辑区域可以使用两种方法:一是设置 DIV 或 TABLE 的 contentEditable 属性为 True, 让一个区域可...

    自己打造HTML在线编辑器的实现难点分析

    在使用iframe实现在线编辑器时,开发者需要通过JavaScript将iframe的内容窗口设置为可编辑状态。具体操作是将iframe.contentWindow.document的设计模式(designMode)设置为“on”,同时确保内容可编辑...

    Mozilla designMode and object with absolute position

    结合这两个概念,有时会在富文本编辑器的实现中使用绝对定位,例如,创建浮动工具栏或者在编辑区域内插入具有固定位置的对象。在提供的压缩包文件`designMode_absolute.html`中,很可能包含了这样一个示例,演示如何...

    在线所见即所得HTML编辑器的实现原理浅析

    打开编辑功能主要是使IFrame内的文档进入可编辑状态。这可以通过设置`designMode`属性为"on"来实现,使得用户可以直接在IFrame内输入和编辑内容。在初始化时,还需要向IFrame的文档中写入基础HTML结构,以确保编辑器...

    YEditor:丰富的编辑器,不包含tententEditable或designMode

    而`designMode`是IE浏览器独有的一种全局属性,可以将整个文档或者某个元素设置为可编辑状态。不使用这两个属性可能意味着YEditor采用了不同的实现方式,可能是通过自定义事件处理、DOM操作或者其他JavaScript库来...

    Editor-HTML.zip_delphi HTML_delphi webbrowser_edit_editor_html_e

    要创建一个HTML编辑器,我们需要做的是将WebBrowser组件放置到表单上,并启用其设计模式。设计模式允许用户直接在WebBrowser组件中编辑HTML内容,就像在网页上那样。这可以通过调用WebBrowser组件的`...

    设置iframe的document.designMode后仅Firefox中其body[removed]为br

    在Web开发中,`document.designMode` 是一个非常重要的特性,尤其在构建富文本编辑器时。这个属性允许我们使整个文档或者特定元素进入编辑模式,使得用户可以直接在页面上进行文本编辑。当`designMode`被设置为`'on'...

    在线编辑器的实现原理(兼容IE和FireFox)

    在线编辑器的实现原理主要涉及Web页面中的富文本编辑功能,尤其关注如何使其在不同的浏览器,如Internet Explorer(IE)和Firefox中保持兼容性。在本文中,我们将深入探讨在线编辑器的核心技术,并通过示例代码展示...

    document.designMode的功能与使用方法介绍

    这个属性允许用户直接在浏览器中编辑HTML内容,类似于一个简单的在线文本编辑器。以下是对 `document.designMode` 的详细功能和使用方法的介绍。 **一、设计模式的启用与禁用** 设计模式可通过设置 `document` ...

    Delphi能用TWebBrowser制作网页编辑器吗demo宣贯.pdf

    本文将基于《Delphi能用TWebBrowser制作网页编辑器吗demo宣贯.pdf》的内容,详细介绍如何利用 Delphi 的 TWebBrowser 组件制作网页编辑器的关键技术和实现方法。 #### 二、TWebBrowser 组件简介 TWebBrowser 组件是...

    Delphi中使用WebBrowser做为网页编辑器_Register_HTMLEdit_v0.01

    开发者可以通过这个例子学习到如何控制WebBrowser组件进入编辑模式、执行编辑命令以及与HTML文档交互。虽然这种方式存在一定的局限性,但不失为在Delphi应用程序中快速实现基本网页编辑功能的一种有效途径。

Global site tag (gtag.js) - Google Analytics