bbcode ckeditor justify 插件

Question

我安装 ckeditor 并在我安装该代码（bbcode 插件）之后：

https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/bbcode/plugin.js

然后我安装该代码（证明插件）：

https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/justify/plugin.js

在我安装插件后一切正常，但是当我在 justify 插件中单击中心或左右时 - bbcode 插件不支持 justify mod。

谁能帮我在bbcode插件中构建一个简单的代码支持justify mod？

论坛用的，我只需要bbcode。

我需要这样的代码：

如果<span style=\"text-align: center;\">texthere</span>

替换为[center]texthere[/center]

或类似的东西。

感谢您的帮助。

我试试这个代码：

(function() {
  CKEDITOR.plugins.add('bbcode',
  {
    requires: ['htmlwriter'],
    init: function(editor) {
      editor.dataProcessor = new CKEDITOR.htmlDataProcessor(editor);
      editor.dataProcessor.toHtml = toHtml;
      editor.dataProcessor.toDataFormat = toDataFormat;
    }
  });

  var toHtml = function(data, fixForBody) {
    // Convert < and > to their HTML entities.
    data = data.replace(/</g, '&lt;');
    data = data.replace(/>/g, '&gt;');

    // Convert line breaks to <br>.
    data = data.replace(/(?:\r\n|\n|\r)/g, '<br>');

    // [url]
    data = data.replace(/\[url\](.+?)\[\/url]/gi, '<a href="$1">$1</a>');
    data = data.replace(/\[url\=([^\]]+)](.+?)\[\/url]/gi, '<a href="$1">$2</a>');


    // [b]
    data = data.replace(/\[b\](.*?)\[\/b]/gi, '<b>$1</b>');

    // [i]
    data = data.replace(/\[i\](.*?)\[\/i]/gi, '<i>$1</i>');

    // [u]
    data = data.replace(/\[u\](.*?)\[\/u]/gi, '<u>$1</u>');

    // [h3]
    data = data.replace(/\[h3\](.*?)\[\/h3](?:<br ?\/?>|\n)?/gi, '<h3>$1</h3>');

    // [img]
    data = data.replace(/\[img\](.*?)\[\/img\]/gi,'<img src="$1" />');
    data = data.replace(/\[img class=([\w-]+)\](.*?)\[\/img\]/gi,'<img class="$1" src="$2" />');

    // [quote]
    data = data.replace(/\[quote\]/gi, '<blockquote>');
    data = data.replace(/\[\/quote]/gi, '</blockquote>');

    // [poster]
    data = data.replace(/\[poster\](.+?)\[\/poster]/gi, '<div class="text-poster">$1</div>');

    // [code]
    data = data.replace(/\[code\]/gi,'<code>');
    data = data.replace(/\[\/code\]/gi,'</code>');

    // [size]
    data = data.replace(/\[size=(\d+)\](.*?)\[\/size\]/gi,'<span style="font-size: $1px">$2</span>');

    // [color]
    data = data.replace(/\[color=(.*?)\](.*?)\[\/color\]/gi,'<span style="color: $1">$2</span>');

    // [center] 
    data = data.replace(/\[align=(.*?)\](.*?)\[\/align\]/gi,'<span style="align: center">$2</span>');

    // [right] 
    data = data.replace(/\[align=(.*?)\](.*?)\[\/align\]/gi,'<span style="align: right">$2</span>');

    // [left] 
    data = data.replace(/\[align=(.*?)\](.*?)\[\/align\]/gi,'<span style="align: left">$2</span>');


    // smileys
    for (var i = 0; i < this.editor.config.smiley_images.length; i++) {
      var smiley = this.editor.config.smiley_images[i].replace('.gif', '');
      if (data.indexOf(smiley) != -1) {
        data = data.split(smiley).join('<img src="'+ this.editor.config.smiley_path + this.editor.config.smiley_images[i] + '" class="smiley" />');
      }
    }

    return data;
  };
  var toDataFormat = function(html, fixForBody ) {
    if (html == '<br>' || html == '<p><br></p>') {
      return "";
    }
    // Convert <br> to line breaks.
    html = html.replace(/<br><\/p>/gi,"\n");
    html = html.replace(/<br(?=[ \/>]).*?>/gi, '\r\n');
    html = html.replace(/<p>/gi,"");
    html = html.replace(/<\/p>/gi,"\n");
    html = html.replace(/&nbsp;/gi," ");

    // [url]
    html = html.replace(/<a .*?href=(["'])(.+?)\1.*?>(.+?)<\/a>/gi, '[url=$2]$3[/url]');

    // [b]
    html = html.replace(/<(?:b|strong)>/gi, '[b]');
    html = html.replace(/<\/(?:b|strong)>/gi, '[/b]');

    // [i]
    html = html.replace(/<(?:i|em)>/gi, '[i]');
    html = html.replace(/<\/(?:i|em)>/gi, '[/i]');

    // [u]
    html = html.replace(/<u>/gi, '[u]');
    html = html.replace(/<\/u>/gi, '[/u]');

    // [h3]
    html = html.replace(/<h3>/gi, '[h3]');
    html = html.replace(/<\/h3>/gi, '[/h3]\n');

    // smileys
    html = html.replace(/<img .*?src=(["']).+?(:.+?:?|(\W)_\3).gif\1.*?>/gi, '$2');

    // [img]
    html = html.replace(/<img .*?class=(["'])([\w-]+)\1.*?src=(["'])(.+?)\3.*?>/gi, '[img class=$2]$4[/img]');
    html = html.replace(/<img .*?src=(["'])(.+?)\1.*?class=(["'])([\w-]+)\3.*?>/gi, '[img class=$4]$2[/img]');
    html = html.replace(/<img .*?src=(["'])(.+?)\1.*?>/gi, '[img]$2[/img]');

    // [quote]
    html = html.replace(/<blockquote>/gi, '[quote]');
    html = html.replace(/\n*<\/blockquote>/gi, '[/quote]');

    // [poster]
    html = html.replace(/<div class="text-poster">([\s\S]+?)<\/div>/gi, '[poster]$1[/poster]');

    // [code]
    html = html.replace(/<code>/gi, '[code]');
    html = html.replace(/<\/code>/gi, '[/code]');

    // [color]
    html = html.replace(/<span style="color: ?(.*?);?">(.*?)<\/span>/gi,"[color=$1]$2[/color]");

    // [size]
    html = html.replace(/<span style="font-size: ?(\d+)px;?">(.*?)<\/span>/gi,"[size=$1]$2[/size]");

    // Remove remaining tags.
    html = html.replace(/<[^>]+>/g, '');

    // Restore < and >
    html = html.replace(/&lt;/g, '<');
    html = html.replace(/&gt;/g, '>');

    // Restore (and )
    html = html.replace(/%28/g, '(');
    html = html.replace(/%29/g, ')');

    // Restore %20
    html = html.replace(/%20/g, ' ');

    return html;
  }
})();

但此代码不起作用。

我认为这段代码用于 ckeditor 3 之类的..

Answer 1

我今天遇到了同样的问题，我设法通过修改 bbcode 插件文件夹中的 plugin.js 使其工作

第29行：

var bbcodeMap = { b: 'strong', u: 'u', i: 'em', color: 'span', size: 'span', quote: 'blockquote', code: 'code', url: 'a', email: 'span', img: 'span', '*': 'li', list: 'ol',center:'div',left:'div',right:'div'},

以及151-160左右的线路：

// as "span" with an attribute marker.
if ( part == 'email' || part == 'img' )
attribs[ 'bbcode' ] = part;

//adding this to deal with the align issues
if (part == 'center' || part == 'left' || part == 'right'){
styles ['text-align'] = part;
attribs.style = serializeStyleText( styles );
}

this.onTagOpen( tagName, attribs, CKEDITOR.dtd.$empty[ tagName ] );

最后一行从 658 开始：

if ( tagName in convertMap )
    tagName = convertMap[ tagName ];
//adding div element
else if (tagName == 'div'){
    if ( ( value = style['text-align'] ) ) {
        tagName = value;
        value = '';
    }
}
else if ( tagName == 'span' ) {
if ( ( value = style.color ) ) {
    tagName = 'color';
    value = CKEDITOR.tools.convertRgbToHex( value );
....

至少这对我有用。

这有点奇怪，因为 Justify 插件添加的是“div”元素而不是“span”。也许您也可以修改它以满足您的“跨度”要求。