Cftextarea打造丰富文本框 >> 幽幽天空设计欣赏网页设计原创作品

Asfusion的例子大概大家都看过，那么关于用textarea来打造的rich text不知道大家是否完整的玩过，可以先看下asfusion的这个例子，这几天一直在考虑来做这样的应用，苦于在as脚本方面功力尚且不够，所以一直在一个关键的问题上打圈子，今天不知道是不是状态好，还是怎么样，终于有点眉目了。
ok，讲讲设计的过程吧，主要的控制在于两个函数，一个是setformat，一个是getformat，按照字面意思你们大概就可以猜到，在点选图片的时候用onclick事件将所需参数传回setformat()，对textarea框中的value属性进行样式的读写，而在textarea框中透过onchange()和onMouseup()透过getformat()函数对其进行样式设定的获取。
更改textarea中的格式

获取更改后的格式

<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;//字体颜色设定
    }
    }
    }

同样的思路,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);
    }

    好了，一口气介绍完毕，这个demo我后来修改成了自定义的tag，我想这个对你们的调用更有好处，原始思路出处要感谢asfusion的那个强大的textarea框。

    大家可以点击richtextarea.rar
    下载运行

title