用JAVA编写HTML在线编辑器

最新推荐文章于 2025-06-22 01:30:42 发布
最新推荐文章于 2025-06-22 01:30:42 发布 · 847 阅读 · 0
文章标签：

#HTML #Java #JavaScript #.net #Blog #ViewUI

本文介绍了一种使用Java和HTML实现的简单在线编辑器。通过设置contenteditable属性使元素可编辑，并利用document.execCommand方法实现加粗、斜体等功能。文章提供了完整的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

from:http://hi.baidu.com/zdz8207/blog/item/19bb2b34b0ea093a5ab5f560.html
用JAVA编写HTML在线编辑器
2007-03-16 23:50

以前一直不知道好多网站上所说的在线编辑器是怎么回事，后来在文档里发现document 对象的一个方法。

document.execCommand(command, false, value);

才知道具体原理。

一、首先来看一个例子：

<DIV contenteditable="true" style="border:dashed blue 2px">Hello World!</DIV>

保存为html网页，打开看看，在DIV里出现了一个光标，这个DIV就变成可以编辑的了。

类似的，SPAN，FONT等都可以有 contenteditable="true"   这个属性。

再试试下面的：

<DIV contenteditable="true" style="border:dashed blue 2px">Hello World!
    <IMG src="https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/comstep/70786/o_logo.jpg" />
</DIV>

我们就可以拉伸图片了。

二、具体实现：

     1、需要两个页面，blank.html editor.html

     2、blank.html 作为 editor.html的一个内嵌Frame，作为编辑框。

<html>
<body topmargin="10" leftmargin="10" bgColor="#f6f6f6">
   <div id="RTC" contenteditable = true></div>
</body>
</html>

     3、editor.html 主要是一些Javascript，用来处理不同的命令。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var contentHTML;
function exeCommand(command, value)
{
   document.execCommand(command, false, value);
}

// 加粗
function Black()
{
   var obj = frames['ifRTC'].RTC;
   obj.focus();
   exeCommand('Bold', '');
}

// 斜体
function Italic()
{
   var obj = frames['ifRTC'].RTC;
   obj.focus();
   exeCommand('Italic', '');
}

// 下划线
function UnderLine()
{
   var obj = frames['ifRTC'].RTC;
   obj.focus();
   exeCommand('Underline', '');
}

// 向里缩进
function Indent()
{
   var obj = frames['ifRTC'].RTC;
   obj.focus();
   exeCommand('Indent', '');
}

// 向外缩进
function Outdent()
{
   var obj = frames['ifRTC'].RTC;
   obj.focus();
   exeCommand('Outdent', '');
}

// 无序列表
function UnorderList()
{
   var obj = frames['ifRTC'].RTC;
   obj.focus();
   exeCommand('InsertUnorderedList', '');
}

// 有序列表
function OrderList()
{
   var obj = frames['ifRTC'].RTC;
   obj.focus();
   exeCommand('InsertOrderedList', '');
}

// 插入图片
function Image()
{
   var obj = frames['ifRTC'].RTC;
   obj.focus();
   ImagePath = window.prompt('请输入图片路径：', '');
   exeCommand('InsertImage', ImagePath);
}

// 预览效果
function Preview()
{
   var htmlContent = frames['ifRTC'].RTC.innerHTML;
   var open = window.open('');
   open.document.write(htmlContent);
}

// 查看编辑框里的HTML源代码
function Source()
{
   var htmlContent = frames['ifRTC'].RTC.innerHTML;
   if (document.all.iframeDiv.style.display == 'block')
   {
     document.all.iframeDiv.style.display = 'none';
     document.all.htmlText.value = htmlContent;
     document.all.textDiv.style.display = 'block';
     document.all.htmlText.focus();
     document.all.Source.value='HTML';
   }
   else
   {
     document.all.iframeDiv.style.display = 'block';
     document.all.textDiv.style.display = 'none';
     frames['ifRTC'].RTC.innerHTML = document.all.htmlText.value;
     frames['ifRTC'].RTC.focus();
     document.all.Source.value=' 源代码 ';
   }
}

// 增加编辑框的高度
function Add()
{
   document.all.ifRTC.height = document.all.ifRTC.height*1 + 50;
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<TABLE width="400"border="0">
<TR>
<TD><input type="button" value="B" name="Black" onclick="Black()" /></TD>
<TD><input type="button" value="I" name="Italic" onclick="Italic()" /></TD>
<TD><input type="button" value="U" name="UnderLine" onclick="UnderLine()" /></TD>
   <TD><input type="button" value="UL" name="UnorderList" onclick="UnorderList()" /></TD>
   <TD><input type="button" value="OL" name="OrderList" onclick="OrderList()" /></TD>
<TD><input type="button" value="左" name="Outdent" onclick="Outdent()" /></TD>
<TD><input type="button" value="右" name="Indent" onclick="Indent()" /></TD>
<TD><input type="button" value="图" name="Image" onclick="Image()" /></TD>
</TR>
</TABLE>
<div id="iframeDiv" style="display:block">
<iframe id="ifRTC" width="400" height="200" border="1" src="blank.html" ></iframe>
</div>
<div id="textDiv" style="display:none">
   <textarea id="htmlText" cols="50" rows="10"></textarea>
</div>
<br>
<input type="button" value=" + " name="Add" onclick="Add()" />&nbsp;&nbsp;
<input type="button" value=" 预   览 " name="Preview" onclick="Preview()" />&nbsp;&nbsp;
<input type="button" value=" 源代码 " name="Source" onclick="Source()" />
</BODY>
</HTML>

三、后记：

这里写的只是一个简单的编辑器，其实重要的就是：

contenteditable="true"

和

document.execCommand(command, false, value);
关于 document 的一些方法，可以查看MS的文档。
execCommand 的一些命令也可以在文档里找到，下面列出一些：

execCommand(command, false, value); 中的 command 可以是以下这些：

BackColorSets or retrieves the background color of the current selection.
BoldToggles the current selection between bold and nonbold.
ClearAutocompleteForFormsClears saved forms data.
CopyCopies the current selection to the clipboard.
CreateBookmarkRetrieves the name of a bookmark anchor or creates a bookmark anchor for the current selection or insertion point.
CreateLinkRetrieves the URL of a hyperlink or creates a hyperlink on the current selection.
CutCopies the current selection to the clipboard and then deletes it.
DeleteDeletes the current selection.
FontNameSets or retrieves the font for the current selection.
FontSizeSets or retrieves the font size for the current selection.
ForeColorSets or retrieves the foreground (text) color of the current selection.
FormatBlockSets or retrieves the current block format tag.
IndentIncreases the indent of the selected text by one indentation increment.
InsertButtonOverwrites a button control on the current selection.
InsertFieldsetOverwrites a box on the current selection.
InsertHorizontalRuleOverwrites a horizontal line on the current selection.
InsertIFrameOverwrites an inline frame on the current selection.
InsertImageOverwrites an image on the current selection.
InsertInputButtonOverwrites a button control on the current selection.
InsertInputCheckboxOverwrites a check box control on the current selection.
InsertInputFileUploadOverwrites a file upload control on the current selection.
InsertInputHiddenInserts a hidden control on the current selection.
InsertInputImageOverwrites an image control on the current selection.
InsertInputPasswordOverwrites a password control on the current selection.
InsertInputRadioOverwrites a radio control on the current selection.
InsertInputResetOverwrites a reset control on the current selection.
InsertInputSubmitOverwrites a submit control on the current selection.
InsertInputTextOverwrites a text control on the current selection.
InsertMarqueeOverwrites an empty marquee on the current selection.
InsertOrderedListToggles the current selection between an ordered list and a normal format block.
InsertParagraphOverwrites a line break on the current selection.
InsertSelectDropdownOverwrites a drop-down selection control on the current selection.
InsertSelectListboxOverwrites a list box selection control on the current selection.
InsertTextAreaOverwrites a multiline text input control on the current selection.
InsertUnorderedListToggles the current selection between an ordered list and a normal format block.
ItalicToggles the current selection between italic and nonitalic.
JustifyCenterCenters the format block in which the current selection is located.
JustifyLeftLeft-justifies the format block in which the current selection is located.
JustifyRightRight-justifies the format block in which the current selection is located.
OutdentDecreases by one increment the indentation of the format block in which the current selection is located.
OverWriteToggles the text-entry mode between insert and overwrite.
PasteOverwrites the contents of the clipboard on the current selection.
RefreshRefreshes the current document.
RemoveFormatRemoves the formatting tags from the current selection.
SelectAllSelects the entire document.
SaveAsSaves the current Web page to a file.
UnBookmarkRemoves any bookmark from the current selection.
UnderlineToggles the current selection between underlined and not underlined.
UnlinkRemoves any hyperlink from the current selection.
UnselectClears the current selection.
JAVA的HTML在线编辑器
06-18
是我在学习的时候用的适合初学者 JAVA的HTML在线编辑器
java的html编辑器
04-06
一个超强的web页面编辑器
java HTML文件文档编辑器 使用 JTextPane
塞翁失马
05-29 5132
/* HTMLDocumentEditor.java * @author: Charles Bell * @version: May 27, 2002 */ import java.awt.*; import java.awt.event.*; import java.io.*; import javax.swing.*; import javax.swing.event.*; imp
java初学者常用源码编辑工具
最新发布
ge345GREGER的博客
06-22 220
java源代码本质上其实就是普通的文本文件，所以理论上来说任何可以编辑文本文件的编辑器都可以作为我们的java代码编辑工具。比如：WINDOWS记事本、写字板、word等。但是这些简单工具没有语法的高亮提示、自动完成等功能，这些功能的缺失会大大降低代码的编写效率。所以学习开发时一般我们不会选用这些简单文本编辑工具。
java html文本编辑器,基于Java WebHTML在线文本编辑器解决方案.doc
weixin_32921023的博客
06-16 308
基于Java WebHTML在线文本编辑器解决方案基于Java WebHTML在线文本编辑器解决方案摘要：FckEditor作为众多优秀HTML在线文本编辑器之一，以其支持多语言的优势而受到众多国内外开发者的亲睐。在Java Web开发中使用FCKeditor可以实现类似微软Word桌面文本编辑器的许多强大功能，因此掌握FckEditor在Java Web开发环境下的配置过程也是开发者必备的技能之...
HTMLEditor:用 Java 为 RIT-SWEN-262 编写的 HTML 编辑器
06-13
HTML编辑器 用 Java 为 RIT-SWEN-262 编写的 HTML 编辑器
基于OnlyOffice集成的Java、HTML、JavaScript文档在线编辑功能设计源码
10-03
本项目的目标是集成OnlyOffice这一开源办公套件，通过Java后端与HTML和JavaScript前端的结合，实现一个具有协同编辑功能的在线文档编辑器。OnlyOffice是一个功能强大的文档处理软件，它支持多种文档格式，包括常见的...
MultiText Editor:用 Java 编写的文本编辑器。-开源
06-28
它支持多种语法格式，这意味着无论是HTML、CSS、JavaScript，还是Java、Python、C++等编程语言，编辑器都能自动识别并以不同的颜色和样式突出显示，帮助程序员快速识别代码结构，提高编码的可读性和效率。...
初学者必备JAVA HTML在线编辑器
根据提供的文件信息，我们需要探讨的知识点是与“JAVA的HTML在线编辑器”相关的概念和使用方法，尤其对于初学者来说，这项技术是如何帮助他们学习和掌握HTML以及Java开发的。下面详细说明： ### 知识点1：HTML在线...
Codeganak:用于Java和python的在线编辑器和编译器
05-23
Codeganak是一个专门为Java和Python开发者设计的在线编辑器和编译器，它提供了一个便捷的平台，使得用户无需在本地环境中安装特定的IDE或配置环境变量，即可编写、运行和测试代码。这个工具对于初学者、教育者以及在...
EditPlus 4 Java、HTML编辑器
10-29
EditPlus 4，非常好用的Java、HTML编辑器，也是非常nice的记事本，可以打开.txt、.java等文件。已经配置好，直接解压可用，双击其中的.exe文件，接受许可，即可开始编程！
java实现docx文档在线编辑（docx转html，html转word，样式精准）
11-08
java实现docx转html，自定义标签属性，然后根据自定义的标签属性，将html转为word，可支持普通段落，图片、表格、单元格合并、文本字体、字体大小、段落对齐方式、删除线、下划线、粗体、斜体、背景颜色等
html代码编辑器
10-21
能够方便快捷地对于html代码进行编辑，自己试过，具有实用性。
javaFX学习之HTML编辑器(HTMLEditor)富文本编辑器
zy103118的博客
02-07 5868
原文链接：DOC-03-21 HTML编辑器(HTML Editor) | JavaFX中文资料 在JavaFX应用程序中使用内置的HTML编辑器来编辑文本 HTMLEditor控件是一个功能完整的富文本编辑器。它的实现是基于HTML5的文档编辑特征，并且包括以下编辑功能 · 文本格式化，包括通过样式控制粗体、斜体、下划线和删除线 · 段落设置，如格式、字体家族、字体大小 · 前景色和背景色 · 文本缩进 · 项目符号和编号 · 文本对齐 · 添加水平分隔线 · 复制和粘
java swing html编辑器,java HTML文件文档编辑器 使用 JTextPane
weixin_32211739的博客
06-15 399
java HTML文件文档编辑器 使用 JTextPane/* HTMLDocumentEditor.java* @author: Charles Bell* @version: May 27, 2002*/import java.awt.*;import java.awt.event.*;import java.io.*;import javax.swing.*;import javax.swi...
html图文混排编辑器 java,Java开发图文混排的编辑器
weixin_33870147的博客
03-19 236
〖项目简介〗看完了《设计模式》后，我决定将书中的一个文本编辑器范例Lexi用纯OO实现，经过1个月的设计，编码和测试，终于用java基本实现了一个所见即所得的图文混排的文本编辑器，基本拥有Windows写字板的功能，暂命名Jexi。代码共计约8,000行(注释就占了3000多行:~)，从界面到底层用到了大量的设计模式，架构非常清楚。由于使用了SWT本地库，速度非常快，界面和普通Windows桌面程...
菜鸟教程java在线编辑器_HTML 编辑器
weixin_39700220的博客
03-02 2843
HTML 编辑器使用 Notepad 或 TextEdit 来编写 HTML可以使用专业的 HTML 编辑器来编辑 HTML： Adobe DreamweaverMicrosoft Expression WebCoffeeCup HTML Editor不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我们相信，使用一款简单的文本编辑...
Java KindEditor 4 HTML编辑器 基本用法 亲测
Shawn Jeon`s blog
09-23 823
Java Spring Boot + KindEditor 4 HTML编辑器 基本用法1. Maven包 pom.xml2. 环境 application.properties3. 数据库 `test` 和数据表 `user`及相关测试数据4. User.java(Entity)与 `user`数据表字段对应5. DAO(Data Access Object)数据访问接口 UserDao.ja...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值