`
lijunabc
  • 浏览: 47341 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用JAVA编写HTML在线编辑器

HTMLJavaJavaScript.netBlog 
阅读更多
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="http://p.blog.csdn.net/images/p_blog_csdn_net/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 可以是以下这些：

BackColor Sets or retrieves the background color of the current selection.
Bold Toggles the current selection between bold and nonbold.
ClearAutocompleteForForms Clears saved forms data.
Copy Copies the current selection to the clipboard.
CreateBookmark Retrieves the name of a bookmark anchor or creates a bookmark anchor for the current selection or insertion point.
CreateLink Retrieves the URL of a hyperlink or creates a hyperlink on the current selection.
Cut Copies the current selection to the clipboard and then deletes it.
Delete Deletes the current selection.
FontName Sets or retrieves the font for the current selection.
FontSize Sets or retrieves the font size for the current selection.
ForeColor Sets or retrieves the foreground (text) color of the current selection.
FormatBlock Sets or retrieves the current block format tag.
Indent Increases the indent of the selected text by one indentation increment.
InsertButton Overwrites a button control on the current selection.
InsertFieldset Overwrites a box on the current selection.
InsertHorizontalRule Overwrites a horizontal line on the current selection.
InsertIFrame Overwrites an inline frame on the current selection.
InsertImage Overwrites an image on the current selection.
InsertInputButton Overwrites a button control on the current selection.
InsertInputCheckbox Overwrites a check box control on the current selection.
InsertInputFileUpload Overwrites a file upload control on the current selection.
InsertInputHidden Inserts a hidden control on the current selection.
InsertInputImage Overwrites an image control on the current selection.
InsertInputPassword Overwrites a password control on the current selection.
InsertInputRadio Overwrites a radio control on the current selection.
InsertInputReset Overwrites a reset control on the current selection.
InsertInputSubmit Overwrites a submit control on the current selection.
InsertInputText Overwrites a text control on the current selection.
InsertMarquee Overwrites an empty marquee on the current selection.
InsertOrderedList Toggles the current selection between an ordered list and a normal format block.
InsertParagraph Overwrites a line break on the current selection.
InsertSelectDropdown Overwrites a drop-down selection control on the current selection.
InsertSelectListbox Overwrites a list box selection control on the current selection.
InsertTextArea Overwrites a multiline text input control on the current selection.
InsertUnorderedList Toggles the current selection between an ordered list and a normal format block.
Italic Toggles the current selection between italic and nonitalic.
JustifyCenter Centers the format block in which the current selection is located.
JustifyLeft Left-justifies the format block in which the current selection is located.
JustifyRight Right-justifies the format block in which the current selection is located.
Outdent Decreases by one increment the indentation of the format block in which the current selection is located.
OverWrite Toggles the text-entry mode between insert and overwrite.
Paste Overwrites the contents of the clipboard on the current selection.
Refresh Refreshes the current document.
RemoveFormat Removes the formatting tags from the current selection.
SelectAll Selects the entire document.
SaveAs Saves the current Web page to a file.
UnBookmark Removes any bookmark from the current selection.
Underline Toggles the current selection between underlined and not underlined.
Unlink Removes any hyperlink from the current selection.
Unselect Clears the current selection.
分享到：
| Difference between request.getRequestDi ...
评论
发表评论

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

相关推荐

    JAVA制作的PDF编辑软件

    JAVA制作的PDF编辑软件 描述&gt;=20个字符,不支持HTML标签。 详细的资源描述有机会获得我们的推荐，更有利于他人下载。

    KindEditorHTML在线编辑器使用纯编写 随处应用

    KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、...

    用java写的一个编辑器（有源码）

    黎明编辑器(LimEditor)是由JAVA语言编写，仿EditorPlus界面，实现了文件的新建、打开、保存、另存为、退出、撤消、重做、设置字体(包括颜色和字号、风格等)、剪切、复制、粘贴、删除、查找(及查找下一个)、替换(替换...

    java富文本编辑器kindeditor4.1.11官方推荐的最新版本

    KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript ...

    HTMLEditor:用 Java 为 RIT-SWEN-262 编写的 HTML 编辑器

    HTML编辑器 用 Java 为 RIT-SWEN-262 编写的 HTML 编辑器

    Java博客系统，完美自适应，支持markdown编辑器

    基于springboot、mybatis、ehcache、thymeleaf、bootstrap做的博客系统，完美自适应，支持markdown编辑器 项目描述 项目基于spring boot和thymeleaf编写的一个Java博客系统，包含了首页注册登录，文章管理，日志...

    HTML可视化编辑器

    KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、...

    kindeditor富文本编辑器

    kindeditor富文本编辑器,在线HTML编辑器,使用 JavaScript 编写，可以很好地与 Java 等程序集成，主要适用于新闻发布等文本编辑

    Editplus轻量级的Java编辑工具

    可以用来编写Java小程序，Html，JavaScript等，破解版。

    KindEditor在线编辑器

    KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、...

    富文本编辑器源码

    富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。它的应用也越来越广泛。最先只有 IE 浏览器支持，其它浏览器...

    命令行下的Java编译工具

    适合初学者用，个人用批处理编写的java编译工具。出于保护版权，转成了exe格式，人格保证，绝对无毒。 本人08年开始接触Java,初学者当然是使用黑框框编译啦，可是JDK编译器手动太麻烦，又要javac源文件，又要java...

    HTML文本编辑器绿色免费

    KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、...

    KindeditorHTML编辑器

    KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP...

    JAVA实战项目源码-计算机毕业设计java专业-java开发初学者使用文本编辑器

    JAVA实战项目源码-计算机毕业设计java专业-java开发初学者使用文本编辑器 本文本编辑器的设计，能打开，编辑和保存html,java,cpp,txt文件，能够在文件中进行查找和替换，而且支持java源文件的编译与运行，前提是...

    java源码包---java 源码 大量 实例

    　Java编写的HTML浏览器源代码，一个很简单甚至不算是浏览器的HTML浏览器，使用方法： 　可直接输入文件名或网络地址，但必需事先连入网络。 Java编写的山寨QQ，多人聊天+用户在线 21个目标文件 摘要:JAVA源码,...

    网页在线编辑器 kindeditor-4.1.9

    KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP...

    在线编辑器

    KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript ...

    kindeditor-3.4.4 HTML可视化编辑器

    KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、...

    KindEditor是一套开源的HTML可视化编辑器（简单好用）

    KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、...

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