`
luolonghao
  • 浏览: 119153 次
  • 性别: Icon_minigender_1
  • 来自: Shanghai
社区版块
存档分类
最新评论

编辑器HTML标准化

HTML浏览器IESVNSafari 
阅读更多
五一期间，初步完成了wrap功能，就是选中的文字上添加自定义标记，比如span。
因为IE等浏览器执行默认的execCommand设置颜色、大小、字体时都会生成不标准的font tag，还有undo/redo时要保存选中状态，所以控制selection的range非常重要。

之前担心实现这个功能以后代码变得臃肿，没有深入研究这方面的技术。这几天仔细研究各个浏览器的selection和range以后发现其实没那么复杂，IE只不过没提供startContainer、startOffset之类的API，大部分代码可以和非IE浏览器（Firefox、Safari、Opera等）共用，这部分代码不超过300行。

例子： 
这是红色文字。


选中"红色文字"，设置成红色，并把文字大小设置成24px，不管在哪个浏览器都会生成span tag。 
这是<span style="color:#ff0000;font-size:24px;">红色文字。</span>


上面例子是最简单的情况，还有选择多行、反复设置属性等复杂的情况，初步测试没发现大问题，只是发现IE的remove format命令不会清除span，这个功能要自己实现了。

感兴趣的同学可以看SVN里的代码
http://kindeditor.googlecode.com/svn/branches/roddy

接下来工作：
1. 仔细测试各个浏览器，修改bug。
2. undo/redo保存selection状态。

稳定之后包含在3.2版本里发布。


3
顶
1
踩
分享到：
| KindEditor 下一步开发计划
评论
1 楼 makemyownlife 2009-08-10  
加油，看好你做的编辑器!!
发表评论

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

相关推荐

    HTML json格式化编辑器

    在这个场景中，"HTML json格式化编辑器"是指一个工具，它允许开发者对HTML和JSON代码进行格式化，以提高可读性和维护性。 HTML格式化编辑器的主要功能包括： 1. **自动缩进**：当HTML代码混乱无序时，编辑器可以...

    html可视化编辑器

    HTML可视化编辑器是一种工具，它允许用户通过图形用户界面（GUI）来创建和修改HTML代码，而无需直接编写源代码。这种编辑器通常被称为所见即所得（WYSIWYG，What You See Is What You Get）编辑器，因为它提供了一个...

    Winfrom版 Html编辑器

    - 优点：支持完整HTML标准，可执行JavaScript，交互性好。 - 缺点：依赖IE引擎，更新较慢，可能会受到浏览器安全策略限制。 3. **第三方控件** - 市场上存在许多第三方HTML编辑器控件，如Telerik RadEditor、...

    html在线编辑器（是用js编写的）

    **HtmlEditor** 可能是指一个更通用的HTML编辑器名称，这可能是一个简单或者定制化的解决方案，用于在网页上编辑HTML代码。它通常会包含基本的文本格式化功能，并可能提供一些高级特性，如预览、HTML标签查看和代码...

    C# html文本编辑器

    这个编辑器允许开发者在C#应用程序中集成一个功能丰富的HTML编辑界面，用户可以在这个界面上编辑HTML代码，创建和格式化富文本内容。 "WinHtmlEditorControl.dll"是这个编辑器的核心组件，它是一个动态链接库（DLL...

    html文本编辑器及思路

    HTML文本编辑器是一种工具，它允许用户以可视化的界面创建和编辑HTML代码。在Web开发中，这样的编辑器是至关重要的，因为它们简化了网页内容的制作过程，使得非编程背景的用户也能轻松构建和修改网页。下面我们将...

    ExHtmlEditor可视化html编辑器（绿色汉化）

    ExHtmlEditor是一款强大的可视化HTML编辑器，专为学习和编写HTML文档而设计。这款绿色汉化版使得国内用户能够更加方便地使用，无需安装，直接解压即可运行，避免了安装过程中可能出现的语言障碍和系统冲突问题。作为...

    html 文本编辑器

    2. **HTML语法理解**：编辑器需要能够理解和处理HTML标签，确保生成的代码符合标准。 3. **事件处理**：JavaScript用于监听用户交互，如点击按钮、选择字体等，并相应地更新HTML代码。 4. **富文本支持**：编辑器...

    VC++Editer编辑器，可视化编辑

    【VC++Editer编辑器，可视化编辑】是一个专为HTML编辑设计的开发工具，它提供了可视化界面，使得用户能够更加直观地对HTML代码进行编辑和修改。在编程领域，尤其是在Web开发中，可视化编辑器是一种非常实用的工具，...

    vs html文本编辑器

    - **数据持久化**：C#可以用来处理编辑器内容的保存和加载，如将HTML文本存储到数据库，或者从数据库检索内容并填充到编辑器中。 4. **最佳实践** - **安全性**：使用HTML编辑器时要注意XSS攻击，对用户输入进行...

    编辑器编辑器 html html

    HTML（HyperText Markup ...使用WYMEditor时，你需要在网页中引入jQuery库和WYMEditor的JavaScript文件，然后通过调用初始化函数来创建编辑器实例。例如： ```html &lt;script src="path/to/jquery.js"&gt;&lt;/script&gt; ...

    网页在线编辑器（html编辑器）

    这些编辑器允许用户在浏览器环境下直接输入、修改和格式化HTML代码，从而简化了网页内容的创建过程，尤其对非专业程序员而言，极大地提高了工作效率。 在线编辑器的核心功能通常包括文本输入、字体样式调整、段落...

    WinForm版 Html编辑器

    9. **保存和加载**：编辑的内容可以保存为HTML文件，之后在需要时加载回编辑器，方便内容的持久化存储和再次编辑。 10. **简单易用**：WinForm版Html编辑器往往设计简洁，易于集成到项目中，且提供了详细的文档和...

    Html在线编辑器

    1. **易用性**：HTML在线编辑器通常提供所见即所得（WYSIWYG）的界面，用户可以直接对文本进行格式化，就像在Word文档中一样。 2. **跨平台**：由于它们基于浏览器运行，可以在任何支持浏览器的操作系统上使用，如...

    HTML内容编辑器

    HTML内容编辑器是一种在线工具或软件组件，允许用户在网页上直接编辑HTML代码，而无需直接查看或操作源代码。这种编辑器通常被用于...随着Web技术的发展，HTML编辑器的功能也在不断进化，以满足更多样化的用户需求。

    纯Html+js在线编辑器 非常容易上手

    然后，通过JavaScript调用编辑器的初始化函数，指定`&lt;textarea&gt;`的ID，编辑器会自动接管这个元素并将其转化为富文本编辑器。对于不同服务器端技术的集成，主要是通过JavaScript来处理内容的提交，比如通过Ajax异步...

    json编辑器 json格式化工具

    JSON编辑器和格式化工具是开发者在处理JSON数据时的重要辅助工具，它们可以帮助用户更方便地查看、编辑和格式化JSON结构。 标题中提到的"json编辑器 json格式化工具"是指专门用于处理JSON数据的软件或在线服务。这...

    HTML编辑器源码.zip-安卓端demo

    HTML编辑器源码.zip是一个包含安卓端HTML编辑器示例应用的压缩包，它为开发者提供了在Android平台上构建HTML编辑器的功能。这个编辑器可能允许用户创建、编辑和预览HTML内容，对于需要在移动设备上处理网页内容的...

    15个基于Web的HTML编辑器

    Free Rich Text Editor是一个极其简单易用的HTML可视化编辑器，基于JavaScript，可以非常简单的执行和管理XHTML代码。 9. WMD: The Wysiwym Markdown Editor WMD是一个简单的轻量级HTML编辑器，比较适合使用于博客...

    网页在线编辑器，凌风迷你编辑器和jwysiwyg

    凌风迷你编辑器和jWYSIWYG作为两个典型代表，分别展示了简单易用和高度可定制的特性，为开发者提供了多样化的选择。在ASP和PHP的环境下，它们都能够很好地融入到现有系统中，实现高效的文本编辑和管理。

Magicbox
Global site tag (gtag.js) - Google Analytics