网页编辑文档格式.docx
- 文档编号:18260394
- 上传时间:2022-12-14
- 格式:DOCX
- 页数:15
- 大小:31.95KB
网页编辑文档格式.docx
《网页编辑文档格式.docx》由会员分享,可在线阅读,更多相关《网页编辑文档格式.docx(15页珍藏版)》请在冰豆网上搜索。
'
editor_id'
});
注:
KE.show的原理是先执行KE.init设置一些变量,等DOM全部创建以后才开始执行KE.create创建编辑器。
如果浏览器不触发DOMContentLoaded事件(例如:
jQuery的$.ready,点击某个按钮,通过innerHTML插入HTML等),则不能使用KE.show,需要直接调用KE.init和KE.create。
KE.init({
});
$.ready(function(){
KE.create('
);
调用KE.show和KE.init时,除id之外还可以设置其它的参数,具体属性请参考编辑器初始化参数。
调用KE.show或KE.init时可以设置以下参数。
1.id
TEXTAREA输入框的ID,必须设置。
数据类型:
String
2.items
配置编辑器的工具栏,其中"
-"
表示换行,"
|"
表示分隔符。
Array
默认值:
['
source'
'
|'
fullscreen'
undo'
redo'
print'
cut'
copy'
paste'
'
plainpaste'
wordpaste'
justifyleft'
justifycenter'
justifyright'
justifyfull'
insertorderedlist'
insertunorderedlist'
indent'
outdent'
subscript'
superscript'
selectall'
-'
title'
fontname'
fontsize'
textcolor'
bgcolor'
bold'
italic'
underline'
strikethrough'
removeformat'
image'
flash'
media'
advtable'
hr'
emoticons'
link'
unlink'
about'
]
3.width
编辑器的宽度,可以设置px或%,比TEXTAREA输入框样式表宽度优先度高。
TEXTAREA输入框的宽度
注:
3.2版本开始支持。
4.height
编辑器的高度,只能设置px,比TEXTAREA输入框样式表高度优先度高。
TEXTAREA输入框的高度
5.minWidth
Int
指定编辑器最小宽度,单位为px。
200
6.minHeight
指定编辑器最小高度,单位为px。
100
7.filterMode
Boolean
true时过滤HTML代码,false时允许输入任何代码。
false
3.4以前版本的filterMode默认值为true。
8.htmlTags
指定要保留的HTML标记和属性。
哈希数组的key为HTML标签名,value为HTML属性数组,"
."
开始的属性表示style属性。
Object
{
font:
['
color'
size'
face'
.background-color'
],
span:
style'
div:
class'
align'
table:
border'
cellspacing'
cellpadding'
width'
height'
td,th'
:
valign'
colspan'
rowspan'
a:
href'
target'
name'
embed:
src'
type'
loop'
autostart'
quality'
allowscriptaccess'
/'
img:
alt'
hr:
br:
p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6'
:
tbody,tr,strong,b,sub,sup,em,i,u,strike'
[]
}
filterMode为true时有效。
3.4版本开始属性可设置style,保留所有inline样式。
9.resizeMode
2或1或0,2时可以拖动改变宽度和高度,1时只能改变高度,0时不能拖动。
2
10.skinType
风格类型,default或tinymce。
default
3.4以前版本和3.4.1版本开始默认值为default,3.4版本的默认值为oxygen。
11.wyswygMode
可视化模式或代码模式
true
12.cssPath
指定编辑器iframedocument的CSS,用于设置可视化区域的样式。
String或Array
空
3.4.1版本开始可指定多个CSS文件。
cssPath:
a.css'
b.css'
]
13.skinsPath
指定编辑器的skins目录,skins目录存放风格的css文件和gif图片。
KE.scriptPath+'
skins/'
14.pluginsPath
指定编辑器的plugins目录。
plugins/'
15.minChangeSize
undo/redo文字输入最小变化长度,当输入的文字变化小于这个长度时不会添加到undo堆栈里。
5
16.loadStyleMode
true时自动加载编辑器的CSS。
3.4版本开始支持。
17.urlType
改变站内本地URL,可设置空、relative、absolute、domain。
空为不修改URL,relative为相对路径,absolute为绝对路径,domain为带域名的绝对路径。
3.4版本开始支持,3.4.1版本开始默认值为空。
18.newlineTag
设置回车换行标签,可设置p、br。
br
19.afterCreate
设置编辑器创建后执行的回调函数。
Function
无
20.afterDialogCreate
设置弹出浮动框创建后执行的回调函数。
3.4.3版本开始支持。
21.allowUpload
true或false,true时显示上传图片标签。
22.allowFileManager
true或false,true时显示浏览服务器图片功能。
23.referMethod
设置referMethod后上传图片的POST参数里有referMethod。
24.dialogAlignType
设置弹出框(dialog)的对齐类型,可设置page和空,指定page时按当前页面居中,指定空时按编辑器居中。
page
3.4.1版本开始支持。
25.imageUploadJson
指定上传图片的服务器端程序。
../../php/upload_json.php
26.fileManagerJson
指定浏览远程图片的服务器端程序。
../../php/file_manager_json.php
27.shadowMode
true或false,true时弹出层显示阴影。
3.5版本开始支持。
28.allowPreviewEmoticons
true或false,true时鼠标放在表情上可以预览表情。
29.useContextmenu
true或false,true时使用自定义右键菜单,false时屏蔽自定义右键菜单。
3.5.3版本开始支持。
30.syncType
同步数据的方式,可设置"
auto"
form"
,值为"
时每次修改时都会同步,"
时提交form时同步,空时不会自动同步。
31.tabIndex
编辑器的tabindex。
TEXTAREA输入框的tabindex
32.afterChange
编辑器内容发生变化后执行的回调函数。
33.afterTab
按下TAB键后执行的的回调函数。
function(id){
KE.util.setSelection(id);
KE.util.insertHtml(id,'
34.afterFocus
编辑器聚焦(focus)时执行的回调函数。
35.afterBlur
编辑器失去焦点(blur)时执行的回调函数。
参数设置例子:
KE.show({
"
content_1"
width:
70%"
//编辑器的宽度为70%
height:
200px"
//编辑器的高度为100px
filterMode:
false,//不会过滤HTML代码
resizeMode:
1//编辑器只能调整高度
1.定义KE.lang['
hello'
]="
你好"
。
KE.lang['
您好"
;
2.定义KE.plugin['
],所有逻辑都在这个对象里,点击图标时默认执行click方法。
KE.plugin['
]={
click:
function(id){
alert("
}
};
3.页面里添加图标定义CSS。
.ke-icon-hello{
background-image:
url(./skins/default.gif);
background-position:
0px-672px;
width:
16px;
height:
4.最后调用编辑器时items数组里添加hello。
content1'
items:
演示地址:
在新窗口打开
二、添加插入远程图片的插件
remote_image'
插入远程图片"
]。
KE.util.selection(id);
vardialog=newKE.dialog({
id,
cmd:
310,
90,
title:
KE.lang['
yesButton:
yes'
noButton:
no'
dialog.show();
},
check:
vardialogDoc=KE.util.getIframeDoc(KE.g[id].dialog);
varurl=KE.$('
url'
dialogDoc).value;
vartitle=KE.$('
imgTitle'
varwidth=KE.$('
imgWidth'
varheight=KE.$('
imgHeight'
varborder=KE.$('
imgBorder'
if(url.match(/\.(jpg|jpeg|gif|bmp|png)$/i)==null){
alert(KE.lang['
invalidImg'
]);
window.focus();
KE.g[id].yesButton.focus();
returnfalse;
if(width.match(/^\d+$/)==null){
invalidWidth'
if(height.match(/^\d+$/)==null){
invalidHeight'
if(border.match(/^\d+$/)==null){
invalidBorder'
returntrue;
exec:
KE.util.select(id);
variframeDoc=KE.g[id].iframeDoc;
if(!
this.check(id))returnfalse;
this.insert(id,url,title,width,height,border);
insert:
function(id,url,title,width,height,border){
varhtml='
imgsrc="
+url+'
if(width>
0)html+='
width="
+width+'
if(height>
height="
+height+'
if(title)html+='
title="
+title+'
html+='
alt="
border="
+border+'
/>
KE.util.insertHtml(id,html);
KE.layout.hide(id);
KE.util.focus(id);
.ke-icon-remote_image{
0px-496px;
4.最后调用编辑器时items数组里添加remote_image。
、变量
1.KE.scriptPath
kindeditor.js的路径。
2.KE.browser
浏览器类型和版本,分别为KE.browser.IE、KE.browser.WEBKIT、KE.browser.GECKO、KE.browser.OPERA、KE.browser.VERSION。
3.4以前版本直接返回字符串,分别为"
IE"
、"
WEBKIT"
GECKO"
OPERA"
3.KE.g[id].iframeDoc
编辑区域的iframe对象。
Element
4.KE.g[id].keSel
当前选中信息的KE.selection对象,id为编辑器ID。
5.KE.g[id].keRange
当前选中信息的KE.range对象,id为编辑器ID。
6.KE.g[id].sel
当前选中信息的浏览器原生selection对象,id为编辑器ID。
7.KE.g[id].range
当前选中信息的浏览器原生range对象,id为编辑器ID。
二、函数
1.KE.show(config)
初始化并创建编辑器。
执行本函数时先调用KE.init设置初始化参数,然后在DOM加载完成后执行KE.create。
参数:
config:
Object,编辑器属性集合,具体请参考编辑器属性
返回值:
2.KE.init(config)
设置编辑器的初始化参数,loadStyleMode为true时自动加载CSS文件。
3.KE.create(id,mode)
创建编辑器。
id:
String,编辑器的ID
mode:
Int,可选参数,指定1时在body下面创建编辑器,0或未指定时在TEXTAREA前面创建编辑器。
4.KE.remove(id,mode)
移除编辑器。
Int,可选参数,指定1时移除在body下面的编辑器,0或未指定时移除在TEXTAREA前面的编辑器。
5.KE.html(id)
取得编辑器的HTML内容。
String,HTML字符串
3.5版本开始支持,旧版本可以使用KE.util.getData(id)。
6.KE.html(id,val)
设置编辑器的HTML内容。
val:
String,HTML字符串
3.5版本开始支持,旧版本可以使用KE.util.setFullHtml(id,val)。
7.KE.text(id)
取得编辑器的纯文本内容。
String,去除HTML代码后的文本
8.KE.text(id,val)
设置编辑器的内容,直接显示HTML代码。
String
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 编辑