editor - 富文本编辑器控件

富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器,类似于word编辑器

如:

富文本编辑器控件

Allocate

富文本编辑器包含的功能有:

背景色   hiliteColor

缩进 blockquote

加粗 bold

文字颜色 foreColor

字体大小 

字体   fontName

有序列表 insertorderedlist

无序列表 insertunorderedlist

斜体 italic

居中 justifyCenter

左对齐 justifyLeft

右对齐 justifyRight

超链接 link

删除线 strikethrough

下划线 underline

图片上传 uploadImage

上面的可编辑的动作是可按自己需要进行添加和删除,需要从editor.js里继承过去,我们看一下库里提供的custom.js的自定方的方法

custom.js源码

/**
 * ------------------------------------------
 * 自定义富媒体编辑器封装实现文件
 * @version  1.0
 * @author   genify(caijf@corp.netease.com)
 * ------------------------------------------
 */
var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _p = _('nej.ui'),
        _proCustomEditor,
        _supCustomEditor;
    // ui html code
    var _seed_html;
    /**
     * 富媒体编辑器封装
     * @class   富媒体编辑器封装
     * @extends {nej.ui._$$Editor}
     * @param   {Object} _options 可选配置参数,已处理参数列表如下
     *                           
     */
    _p._$$CustomEditor = NEJ.C();
      _proCustomEditor = _p._$$CustomEditor._$extend(_p._$$Editor);
      _supCustomEditor = _p._$$CustomEditor._$supro;
    /**
     * 初始化外观信息
     * @return {Void}
     */
    _proCustomEditor.__initXGui = function(){
        _supCustomEditor.__initXGui.apply(this,arguments);
        this.__seed_html = _seed_html;
    };
    /**
     * 动态构建控件节点模板
     * @return {Void}
     */
    _proCustomEditor.__initNodeTemplate = (function(){
        var _flist = [{cmd:'bold',txt:'加粗',icn:'z-i-30'}
                     ,{cmd:'italic',txt:'斜体',icn:'z-i-31'}
                     ,{cmd:'underline',txt:'下划线',icn:'z-i-32'}
                     ,{cmd:'strikethrough',txt:'删除线',icn:'z-i-40'}
                     ,{cmd:'insertorderedlist',txt:'有序列表',icn:'z-i-61'}
                     ,{cmd:'insertunorderedlist',txt:'无序列表',icn:'z-i-62'}
                     ,{cmd:'foreColor',txt:'字体颜色',icn:'z-i-41'}
                     ,{cmd:'hiliteColor',txt:'背景颜色',icn:'z-i-122'}],
            _tlist = [{cmd:'justifyLeft',txt:'左对齐',icn:'z-i-50'}
                     ,{cmd:'justifyCenter',txt:'居中对齐',icn:'z-i-51'}
                     ,{cmd:'justifyRight',txt:'右对齐',icn:'z-i-52'}];
        return function(){
            _seed_html = _e._$addNodeTemplate(
                this.__doGenEditorXhtml({
                    toolbar:this.__doGenFontSizeXhtml()
                           +this.__doGenFontNameXhtml()
                           +this.__doGenCmdXhtml({xlist:_flist,hr:!0})
                           +this.__doGenCmdXhtml({xlist:_tlist})
                }));
            this.__seed_html = _seed_html;
        };
    })();
};
define('{lib}ui/editor/custom.js',
      ['{lib}ui/editor/editor.js'
      ,'{lib}util/editor/command/fontsize.js'
      ,'{lib}util/editor/command/fontname.js'
      ,'{lib}util/editor/command/bold.js'
      ,'{lib}util/editor/command/italic.js'
      ,'{lib}util/editor/command/insertorderedlist.js'
      ,'{lib}util/editor/command/insertunorderedlist.js'
      ,'{lib}util/editor/command/underline.js'
      ,'{lib}util/editor/command/strikethrough.js'
      ,'{lib}util/editor/command/forecolor.js'
      ,'{lib}util/editor/command/backcolor.js'
      ,'{lib}util/editor/command/justifyleft.js'
      ,'{lib}util/editor/command/justifycenter.js'
      ,'{lib}util/editor/command/justifyright.js'
      ,'{lib}util/editor/command/link.js'
      ,'{lib}util/editor/command/blockquote.js'],f);

可以看到在 __initNodeTemplate定义了_flist和_tlist,cmd是富文件一命令,txt是hover时的提示, icn是该命令对应的图标,可以看nej_editor.png的位置关系就可以按需要命令定制出来

_$$CustomEditor 生成出来的结果是:

富文本编辑器控件

看一下是如何分配出来的: 页面结构如下:

<html>
    <body>
        <div id="box"></div>
    </body>
</html>

添加标签切换控件依赖文件如下

window.NEJ_CONF = {
    root:'http://192.168.144.11/libs/nej/res/'
};
var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _tu = _('t.u'),
        _p = _('nej.ui');

    //参数的选择详见editor.js
    var _editor = _p._$$CustomEditor._$allocate({
                    parent:_e._$get('box'),
                    clazz:'w-edt',
                    focus:true,
                    content:'<a>editor content set</a>'
                });

    //_editor._$setContent('editor content set');
}
define(['{lib}ui/editor/custom.js', '{pro}js/extend.js'],f);

Explain

第一行的NEJ_CONF是配图库用到的图片资源的路径,传入的参数是

parent,父节点,用来在哪个节点放置富文本编辑器

clazz, 编辑器所特有的样式

focus 是否聚焦

content 初使化出来时的初时内容

Recycle

editor.$recycle();

editor external interface

_$getContent 获取内容

_$getImageIds 有图片上传时获取图片id

_$getTextContent 获取纯文本内容

_$setContent 设置内容

_$show 显示富文本编辑器

_$hide 隐藏富文本编辑器

Known Issues

Demo

富文本编辑器控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus