1.在文档加载完成以后,通过设置document.designMode = 'on'使文档为可编辑。
2.对文本的操作,如加粗、字体设置等,通过 document.execCommand(cmd,bool,param)来实现。
参数如下:
cmd:字符串,要执行的命令;
bool:布尔值,表示是否需要对该命令提供一个用户接口,Firefox在该值为true时报错,通常设置为false.
param:字符串,命令执行需要的参数。
示例:
//加粗
frames['richEditor'].document.execCommand("bold",false,null);
//创建超链接
frames['richEditor'].document.execCommand("createLink",false,"http://a.b.com");
//设置字体为H1
frames['richEditor'].document.execCommand("formatblock",false,"<h1>");
3.尽管浏览器支持同一个命令,执行结果产生的HTML代码却不一定一致。
示例:
对文本执行加粗命令,不同浏览器产生的代码如下:
Firfox:<span _moz_dirty="" style="font-weight: bold;">很好很浅大</span>
Chrome:<b>很好很浅大</b>
IE:<STRONG>很好很浅大</STRONG>
4.获取选择的文本:
IE: window.frames['richEditor'].document.selection.createRange().text;
Firefox/Chrome: window.frames['richEditor'].getSelection().
5.相关辅助函数:
a) queryCommandEnabled(cmd):
判断是否能够在当前位置或对选择的内容执行命令cmd,如果可以返回true.
var result = frames['richEditor'].document.queryCommandEnabled('bold');
b) queryCommandState(cmd):
判断当前选择的内容是否已经执行命令cmd,如果是返回true.
var result = frames['richEditor'].document.queryCommandState('bold');
c)queryCommandValue(cmd):
获取当前选择的内容执行命令cmd后的值(即:execCommand方法的第三个参数).
var fontSize = frames['richEditor'].document.queryCommandValue('fontsize');
分享到:
相关推荐
富文本框在网页开发中是不可或缺的元素,它允许用户输入...总的来说,"简单富文本框优化版"提供了一个快速集成、功能基础且高效的富文本编辑解决方案,对于初学者或需要快速实现编辑功能的项目来说,是一个理想的选择。
富文本框插件是网页开发中常用的一种组件,主要用于提供用户在网页上编辑和格式化文本的功能。在本文中,我们将深入探讨“editor”这个富文本框插件的相关知识点。 一、富文本框概述 富文本框(Rich Text Editor)...
总之,JavaScript富文本框的实现涉及到前端开发的多个方面,从基础的DOM操作到复杂的用户交互设计,都需要开发者有扎实的JavaScript基础和良好的编程习惯。通过不断学习和实践,你可以创造出功能强大且易于使用的富...
总之,富文本框1.4.3.3的学习资源可能会涵盖从基础的控件使用到高级的定制开发,对于想要提升文本编辑功能的开发者来说,是一个宝贵的资料库。通过深入学习和实践,可以有效地提高开发效率并创建出功能强大的文本...
**标题:“summernote富文本框”** 在网页开发中,富文本框(Rich Text Editor)是一种常见的用户界面组件,它允许用户输入并编辑格式化的文本,如加粗、斜体、插入图片或链接等。"summernote"是这样一个富文本编辑...
在这个“自制富文本编辑框”项目中,我们将学习如何使用HTML、CSS和JavaScript创建一个基础的富文本编辑器,包括设置编辑区域、添加工具栏按钮、实现基本的文本操作以及集成图片上传功能。这只是一个简单的起点,...
这个项目"基于SSM框架的登录注册和富文本框加Excel的导出"是一个典型的企业级应用功能模块,它涵盖了用户认证、内容编辑和数据导出等关键点。下面将详细阐述这些知识点。 首先,**Spring框架** 是一个全面的后端...
富文本编辑器是一种用于网页和应用程序的工具,它允许用户以类似于Word的界面编辑文本,提供了丰富的格式化选项,如字体、字号、颜色、对齐方式、插入图片、链接等。这种编辑器使得用户在网页上创建和编辑内容时无需...
本篇将详细探讨如何实现一个带有富文本框的文章编辑界面,并重点关注`table`和`tbody`元素以及它们在富文本编辑中的应用。 首先,富文本框(Rich Text Box)是一种允许用户输入和编辑格式化文本的控件,它提供了...
本主题聚焦于"Delphi 富文本编辑开发源码",这是一份专为Delphi程序员设计的源代码,用于创建具有高级编辑功能的文本编辑器。该源码主要利用了RichEdit1控件,这是一个内置于Delphi中的组件,支持富文本格式(RTF)...
1. **HTML元素**:HTML标签是构建富文本的基础,如`<b>`用于加粗文本,`<i>`用于斜体,`<u>`用于下划线,`<a>`用于创建链接,`<img>`用于插入图片,以及`<h1>`到`<h6>`用于标题,`<p>`用于段落,`<ol>`和`<ul>`用于...
在Windows Forms开发中,`RichTextBox`控件是用于显示和编辑富文本内容的重要组件,它支持多种格式,包括字体、颜色、样式等。而`RichTextBoxExtended`控件则是对标准`RichTextBox`控件功能的一种扩展,旨在提供更...
富文本编辑器是Web开发中常见的一种组件,它允许用户在网页上进行格式化文本的输入和编辑,常用于博客、论坛、评论等场景。在前端实现富文本编辑器功能时,开发者通常会借助第三方库或者插件来简化工作,其中`...
在iOS开发中,富文本(Rich Text)是一种可以包含多种格式和样式文本的技术,它可以用于创建复杂的、具有视觉吸引力的用户界面。CoreText是苹果提供的一个低级别的框架,主要用于处理和显示复杂的文本和排版,它在...
富文本编辑器通常会提供一些基础功能,如加粗、斜体、下划线、插入链接、插入图片、列表、对齐方式等,同时也可以自定义扩展以满足特定需求。 标签中提到了"富文本"和"前端插件",这意味着我们将讨论的是一款用于...
Bootstrap框架的核心组件包括栅格系统、导航、按钮、表单、模态框、图像、响应式工具等,这些都为构建富文本编辑器提供了基础。例如,我们可以使用栅格系统来布局编辑器的各个部分,按钮组件来触发编辑功能,表单...
RichTextWrapper :TextView的包裹类,实现支持富文本,通过new RichTextWrapper(TextView v)来构造。 RTMovementMethod: 继承自Android原生的LinkMovementMethod,重写onTouchEvent方法,优化了ClickSpan(点击...
本项目提供的开源代码和Demo为开发者提供了一个基础的实现,以学习和扩展自己的WPF富文本编辑器。"HtmlEditor.Demo.sln"是解决方案文件,包含了项目的全部配置和依赖项。"HtmlEditor.Demo"可能是演示应用的主项目,...
`NSAttributedString`类是表示富文本的基础,它可以存储带有属性(如颜色、字体、下划线等)的文本。`NSMutableAttributedString`则允许我们在运行时修改这些属性。我们可以使用`append`方法添加新的文本或属性,...