CKEditor - Modify BBCode Output

问题

I'm building a forum application in php for my website (mostly just to see if I can pull it off). I've been tinkering with web development as a hobbyist for nearly 20 years, but I've always avoided working with javascript - meaning I've become pretty good working with html,css and php, but I'm useless when it comes to client-side scripting.

For all intents and purposes, my forum works. Users can register, post, edit, review an delete posts based on their user level and permissions etc. However I have an issue which is driving me crazy because I can't solve it:

I'm using CKEditor with the BBCode plugin as a WYSIWYG thread editor. On the server side I'm using a PEAR module for PHP to parse the BBCode and display the proper html. The PEAR module supports image tags in the following format [img width={width} height={height}]{url}[/img] but by default the BBCode plugin for CKEditor strips away the resizing functionality and will only allow me to use [img]{url}[/img] type tags.

I've managed to extend the plugin to process some other tags (s, sup, sub, font, etc.) but those are just a matter of adding them to the bbCode lists near the beginning of the plugin. img tags are handled differently, but without having a solid grasp on javascript I'm having a hard time fully understanding the source code to add my own logic. No matter what I do, the width and height properties get stripped away from the image tag.

Does anybody have a method of extending the CKEditor BBCode plugin so that I can retain the width and height attributes for images? I realize that similar questions have been asked before, but from what I can see none of them have been answered directly.

Here is a link to the CKEditor plugin: http://ckeditor.com/addon/bbcode (I'm using version 4.4.7) and CKEditor itself: http://ckeditor.com/download (I'm using a full build of 4.4.7).

My bbcode map is:

	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',
	    sup: 'sup',
	    sub: 'sub',
	    s: 's',
	    font: 'span'
	  },
	  convertMap = {
	    strong: 'b',
	    b: 'b',
	    u: 'u',
	    em: 'i',
	    i: 'i',
	    code: 'code',
	    li: '*',
	    sup: 'sup',
	    sub: 'sub',
	    s: 's'
	  },
	  tagnameMap = {
	    strong: 'b',
	    em: 'i',
	    u: 'u',
	    li: '*',
	    ul: 'list',
	    ol: 'list',
	    code: 'code',
	    a: 'link',
	    blockquote: 'quote',
	    sup: 'superscript',
	    sub: 'subscript',
	    font: 'font',
	    s: 'strike'
	  },
	  stylesMap = {
	    color: 'color',
	    size: 'font-size',
	    font: 'font-family'
	  },
	  attributesMap = {
	    url: 'href',
	    email: 'mailhref',
	    quote: 'cite',
	    list: 'listType'
	  };

The initialization HTML is:

<textarea style="width: 100%; height: 200px;" name="post_content">

</textarea>

<script>
  CKEDITOR.replace('post_content', {
    extraPlugins: 'bbcode',
    // Remove unused plugins.
    removePlugins: 'bidi,dialogadvtab,div,filebrowser,flash,forms,format,horizontalrule,iframe,justify,liststyle,pagebreak,showborders,stylescombo,table,tabletools,templates',
    // Width and height are not supported in the BBCode format, so object resizing is disabled.
    disableObjectResizing: false,
    // Define font sizes in percent values.
    fontSize_sizes: "30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%",
    toolbar: [
      ['Source', '-', 'Undo', 'Redo'],
      ['Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
      ['Link', 'Unlink', 'Image', 'Smiley', 'SpecialChar'],
      ['Bold', 'Italic', 'Underline', 'Superscript', 'Subscript', 'Strike'],
      ['Font', 'FontSize'],
      ['TextColor'],
      ['NumberedList', 'BulletedList', '-', 'Blockquote'],
      ['Maximize', '-', 'Preview']
    ],
    // Strip CKEditor smileys to those commonly used in BBCode.
    smiley_images: [
      'regular_smile.png', 'sad_smile.png', 'wink_smile.png', 'teeth_smile.png', 'tongue_smile.png',
      'embarrassed_smile.png', 'omg_smile.png', 'whatchutalkingabout_smile.png', 'angel_smile.png',
      'shades_smile.png', 'cry_smile.png', 'kiss.png'
    ],
    smiley_descriptions: [
      'smiley', 'sad', 'wink', 'laugh', 'cheeky', 'blush', 'surprise',
      'indecision', 'angel', 'cool', 'crying', 'kiss'
    ]
  });
</script>

来源：https://stackoverflow.com/questions/29377246/ckeditor-modify-bbcode-output

标签

javascript

ckeditor