samclarke / SCEditor

A lightweight HTML and BBCode WYSIWYG editor
http://www.sceditor.com/
Other
664 stars 186 forks source link

Add custom bbcode Neon #689

Open iDaemon opened 6 years ago

iDaemon commented 6 years ago

I've been working on the following code:

$(function() {
  if (!$.sceditor) return;

  $.sceditor.plugins.bbcode.bbcode.set('neon', {
      tags: {
          font: {
              style: null
          }
      },
      quoteType: $.sceditor.BBCodeParser.QuoteType.never,
      format: function($element, content) {
          var color, element = $element[0];
          if (element.nodeName.toLowerCase() !== 'font' || !(color = element.style.color))
              color = element.style.color || $element.css('color');
              return '[neon=' + $.sceditor.plugins.bbcode.normaliseColour(color) + ']' + content + '[/neon]';
      },
      html: function(token, attrs, content) {
          return '<font style="color: ' + attrs.defaultattr + ';text-shadow: 0px 0px 5px ' + attrs.defaultattr + '">' + content + '</font>'
      }
  });
  $.sceditor.command.set('neon', {
    _dropDown: function(editor, caller, callback) {
        var i, x, color, colors, genColor = {
            r: 255,
            g: 255,
            b: 255
        },
        content = $('<div />'),
        colorColumns = editor.opts.colors ? editor.opts.colors.split('|') : new Array(6),
        html = [],
        cmd = $.sceditor.command.get('neon');
        if (!cmd._htmlCache) {
            for (i = 0; i < colorColumns.length; ++i) {
                colors = colorColumns[i] ? colorColumns[i].split(',') : new Array(37);
                html.push('<div class="sceditor-color-column">');
                for (x = 0; x < colors.length; ++x) {
                    color = colors[x] || "#" + genColor.r.toString(16) + genColor.g.toString(16) + genColor.b.toString(16);
                    html.push('<a href="#" class="sceditor-color-option" style="background-color: ' + color + '" data-color="' + color + '"></a>');
                    if (x % 6 === 0) {
                        genColor.g -= 51;
                        genColor.b = 255;
                        if (genColor.g < 51) {
                            genColor.g = "00"
                        }
                    } else genColor.b -= 51;
                    if (genColor.b < 51) {
                        genColor.b = "00"
                    }
                }
                html.push('</div>');
                if (i % 1 === 0) {
                    genColor.r -= 51;
                    genColor.g = 255;
                    genColor.b = 255;
                    if (genColor.r < 51) {
                        genColor.r = "00"
                    }
                } else {
                    genColor.g = 255;
                    genColor.b = 255;
                }
            }
            cmd._htmlCache = html.join('');
        }
        content.append(cmd._htmlCache).find('a').click(function(e) {
            callback($(this).attr('data-color'));
            editor.closeDropDown(true);
            e.preventDefault();
        });
        editor.createDropDown(caller, "color-picker", content);
    },
    exec: function(caller) {
        var editor = this;
        $.sceditor.command.get('neon')._dropDown(editor, caller, function(color) {
            var before = '<font style="color: ' + color + ';text-shadow: 0px 0px 5px ' + color + '">',
                end = '</font>';
            editor.wysiwygEditorInsertHtml(before, end)
        });
    },
    txtExec: function(caller) {
        var editor = this;
        $.sceditor.command.get('neon')._dropDown(editor, caller, function(color) {
            editor.insertText("[neon=" + color + "]", "[/neon]");
        });
    },
    tooltip: 'Neon'
  });

  toolbar = toolbar.replace(/quote/,'neon, quote');

  // Styles
  $('head').append(
  '<style type="text/css">' +
  '.sceditor-button-neon div {' +
  '  background:url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/color2_16x16.gif) !important}' +
  '  .sceditor-neon {' +
  '  width:auto;' +
  '  height:auto;' +
  '  overflow-y:auto;' +
  '}' +
  '.sceditor-neon-picker {' +
  '  padding: 0 !important;' +
  '}' +
  '.sceditor-neon-option {' +
  'border: 1px solid #fff;' +
  'display: block;' +
  'height: 10px;' +
  'overflow: hidden;' +
  'width: 10px;' +
  '}' +
  '</style>'
  );
});

I want to know what's wrong, that when I switch from Wysywig mode it duplicates the tag [neon=color]content[/neon], and when I delete everything, it inserts the tag [color]

iDaemon commented 6 years ago

The result can be tested here: http://bestskinsdemo.forumpro.in/t15-testeasdasd User: teste Password: teste123

When I try to change the color of the neon after the text is selected, it does not change the tag! The code is adding an extra tag! And when I delete the text and type again, it adds the [color]

abetis commented 6 years ago

Try this:

      tags: {
          font: null
      },

I think I had duplicates as well when I tried to use other filter methods.

iDaemon commented 6 years ago

It's almost there ... the problem is this: after selecting the text and applying bbcode neon, when I try to delete still in wysywig mode and re-type, the editor automatically places the [color] tag in the text. see an example: https://i.imgur.com/dGw9e7u.gif

iDaemon commented 6 years ago

Nothing?