首页  ·  知识 ·  前端
FckEditor增加插件,添加自定义的功能按钮
gold98  http://www.gold98.net/blog/  综合  编辑:dezai  图片来源:网络
第一步:需要书写你的插件文件,这里必须注意你的目录结构,默认的插件路径是..../editor/plugins/为了方便起见我们不改变默认路径,先在
第一步:需要书写你的插件文件,这里必须注意你的目录结构,默认的插件路径是..../editor/plugins/  

为了方便起见我们不改变默认路径,先在这个目录下创建一个存放插件的文件夹,这里我们起名为formatcommands

然后我们在此目录下创建一个fckplugin.js,记住这里插件的名字必须为这个名字(大小写也要一致),然后我们在创建一个语言包

文件夹lang,最后把需要的图标文件也放在与插件文件fckplugin.js同目录下,具体的文件目录请看图:




补充说明一下:lang文件夹下面是语言包文件,这里我创建了一个en.js  注意 en是国别码都是小写的  ,如果要是中文可以写成 zh-cn.js
en.js 的源码为:


/*
 * FCKeditor - The text editor for internet
 * Copyright (C) 2003-2006 Frederico Caldeira Knabben
 * 
 * Licensed under the terms of the GNU Lesser General Public License:
 *         http://www.opensource.org/licenses/lgpl-license.php
 * 
 * For further information visit:
 *         http://www.fckeditor.net/
 * 
 * "Support Open Source software. What about a donation today?"
 * 
 * File Name: en.js
 *     Marquee English language file.
 * 
 * File Authors:
 *         Yogananthar Ananthapavan(rollbond@gmail.com)
 */
FCKLang.Format168Btn    = 'format';
这个是为了给出鼠标悬停到按钮上的提示

插件文件的源代码为:


程序代码 程序代码

/**//*
 * FCKeditor - The text editor for internet
 * Copyright (C) 2003-2006 Frederico Caldeira Knabben
 * 
 * Licensed under the terms of the GNU Lesser General Public License:
 *         http://www.opensource.org/licenses/lgpl-license.php
 * 
 * For further information visit:
 *         UploadFiles/200892164040621.jpg';
//注册按钮项
FCKToolbarItems.RegisterItem('Format168', oFormat168Item);

// The object used for all Format168 operations.
var FCKFormat168 = new Object();

FCKFormat168 = function(name){
    this.Name = name;
}

//FCK_TRISTATE_ON为默认是选中状态
下面的两个方法是实现接口的两个必须的方法,否则会报脚本错误
FCKFormat168.prototype.GetState = function() {
    
    return FCK_TRISTATE_OFF;
}

//此方法是点击按钮后要完成的操作
FCKFormat168.prototype.Execute = function(){
    FormatText();
}

//以下都是实现功能的方法
程序代码 程序代码

function FormatText() {
  var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
      if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )
    {
  var temps = new Array();
  var sec = oEditor.EditorDocument.selection.createRange();
  var tmpText = sec.text;
  var isPart = tmpText != null && tmpText.trim().length > 0;
isPart = false; //暂时无法实现局部格式化
  if (!isPart) {
    var imgs = oEditor.EditorDocument.images;
    if (imgs != null && imgs.length > 0) {
      for (j = 0; j < imgs.length; j++) {
        var t = document.createElement("IMG");
        t.alt = imgs[j].alt;
        t.src = imgs[j].src;
        t.width = imgs[j].width;
        t.height = imgs[j].height;
        t.align = imgs[j].align;
        temps[temps.length] = t;
      }
      var formatImgCount = 0;
      for (j = 0; j < imgs.length;) {
        imgs[j].outerHTML = "#FormatImgID_" + formatImgCount + "#";
        formatImgCount++;
      }
    }
   var html = processFormatText(oEditor.EditorDocument.body.innerText);
    if (temps != null && temps.length > 0) {
      for (j = 0; j < temps.length; j++) {
        var imghtml = "";
        html = html.replace("#FormatImgID_" + j + "#", imghtml);
      }
    }
    oEditor.SetHTML(html);
  } else {
   var html = processFormatText(tmpText);
      sec.pasteHTML(html);
  }
  }
  else
  alert( '必须在设计模式下操作!' ) ;
}

function DBC2SBC(str) {
  var result = '';
  for (var i = 0; i < str.length; i++) {
    code = str.charCodeAt(i);
    // “65281”是“!”,“65373”是“}”,“65292”是“,”。不转换","

    if (code >= 65281 && code < 65373 && code != 65292 && code != 65306){
    //  “65248”是转换码距
      result += String.fromCharCode(str.charCodeAt(i) - 65248);
    } else {
      result += str.charAt(i);
    }
  }
  return result;
}

function processFormatText(textContext) {
    var text = DBC2SBC(textContext);
    var prefix = "  ";
    var tmps = text.split("\n");
    var html = "";
    for (i = 0; i < tmps.length; i++) {
      var tmp = tmps[i].trim();
      if (tmp.length > 0) {
        html += "

  " + tmp + "

\n";
      }
    }
  return html;
}

String.prototype.trim = function()
{
  return this.replace(/(^[\s ]*)|([\s ]*$)/g, "");
};

String.prototype.leftTrim = function()
{
  return this.replace(/(^\s*)/g, "");
};

String.prototype.rightTrim = function()
{
  return this.replace(/(\s*$)/g, "");
};


// Register the related command
FCKCommands.RegisterCommand('Format168', new FCKFormat168('Format168'));


 第二步:修改fck默认的配置文件


直接修改默认的配置文件 fckconfig.js 

从FCKeditor文件夹下找到fckconfig.js

找到下面这句:FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;
然后增加:
FCKConfig.Plugins.Add('formatcommands') ;
'formatcommands'是你的插件文件夹的名字,大小写也要都一样


第三步:增加自定义的ToolBarSet
FCKConfig.ToolbarSets["MyToolbar"] = [
    ['Source','Preview','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
    ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Style','FontFormat','FontName','FontSize'],
    ['TextColor','BGColor'],
    ['FitWindow','ShowBlocks','-','About','Format168']        // No comma for the last row.
] ;

这里的Format168 是你插件文件中预先注册的名字

最后在页面上创建一个fckEditor


     
      var oFCKeditor = new FCKeditor('FCKeditor1');
      oFCKeditor.BasePath = "FCKeditor/";
      oFCKeditor.ToolbarSet='MyToolbar';
      oFCKeditor.Height ="300";
      oFCKeditor.Create();
      

  

本文作者:gold98 来源:http://www.gold98.net/blog/
CIO之家 www.ciozj.com 微信公众号:imciow
   
免责声明:本站转载此文章旨在分享信息,不代表对其内容的完全认同。文章来源已尽可能注明,若涉及版权问题,请及时与我们联系,我们将积极配合处理。同时,我们无法对文章内容的真实性、准确性及完整性进行完全保证,对于因文章内容而产生的任何后果,本账号不承担法律责任。转载仅出于传播目的,读者应自行对内容进行核实与判断。请谨慎参考文章信息,一切责任由读者自行承担。
延伸阅读