打印

双鱼文本编辑器mozart0封装版

mozart0 [楼主]

匪徒田老大

荣誉管理团队

帖子: 2367
体力: 6410
威望: 177
当前: 上海长宁

1^# 大中小发表于 2006-11-20 22:53

原版帖子：
http://bbs.blueidea.com/thread-2615464-1-1.html

自己要用(感谢原作者伟大的共享精神)，觉得不太方便，就封装一把
主要是将其对象化，主体JS代码仅一个function,不引入任何全局变量及元素ID,顺便解决了原版的一些BUG

发上来希望有人用得着

*************************************************************

有所变动，故先前一大段说明性的注释从这里删掉（在editor.js文件里还可以看到)
将来可能会有正式点的文档，如果大家觉得有用的话

先前自己跟的帖也全删了，没人跟我讨论，就不赖那儿占服务器硬盘了
如有更新会在下面加一句话，添个演示

说明：
1.以下演示中调用了showmodalDialog的功能会因跨域问题而无效，请查看后附的在线版本
2.IE only

演示(1)
----------------
对象化
改原版打印、保存、全屏三个工具栏按钮为可定义的新建、打开、保存；暂去掉字数统计功能
附属文件预下载
类似dreamweaver的源代码与设计视图选区对应
重写全屏功能，集成到右下角的编辑器尺寸调整模块里

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<title>双鱼文本编辑器mozart0封装版</title>
<style>*{font-family:georgia}</style>
<link rel=stylesheet href=http://mozart0.uni.cc/editor/editor.css>
<script charset=gb2312 src=http://mozart0.uni.cc/editor/editor.js></script>
</head>
<body style=overflow:auto onload=editor=createEditor(oo,"http://mozart0.uni.cc/editor/")>
<span id=oo></span>
<hr>
<li><button onclick=ow.value=editor.setWidth(parseInt(ow.value))>setWidth</button><input value=700 id=ow>&nbsp;<button onclick=oh.value=editor.setHeight(parseInt(oh.value))>setHeight</button><input value=200 id=oh></li>
<li>setMode:<select onchange=editor.setMode(this.options[this.selectedIndex].innerText)><option selected>design</option><option selected>html</option><option selected>preview</option></select></li>
<li><button onclick=editor.setHtml(ot.value)>setHtml</button><button onclick=ot.value=editor.getHtml(or.options[or.selectedIndex].innerText)>getHtml</button><select id=or><option selected>absolute</option><option>this</option><option>root</option></select><br><textarea id=ot style=width:666px;height:120px></textarea></li>
<li><button onclick=editor.fullScreen()>fullScreen</button></li>
</body>
</html>

提示：您可以先修改部分代码再运行

http://mozart0.uni.cc/editor.htm

演示(2)
----------------
精简工具栏

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<title>双鱼文本编辑器mozart0封装版 - 精简工具栏</title>
<link rel=stylesheet href=http://mozart0.uni.cc/editor/editor.css>
<script charset=gb2312 src=http://mozart0.uni.cc/editor/editor.js></script>
<script>
/*
传递一个数组作为createEditor的第三个参数，即可自定义工具栏
数组中的元素可为特定字符串，代表系统所定义的按钮
以下是完整的工具栏部件列表（与默认布局对应，|为分隔符，数字为间隙）：
var def_layout=
	"start,filenew,fileopen,filesave,replace,|,undo,redo,|,cut,copy,paste,delete,2,selectall,removeformat,|,specialchar,emot,|,createlink,unlink,insertimage,insertrule,today,time,table,layer,fieldset,htm,flash,media,real,|,code,end,"+
	"start,paragraph,fontfamily,fontsize,1,|,fontcolor,colorpen,|,bold,italic,underline,strikethrough,|,justifycenter,justifyright,justifyfull,numberedlist,bullets,outdent,indent,|,superscript,subscript,ucase,lcase,abspos,help,end";
def_layout=def_layout.split(",")
*/
window.onload=function(){
	var tools=
	"start,paragraph,fontfamily,fontsize,3,|,fontcolor,colorpen,|,bold,italic,underline,strikethrough,|,removeformat,|,subscript,superscript,|,specialchar,emot,layer,|,createlink,unlink,|,help,end";
	var editor=createEditor(document.body.firstChild,"http://mozart0.uni.cc/editor/",tools.split(","));
	}
</script>
</head>
<body style=overflow:auto><center></center>
</body>
</html>

提示：您可以先修改部分代码再运行

http://mozart0.uni.cc/editor_1.htm

演示(3)
----------------
自定义功能的工具栏

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<title>双鱼文本编辑器mozart0封装版 - 自定义工具栏</title>
<link rel=stylesheet href=http://mozart0.uni.cc/editor/editor.css>
<script charset=gb2312 src=http://mozart0.uni.cc/editor/editor.js></script>
<script>
/*
传递一个数组作为createEditor的第三个参数，即可自定义工具栏
数组中的元素可为可为特殊的对象，实现用户自定义的功能
目前支持按钮和选择框的自定义
将来提供API和详细文档
*/
window.onload=function(){
	var editor;
	var mybutton1={type:"button",title:"按钮1:啦啦啦",image:"help.gif",
		func:function(){editor.designBox.insertHTML("<h1>Hello world</h1>");}
		};
	var mybutton2={type:"button",title:"按钮2：显示小写的HTML标签",image:"help.gif",
		func:function(){
			editor.setMode("html");
			editor.htmlBox.value=editor.htmlBox.value.replace(/(<\/?)(\w+)/g,
				function(a,a1,a2){return a1+a2.toLowerCase()});
			}
		};
	var myselect1={type:"select",width1:50,width2:80,title:"下拉框1:返回innerText",text:"请选择",	html:"",
		func:function(arg){alert("您选择了"+arg)}
		};
	var myselect2={type:"select",width1:150,width2:151,title:"下拉框2:返回标签中的参数",text:"请选择",html:"",
		func:function(arg){alert("您选择了"+arg)}
		};
	for(var i=0;i<15;i++){
		myselect1.html+="<div style='font-family:georgia'>option "+i+"</div>";
		myselect2.html+="<div style='font-family:courier new' arg="+(i*i)+">option "+i+"</div>";
		}
	var tools=["start",mybutton1,mybutton2,"|",myselect1,"5",myselect2,"5","|","help","end"];
	editor=createEditor(document.body.firstChild,"http://mozart0.uni.cc/editor/",tools);
	}
</script>
</head>
<body style=overflow:auto><center></center>
</body>
</html>

提示：您可以先修改部分代码再运行

http://mozart0.uni.cc/editor_2.htm

演示(4)
----------------
傻瓜版,无须引用css,无须书写js代码,在需要的地方插入正确的script标签即可,可插入多个
注：
此script标签须出现在<body>与</body>之间,
若放在form里作为表单提交，请在form的onsubmit事件里调用编辑器的beforeSubmit方法

提示：您可以先修改部分代码再运行

http://mozart0.uni.cc/editor_31.htm

提示：您可以先修改部分代码再运行

http://mozart0.uni.cc/editor_32.htm

计划中的功能：
1.图片上传
2.文件抓取，即请求服务器从网络获取相关文件并保存。编辑器既然可以粘贴从ie里copy来的内容，那就把它完全据为己有
3.用xhtml标准格式化源代码
4.多文件编辑

[ 本帖最后由 mozart0 于 2007-6-21 13:06 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

本帖最近评分记录

bound0 威望 +3 方便群众了 2006-11-20 23:43

居处恭执事敬与人忠

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

xxcn2006

小小菜鸟

钻石会员

帖子: 3016
体力: 5469
威望: 0
当前: 北京海淀区

专长 PHP,.NET,AS

2^# 大中小发表于 2006-11-20 23:19

下了，不知道怎么玩，。。

经典论坛泡出来的...^^.

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

bound0

老饕

版主

帖子: 3328
体力: 8235
威望: 273
当前: 北京海淀区

3^# 大中小发表于 2006-11-20 23:42

还没看代码，先加个分
其他版主来了觉得好再多加

[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群：45274013

TOP

请大家尊重和保护奥运知识产权。

kkf009

初级会员

帖子: 52
体力: 161
威望: 0
离线: 30 天

4^# 大中小发表于 2006-11-27 12:59

路过一下.对楼主的贡献表示感谢.

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

reterry

脚本之家

中级会员

帖子: 202
体力: 495
威望: 1
当前: 江苏徐州
离线: 8 天

专长 JS,PHP,ASP

5^# 大中小发表于 2006-11-27 13:48

好东西啊，支持

小说

TOP

lookatmebaby

新手上路

帖子: 61
体力: 47
威望: 0

6^# 大中小发表于 2006-11-27 13:56

收藏，好东西，谢谢

www.idoican.com.cn

TOP

hutchin

蔚蓝的故乡

高级会员

帖子: 1227
体力: 519
威望: 0
当前: 辽宁沈阳

专长 前端制作,PHP,MySQL

7^# 大中小发表于 2006-11-30 09:36

支持

学习学习

TOP

greengnn

酒酣几度

荣誉管理团队

帖子: 1064
体力: 1472
威望: 114
当前: 广东深圳

专长 网页设计,前端制作,PHP

8^# 大中小发表于 2006-11-30 11:33

支持，不知道为什么要生成大写的html代码阿？不符合xhtml1.0规范阿。

不知道编辑选项可以自定义吗？有时候想精简一些

greengnn's space/web design
Design your life with Web Standards WEB标准群：46077068

TOP

mozart0 [楼主]

匪徒田老大

荣誉管理团队

帖子: 2367
体力: 6410
威望: 177
当前: 上海长宁

9^# 大中小发表于 2006-12-3 08:24

更新
最后一次自顶

呼唤版主或管理员：上面的贴的代码点运行后浏览器就死掉，cpu100%，怎么回事？
从前经典没用Discuz!的时候可没见出过这种事

居处恭执事敬与人忠

TOP

yangweihua

新手上路

帖子: 2
体力: 1
威望: 0
离线: 135 天

10^# 大中小发表于 2006-12-3 22:24

谢谢

谢谢谢谢谢谢谢谢谢谢

TOP

skybot

size

钻石会员

帖子: 2729
体力: 6424
威望: 6
当前: 上海长宁

专长 JS,C#,MSSQL

11^# 大中小发表于 2006-12-3 22:27

加在form里不能用了

http://www.qlili.com 个人站帮点啊

TOP

Lining

新手上路

帖子: 9
体力: 18
威望: 0
离线: 156 天

12^# 大中小发表于 2006-12-4 06:18

虽然楼主的东西我看的还不是很明白
但楼上兄弟的学习思路值得学习啊
开始：起跑——》用DW MX做HTM静态页网站——》HTML标签语法深入学习（很重要）——》DW MX做ASP动态页——》ASP基本语法五大对象——》掌握VBSscript函数使用（在VB.NET中支持）——》用DW MX练习制作ASP.NET页面——》转向Visual Studio .NET开发平台和阅读相关的ASP.NET书

TOP

4184730

新手上路

帖子: 1
体力: 1
威望: 0
离线: 632 天

13^# 大中小发表于 2006-12-13 11:08

good

TOP

jackey0615

初级会员

帖子: 37
体力: 63
威望: 0
当前: 上海杨浦
离线: 18 天

14^# 大中小发表于 2006-12-13 16:33

有点深奥..

慢慢学习下~~~顶下

TOP

Dabinl

中级会员

帖子: 172
体力: 212
威望: 0
当前: 广东广州
离线: 7 天

15^# 大中小发表于 2007-1-13 00:10

真是太感谢楼主与作者了，
不过有二个建议: 第一个编辑框中的内容不能够防止刷新
2, 一使用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">声明

层乱套了

广州旅游

TOP

ggjiji

中级会员

帖子: 285
体力: 497
威望: 0
离线: 408 天

16^# 大中小发表于 2007-1-13 11:01

不错，有些功能可以借鉴下。
学哈子。

一切随缘。

TOP

ggjiji

中级会员

帖子: 285
体力: 497
威望: 0
离线: 408 天

17^# 大中小发表于 2007-1-13 11:05

回复 #8 greengnn 的帖子

都是IE惹的祸，IE自动全大写，要把标签全部重写才行，不然没戏。
可在脚本里创建再生成就是小写。

一切随缘。

TOP

xeare

初级会员

帖子: 103
体力: 169
威望: 0
当前: 广东广州
离线: 2 天

专长 前端制作,PHP,ASP

18^# 大中小发表于 2007-1-13 11:20

好东西,先下了,谢谢了...

TOP

Dabinl

中级会员

帖子: 172
体力: 212
威望: 0
当前: 广东广州
离线: 7 天

19^# 大中小发表于 2007-1-13 11:30

请教楼主或者作者+各位知道修改的帮助!

1,设计模式下  编辑区域中默认的  文本大小  在那里设置呀，有点大，
是不是预览模式  就是输出的效果呀！

2,点击选择字体，字号，段落格式  弹出的列表  这个宽度设置呀，高度在  css,中可以改变
在ASP中，怎么设置  name值  把编辑器的内容存储到数据库呀!

谢谢

[ 本帖最后由 Dabinl 于 2007-1-13 11:41 编辑 ]

广州旅游

TOP

Jiaxin

初级会员

帖子: 45
体力: 75
威望: 0
离线: 5 天

20^# 大中小发表于 2007-1-17 01:03

挺不错的。但建议能否把文字的样式标签<font>...</font>,改成<span style="...">...</span>结构。

TOP

1313999

新手上路

帖子: 1
体力: 1
威望: 0
离线: 400 天

21^# 大中小发表于 2007-1-18 09:55

很棒。。。。

TOP

CuFish

中级会员

帖子: 85
体力: 210
威望: 0
离线: 148 天

22^# 大中小发表于 2007-1-22 15:50

用了一下。发现了个问题
用TAB建有点小问题
特别是换行后再按TAB。

TOP

helix

新手上路

帖子: 3
体力: 6
威望: 0
离线: 1 天

23^# 大中小发表于 2007-5-21 13:52

问一下,我如何取到编辑器里的值?
谢谢!

TOP

mozart0 [楼主]

匪徒田老大

荣誉管理团队

帖子: 2367
体力: 6410
威望: 177
当前: 上海长宁

24^# 大中小发表于 2007-5-21 17:35

回复 #23 helix 的帖子

示例：
初始值由initValue指定
后台处理提交的表单时取request.form("html")即为编辑器里的html值

复制内容到剪贴板

代码:

<html>

<head>

<link rel=stylesheet href=http://mozart0.uni.cc/editor/editor.css>

<script charset=gb2312 src=http://mozart0.uni.cc/editor/editor.js></script>

<script>

window.onload=function(){

  var myEditor=createEditor(ospan,"http://mozart0.uni.cc/editor/");

  var theForm=document.forms["form1"];

  myEditor.setHtml(theForm.html.value);

  theForm.attachEvent("onsubmit",function(){

    theForm.html.value=myEditor.getHtml();

    });

  }

</script>

</head>

<body>

<span id=ospan></span>

<form name=form1 method=post>

  <textarea style=display:none name=html><?=initValue?></textarea>

  <input type=submit value=submit>

</form>

</body>

</html>

居处恭执事敬与人忠

TOP

everplus

流光恋羽

中级会员

帖子: 205
体力: 359
威望: 0
当前: 上海静安
离线: 59 天

专长 前端制作,JS,ASP

25^# 大中小发表于 2007-5-21 17:38

可惜啊，能支持FF就好了

TOP

fzcong

新手上路

帖子: 2
体力: 9
威望: 0
离线: 471 天

26^# 大中小发表于 2007-5-23 16:29

怎样从数据库中调用已插入的文本进行修改？

上帖中的“初始值由initValue指定”如何用？

TOP

fzcong

新手上路

帖子: 2
体力: 9
威望: 0
离线: 471 天

27^# 大中小发表于 2007-5-23 16:57

不好意思，认真看了代码后，知道如何制定initValue了，感谢！

TOP

mc1229

新手上路

帖子: 5
体力: 10
威望: 0
离线: 455 天

28^# 大中小发表于 2007-5-23 17:06

这是什么东西啊能介绍一下吗？不懂

TOP

weifengyu

初级会员

帖子: 32
体力: 65
威望: 0
离线: 147 天

29^# 大中小发表于 2007-5-24 10:39

我刚看了，挺不错的很详细！

微风

TOP

fzlidea

新手上路

帖子: 21
体力: 47
威望: 0
离线: 79 天

30^# 大中小发表于 2007-5-29 09:53

不错的效果

俺也下来试下

TOP