富文本编辑器开发

<body onLoad="def()">
<div style="width:500px; text-align:left; margin-bottom:10px ">
<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" />
<input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" />
<input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" /> |
<input type="button" style="height:21px; width:21px;"value="L" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" title="align right" /> |
<select id="fonts">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select id="size">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="color">
<option value="black">-</option>
<option style="color:red;" value="red">-</option>
<option style="color:blue;" value="blue">-</option>
<option style="color:green;" value="green">-</option>
<option style="color:pink;" value="pink">-</option>
</select> |
<input type="button" style="height:21px; width:21px;"value="1" title="Numbered List" />
<input type="button" style="height:21px; width:21px;"value="●" title="Bullets List" />
<input type="button" style="height:21px; width:21px;"value="←" title="Outdent" />
<input type="button" style="height:21px; width:21px;"value="→" title="Indent" />
</div>

接下来添加iframe：

<iframe id="textEditor" style="width:500px; height:170px;">
</iframe>

编写js代码：

<script type="text/javascript">
<!--
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
textEditor.document.close();

这里主要是给iframe的body添加样式，下面是命令函数，比如改变字体大小颜色之类都要通过它来实现：

function fontEdit(x,y)
{
textEditor.document.execCommand(x,"",y);
textEditor.focus();
}

添加各种编辑用的按钮和下拉框：

<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
<input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
<input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> |
<input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> |

<select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
   <option value="Arial">Arial</option>
   <option value="Comic Sans MS">Comic Sans MS</option>
   <option value="Courier New">Courier New</option>
   <option value="Monotype Corsiva">Monotype</option>
   <option value="Tahoma">Tahoma</option>
   <option value="Times">Times</option>
</select>
<select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
</select>
<select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
   <option value="black">-</option>
   <option style="color:red;" value="red">-</option>
   <option style="color:blue;" value="blue">-</option>
   <option style="color:green;" value="green">-</option>
   <option style="color:pink;" value="pink">-</option>
</select> |

下面是整个完整的代码：

<html>
<head>
</head>
<body onLoad="def()"><center>
<div style="width:500px; text-align:left; margin-bottom:10px ">
<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
<input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
<input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> |
<input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> |
<select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
   <option value="Arial">Arial</option>
   <option value="Comic Sans MS">Comic Sans MS</option>
   <option value="Courier New">Courier New</option>
   <option value="Monotype Corsiva">Monotype</option>
   <option value="Tahoma">Tahoma</option>
   <option value="Times">Times</option>
</select>
<select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
</select>
<select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
   <option value="black">-</option>
   <option style="color:red;" value="red">-</option>
   <option style="color:blue;" value="blue">-</option>
   <option style="color:green;" value="green">-</option>
   <option style="color:pink;" value="pink">-</option>
</select> |
<input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
<input type="button" style="height:21px; width:21px;"value="●" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
<input type="button" style="height:21px; width:21px;"value="←" onClick="fontEdit('outdent')" title="Outdent" />
<input type="button" style="height:21px; width:21px;"value="→" onClick="fontEdit('indent')" title="Indent" />
</div>
<iframe id="textEditor" style="width:500px; height:170px;">
</iframe>
</center>
<script type="text/javascript">
<!--
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
textEditor.document.close();
function def()
{
   document.getElementById("fonts").selectedIndex=0;
   document.getElementById("size").selectedIndex=1;
   document.getElementById("color").selectedIndex=0;
}
function fontEdit(x,y)
{
   textEditor.document.execCommand(x,"",y);
   textEditor.focus();
}
-->
</script>
</body>
</html>

时间： 2024-11-09 00:27:28

富文本编辑器开发的相关文章

gdi+-C#如何如何开发一个自定义的富文本编辑器组件？使用GDI+来完成么？

问题描述 C#如何如何开发一个自定义的富文本编辑器组件?使用GDI+来完成么? 如题, 1 自定义C#组件 2 富文本编辑器完成这项东西,需要使用哪些技术来完成?能给个思路就更好了解决方案富到什么程度? 可以用RichTextBox或者WebBrowser做编辑界面

iOS使用UITableView实现的富文本编辑器

本文讲的是iOS使用UITableView实现的富文本编辑器,公司最近做一个项目,其中有一个模块是富文本编辑模块,之前没做个类似的功能模块,本来以为这个功能很常见应该会有已经造好的轮子,或许我只要找到轮子,研究下轮子,然后修改打磨轮子,这件事就八九不离十了.不过,还是 too young to simple 了,有些事,还是得自己去面对的,或许这就叫做成长,感觉最近一年,对于编程这件事,更多了一点热爱,我感觉我不配过只会复制粘贴代码的人生,编程需要有挑战.所以,遇到困难,保持一份正念,路其实就在

富文本编辑器-导入百度编辑器的问题

问题描述导入百度编辑器的问题 jsp 中导入百度编辑器没有达到需要的效果,只有一个小小的编辑框,没有可视化按钮,没有提交按钮,就那样放在左上角,下面就是显示的结果,,怎么破???? 解决方案百度编辑器路径设置问题解决方案二: 跟你个我以前的写的案例,你修改一下吧 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String pa

web 富文本编辑器总结

前言富文本编辑器,就是除了能输入不同的文本之外,还可以之间粘贴图画等其他的多媒体信息.也可说是所见即所得的编辑器. 目前可以使用的编辑器有很多, 在网络上有找到这样一份比较表格: 编辑器产地稳定是否轻量技术支持主要优点主要不足 Ver 速度肥瘦 (MB) CKEditor 国外老牌稳定否团队功能强大,稳定臃肿,加载慢 3.6 4 0.90 KindEditor 国产(上海-浩跃软件) 轻量插件扩展 4.0 2 0.24 xhEditor 国产(台州-[

超漂亮的Bootstrap 富文本编辑器summernote_javascript技巧

Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建.Summernote 所有主要的操作都支持快捷键,有一个功能强大的 API,它提供了大量的自定义选项的设计(宽,高,有效的项目等等)和功能.对于主要的脚本语言或框架(PHP,Ruby,Django,NodeJS),该项目有提供了集成示例. Bootstrap summernote,用其官网上的介绍就是"Super Simple WYSIWYG editor"

基于jquery实现可定制的web在线富文本编辑器附源码下载_jquery

今天给大家介绍一款非常棒的WEB在线富文本编辑器--UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器. 在线预览源码下载如何使用? 建立一个demo.html文件,首先在需要添加编辑器的地方加入以下代码,使用style可以设置编辑器的宽度和高度. <script type="text/plain" id=&

在线富文本编辑器UMeditor使用例子

今天给大家介绍一款非常棒的WEB在线富文本编辑器--UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器. 如何使用? 建立一个demo.html文件,首先在需要添加编辑器的地方加入以下代码,使用style可以设置编辑器的宽度和高度. <script type="text/plain" id="myEditor&

Facebook宣布基于React的富文本编辑器Draft.js开源

Facebook开发团队这次又打算让另外一款工具开源.该小型项目叫做Draft.js,这是React.js的组成部分,可让开发者构建功能多样的富文本编辑器(WYSIWYG所见即所得编辑器). http://static.cnbetacdn.com/article/2016/0223/0f9e8106bb354bb.png 相关JS最近的消息,微软也发布了稳定版的TypeScript 1.8.x分支,其新特性包括了模块扩大.字符串类型以及更好的控制流分析.几小时前Node.js团队发布了最新的5.

ThinkPHP中使用Ueditor富文本编辑器_php实例

具体插件下载: http://ueditor.baidu.com/website/download.html UEditor官方文档: http://ueditor.baidu.com/website/document.html 之前于 "ThinkPHP-代码" 案例中发布版本: http://www.thinkphp.cn/code/175.html UEditor解压于:PUBLIC/Ueditor下(同级目录有:Common,Conf,Lib,Tpl等) 例:在Tpl/mode