HTML5内联编辑 - 星云互动 - ITeye博客

`

zlpx

浏览: 155323 次
性别:
来自: 北京

最近访客更多访客>>

dragonsky_w

whatl

zhangbody

xy14qg

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

f308185993： 123123[size=xx-small][color=dar ...
在HTML的text input控件获取焦点时设置背景颜色
crackajack_zg： good ，很简单的代码、
用JQuery改变图片的透明度
qq184234675：求jquery1.9+的
用JQuery改变图片的透明度
demonzoo：很奇怪，我刚试了无数次，在本地直接打开就是无法弹出提示。后来我 ...
用HTML5产生操作系统通知
demonzoo：为什么我在chrome下无法显示通知内容，无论按哪个按钮都是弹 ...
用HTML5产生操作系统通知

HTML5内联编辑

博客分类：

JavaScript
HTML5

阅读更多

下面的例子展示了使用div的内联编辑模式。

<html>
  <head>
    <title>
      Editable &lt;div&gt; Element
    </title>

    <script type="text/javascript">
      function showSource() 
      {
        var content = document.getElementById
          ("div").innerHTML;
        content.replace(/</g,'&lt;');
        content.replace(/>/g, '&gt;');
        alert(content);
      }
  
      function createLink() 
      {
        var url = prompt("Enter URL:", "http://");
        if (url)
          document.execCommand("createlink",  false, url);
      }
    </script>
  </head>

  <body>
    <h1>Editable &lt;div&gt; Element</h1>
    <div> 
      <input type="button" value="Bold"   onclick="document.execCommand('bold', false,   null);"> 
      <input type="button" value="Italic"   onclick="document.execCommand  ('italic', false, null);"> 
      <input type="button" value="Underline" 
        onclick="document.execCommand('underline',    false, null);"> 
      <input type="button" value="Add Link"   onclick="createLink();"> 
      <input type="button"  value="Display Source"  onclick="showSource();"> 
    </div> 
    <br>
    <div id="div" style='border:solid   black; height: 300px; width: 400px'  contenteditable="true">
    </div> 

  </body>
</html>

源码下载：

0
顶

0
踩

分享到：

用JQuery寻找页面所有的电子邮箱地址 | 用 JQuery隐藏内容

2011-10-24 09:22
浏览 998
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

WEB开发之 HTML5 内联 SVG.docx: HTML5 内联 SVG 是一种将可伸缩矢量图形（SVG）直接嵌入到 HTML 文档中的技术，使得网页可以包含丰富的图形元素，并且这些图形在任何尺寸下都能保持清晰的显示效果。SVG 是万维网联盟（W3C）制定的一种标准，它的...

HTML5 内联 SVG: HTML5 内联 SVG HTML5 支持内联 SVG。 SVG Sorry, your browser does not support inline SVG. 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 ...

去除编辑器样式中HTML: 5. **内容重写**：在去除样式和标签后，将纯净的文本内容重新组合成新的HTML字符串。可以使用`outerHTML`属性将节点转换回字符串，然后拼接成完整的HTML。 6. **安全考虑**：在处理用户输入时，必须防止XSS（Cross-...

Html编辑器（含源码）: 由于此编辑器是基于WebBrowser控件，它可能还支持一些HTML5的新特性，例如拖放功能、媒体元素的内联播放等。此外，源码的提供意味着开发者可以深入理解其内部工作原理，根据需要进行自定义和扩展，例如添加对特殊...

HTML编辑器-学习版: 4. CSS样式：用于控制页面布局和视觉效果，可以内联（在HTML元素中），内部（在`<style>`标签内），或外部（在单独的CSS文件中）定义。 5. JavaScript基础：用于增加页面交互性，包括变量、函数、事件处理等。 6. ...

angular-play-inline-editor:玩转 Angular - 内联编辑器: 内联编辑器是Angular应用中的一个重要组件，它允许用户直接在页面上编辑内容，而无需跳转到新的编辑页面。"angular-play-inline-editor"项目正是这样一个专注于提供内联编辑功能的库，旨在帮助开发者更轻松地在...

文本编辑器支持各种Html格式: 4. **CSS样式集成**：文本编辑器通常支持内联样式、内部样式表（`<style>`标签）和外部样式表（`.css`文件），使用户能方便地控制HTML元素的样式。 5. **JavaScript支持**：现代文本编辑器还支持JavaScript的编写，...

基于WEB的 H5制作工具，H5编辑器.zip: HTML5对多媒体的支持非常强大，它可以内联播放音频和视频，无需依赖Flash或其他插件。因此，这个编辑器可能特别适合创建包含音频、视频和图像的富媒体内容。而“游戏”标签表明该工具可能也具备制作HTML5游戏的功能...

15个基于Web的HTML编辑器: NicEdit是一个轻量级、跨平台、内联的内容编辑器。它可以使用户很容易地在浏览器上实时编辑站点内容。NicEdit JavaScript能够快速地整合到任一站点中，并使任一元素/DIV变成可以编辑或将标准文本区域转变成富文本...

WinForm可用的HTML编辑器C#: 5. **图片处理**：上传和显示本地或网络图片，也可以进行简单的图片编辑操作。 6. **HTML预览**：提供实时预览功能，让用户在编辑过程中就能看到最终效果。 7. **代码视图**：除了WYSIWYG（所见即所得）编辑模式，还...

HTML5及CSS3web前端开发技术习题答案解析.pdf: ### HTML5及CSS3 Web前端开发技术习题答案解析 #### 1. HTML5与HTML4的主要区别及其解决的问题 HTML5与HTML4相比，在Web前端开发领域解决了多个关键问题，主要包括： - **浏览器间的兼容性问题**：早期不同浏览器...

Fresh HTML 3.47 绿色版_是一个可支持所见即所得功能的HTML编辑器: 5. **优化与清理**：该编辑器还具有优化和清理HTML代码的功能，可以去除不必要的空格、注释和标签，提高页面加载速度。 6. **兼容性检查**：Fresh HTML 3.47会检查代码的浏览器兼容性，确保网页在不同的浏览器环境...

VB编写的HTML编辑器: 5. **JavaScript集成**：如果需要更复杂的交互逻辑，可以通过内联JavaScript或外部脚本文件的方式，在VB编辑器控件中引入JavaScript代码。 6. **文件I/O操作**：VB提供了丰富的文件操作函数，可以用来保存和加载...

matlab开发-内联定义函数inscripts: - **便利性**：在调试过程中，内联函数可以方便地修改和测试，无需单独编辑和保存文件。 ### 4. 内联函数的限制虽然内联函数有许多优点，但也有其局限性： - **复杂性**：对于复杂的函数，内联可能会导致编译问题...

html(C/S编辑器)源代码: HTML编辑器源代码中可能包含内联样式、内部样式表或外部样式表的引用，以实现不同元素的样式设定。 3. **JavaScript**：JavaScript是实现网页动态功能的关键，HTML编辑器的源代码中很可能使用JavaScript来处理用户...

html编辑器: 7. **CSS集成**：支持内联样式编辑，也可链接外部CSS文件，方便样式调整。 8. **JavaScript集成**：支持添加和编辑JavaScript代码，实现动态效果。 9. **版本控制**：保存并追踪代码版本，方便回滚和比较。 10. **多...

HTML5 notes for professionals: 这份资料被称为"HTML5 notes for professionals"，是一本专业人员学习HTML5的指南书籍，包含了超过100页关于HTML5的专业技巧和窍门。这本书的目的是全面介绍HTML5的各个方面，其内容包括了从基础概念到高级应用的...

《HTML5从入门到精通》中文学习教程.zip: 5. **SVG矢量图**：HTML5支持内联SVG（Scalable Vector Graphics），用于创建高质量的矢量图像，适合制作图表、图标和其他复杂的图形。 6. **Web Workers和Web Storage**：Web Workers允许在后台线程执行复杂计算，...

react-easy-edit:React 的内联编辑库: React容易编辑允许对 HTML5 输入组件进行内联编辑的 React 库，请在尝试沙箱！有关完整的库文档，！ :memo: 特征支持input （大多数类型，甚至带有datalist输入）、 textarea 、 radio 、 checkbox和select HTML ...

html 编辑器--使用简单: 例如，`Inline Rich Text Application`系列文件可能包含了如何将NicEdit应用于网页元素的示例，展示如何创建内联编辑器，以及如何利用编辑器的各种功能来实现文本编辑。总的来说，NicEdit是一个非常适合那些希望在...

Global site tag (gtag.js) - Google Analytics