Asfusion的例子大概大家都看过，那么关于用textarea来打造的rich text不知道大家是否完整的玩过，可以先看下asfusion的这个例子，这几天一直在考虑来做这样的应用，苦于在as脚本方面功力尚且不够，所以一直在一个关键的问题上打圈子，今天不知道是不是状态好，还是怎么样，终于有点眉目了。
ok，讲讲设计的过程吧，主要的控制在于两个函数，一个是setformat，一个是getformat，按照字面意思你们大概就可以猜到，在点选图片的时候用onclick事件将所需参数传回setformat()，对textarea框中的value属性进行样式的读写，而在textarea框中透过onchange()和onMouseup()透过getformat()函数对其进行样式设定的获取。
更改textarea中的格式
<cfinput type="img" src="图片地址" onclick="#setFormat()#">
获取更改后的格式
<cftextarea onMouseUp="#getFormat(attributes.name)#;" onChange="#attributes.onChange#;">
getformat的函数是这样设定的：
var sStart=Selection.getBeginIndex();
var sEnd=Selection.getEndIndex();
if (sStart != sEnd){
_global.currentTextFormat = #name#.label.getTextFormat(sStart, sEnd);
//作回圈去判断select框中的属性，针对属性设定
for(var a=0; a < #name#_font_select.dataProvider.length; a++){
if(#name#_font_select.dataProvider[a].label == _global.currentTextFormat.font)
#name#_font_select.selectedIndex = a;//字体样式设定
}
for(var a=0; a < #name#_size_select.dataProvider.length; a++){
if(int(#name#_size_select.dataProvider[a].label) == int(_global.currentTextFormat.size))
#name#_size_select.selectedIndex = a;//字体大小设定
}
for(var a=0; a < #name#_color_select.dataProvider.length; a++){
if(Number(_global.currentTextFormat.color).toString(16) == Number(#name#_color_select.dataProvider[a].data).toString(16)){
#name#_color_select.selectedIndex = a;//字体颜色设定
}
}
}
getformat的函数是这样设定的：
var sStart=Selection.getBeginIndex();
var sEnd=Selection.getEndIndex();
if (sStart != sEnd){
_global.currentTextFormat = #name#.label.getTextFormat(sStart, sEnd);
//作回圈去判断select框中的属性，针对属性设定
for(var a=0; a < #name#_font_select.dataProvider.length; a++){
if(#name#_font_select.dataProvider[a].label == _global.currentTextFormat.font)
#name#_font_select.selectedIndex = a;//字体样式设定
}
for(var a=0; a < #name#_size_select.dataProvider.length; a++){
if(int(#name#_size_select.dataProvider[a].label) == int(_global.currentTextFormat.size))
#name#_size_select.selectedIndex = a;//字体大小设定
}
for(var a=0; a < #name#_color_select.dataProvider.length; a++){
if(Number(_global.currentTextFormat.color).toString(16) == Number(#name#_color_select.dataProvider[a].data).toString(16)){
#name#_color_select.selectedIndex = a;//字体颜色设定
}
}
}
同样的思路,setformat()的过程也是大同小异，透过startindex和endindex去判读这个框中的内容区域，对其onclick触发的事件进行设定相关取值
if(’#mType#’ == ’font’ || ’#mType#’ == ’size’ || ’#mType#’ == ’color’){
var sStart=_global.sStart;
var sEnd=_global.sEnd;
}
else{
var sStart=Selection[’lastBeginIndex’];
var sEnd=Selection[’lastEndIndex’];
}
_global.currentTextFormat = #contentField#.getTextFormat(sStart, sEnd);
if (sStart != sEnd && _global.currentTextFormat.#mType# != true){
if(’#mType#’ == ’font’ || ’#mType#’ == ’size’ || ’#mType#’ == ’color’)
_global.currentTextFormat.#mType# = _root.#mValue#.selectedItem.data;
else
_global.currentTextFormat.#mType# = ’#mValue#’;
}
else _global.currentTextFormat.#mType# = false;
#contentField#.setTextFormat(sStart, sEnd, _global.currentTextFormat);
#contentField#._parent.dispatchEvent({type:’change’});
if (!(’#mType#’ == ’font’ || ’#mType#’ == ’size’ || ’#mType#’ == ’color’)){
Selection.setFocus(’#contentField#’);
Selection.setSelection(sStart,sEnd);
}
var sStart=_global.sStart;
var sEnd=_global.sEnd;
}
else{
var sStart=Selection[’lastBeginIndex’];
var sEnd=Selection[’lastEndIndex’];
}
_global.currentTextFormat = #contentField#.getTextFormat(sStart, sEnd);
if (sStart != sEnd && _global.currentTextFormat.#mType# != true){
if(’#mType#’ == ’font’ || ’#mType#’ == ’size’ || ’#mType#’ == ’color’)
_global.currentTextFormat.#mType# = _root.#mValue#.selectedItem.data;
else
_global.currentTextFormat.#mType# = ’#mValue#’;
}
else _global.currentTextFormat.#mType# = false;
#contentField#.setTextFormat(sStart, sEnd, _global.currentTextFormat);
#contentField#._parent.dispatchEvent({type:’change’});
if (!(’#mType#’ == ’font’ || ’#mType#’ == ’size’ || ’#mType#’ == ’color’)){
Selection.setFocus(’#contentField#’);
Selection.setSelection(sStart,sEnd);
}
好了，一口气介绍完毕，这个demo我后来修改成了自定义的tag，我想这个对你们的调用更有好处，原始思路出处要感谢asfusion的那个强大的textarea框。
大家可以点击richtextarea.rar
下载运行
