in reply to TinyMCE javascript toolbar

Hi Monks,
So this post was posted with TinyMCE. Here are some features, all from the toolbar:
  1. Some lists without all that ol and ul li stuff,
  2. Second item
Now some unordered items:
  • Text 1 (Some with Bold and some with Italics
  • Text 2 (Strikethrough)
Special characters like ‰ (what is that?)

Headings

And lots of other stuff.
It still has a few issues, but they mostly have workarounds which are easer than scripting the HTML yourself. Here are a few:

It suppresses white space.  (Updated OK, white space issue fixed).

p-tags and br-tags are converted to non-breakable space characters. This is not very helpful, so this post has a table for paragraphs. Oh, I forgot it has tables too:
row header
row item
row item

It has a spellcheck but I haven't got it working yet

I haven't quite got the hang of code snips yet. There is a code-tag and a pre-tag. Here they are:

Code tag

use strict;

use warnings;

print @_;

(Note white space problem -now fixed again thanks to "Anon"- and (updated) paired code tags on each line - thanks anon)

Here is a pre-tag

use strict;
use warnings;
print @_;

Updated: unsuported style= attributes in tables and lists.

(Thanks Tye)
I'll keep on plugging and update as I find resolutions.
Regards
Steve

Replies are listed 'Best First'.
Re^2: TinyMCE javascript toolbar (style=)
by tye (Sage) on Dec 14, 2014 at 16:57 UTC

    It is also posting unapproved attributes (seems just "style=...") that show up as error indications if you have error reporting turned up.

    - tye        

[reply]
[reply]
      Hi Tye
      Thanks for noticing that, I hadn't. I did wonder why the colours I had specified did not come out :)
      I'll check the tinyMCE user manual. I thought you could specify allowed tags, but I don't recall seeing attributes.
      Regards
      Steve

       

[reply]
[reply]
[d/l]
        Speaking of http://www.tinymce.com/wiki.php/Configuration:valid_elements and Perl Monks Approved HTML tags 
        #!/usr/bin/perl --
use strict;
use warnings;
use Data::Dump qw/ dd /;

my $data = q{
Tag     Attributes
a     href, name, target, class, title, rel
abbr     title
b     (none)
big     (none)
blockquote     class, cite, lang, dir
br1     /
c2     (none)
caption     class
center     (none)
code2     (none)
col     align, col, span, width, class
colgroup     align, col, span, width, class
dd     (none)
del     class, datetime, cite
div     class
dl     (none)
dt     (none)
em     (none)
font1     size, color, class
h11     class, align
h21     class, align
h3     class, align
h4     class, align
h5     class, align
h6     class, align
hr     /
i     (none)
ins     class, datetime, cite
li     value
ol     type, start
p     align, class
pre1     class
readmore3     title
small     (none)
span     class, title
spoiler4     (none)
strike     (none)
strong     (none)
sub     (none)
sup     (none)
table     width, cellpadding, cellspacing, border, bgcolor, class
tbody     width, align, valign, colspan, rowspan, bgcolor, height, cla
+ss
td     width, align, valign, colspan, rowspan, bgcolor, height, class
tfoot     width, align, valign, colspan, rowspan, bgcolor, height, cla
+ss
th     width, align, valign, colspan, rowspan, bgcolor, height, class
thead     width, align, valign, colspan, rowspan, bgcolor, height, cla
+ss
tr     width, align, valign, colspan, bgcolor, height, class
tt     class
u     (none)
ul     type
wbr     /
};

open DATA, '<', \$data;
my %f;
while(<DATA>){
    length or next;
    my( $tag, @atts ) = grep length, grep { $_ !~ /\Q(none)\E|\// } sp
+lit /[\s,]+/, $_;
    $tag or next;
    $tag =~ s/[1234]//g;
    $f{$tag}=\@atts;
}
delete $f{Tag};
dd( \%f );

print join ",", 
        map {
            my @atts = @{ $f{$_} };
            my $out = $_;
            if( @atts ){
                $out .= "[";
                $out .= join '|', @atts;
                $out .= "]";
            }
            $out;
        } sort keys %f ;
print "\n\n";


__END__
{
  a          => ["href", "name", "target", "class", "title", "rel"],
  abbr       => ["title"],
  b          => [],
  big        => [],
  blockquote => ["class", "cite", "lang", "dir"],
  br         => [],
  c          => [],
  caption    => ["class"],
  center     => [],
  code       => [],
  col        => ["align", "col", "span", "width", "class"],
  colgroup   => ["align", "col", "span", "width", "class"],
  dd         => [],
  del        => ["class", "datetime", "cite"],
  div        => ["class"],
  dl         => [],
  dt         => [],
  em         => [],
  font       => ["size", "color", "class"],
  h          => ["class", "align"],
  h5         => ["class", "align"],
  h6         => ["class", "align"],
  hr         => [],
  i          => [],
  ins        => ["class", "datetime", "cite"],
  li         => ["value"],
  ol         => ["type", "start"],
  p          => ["align", "class"],
  pre        => ["class"],
  readmore   => ["title"],
  small      => [],
  span       => ["class", "title"],
  spoiler    => [],
  strike     => [],
  strong     => [],
  sub        => [],
  sup        => [],
  table      => [
                  "width",
                  "cellpadding",
                  "cellspacing",
                  "border",
                  "bgcolor",
                  "class",
                ],
  tbody      => [
                  "width",
                  "align",
                  "valign",
                  "colspan",
                  "rowspan",
                  "bgcolor",
                  "height",
                  "class",
                ],
  td         => [
                  "width",
                  "align",
                  "valign",
                  "colspan",
                  "rowspan",
                  "bgcolor",
                  "height",
                  "class",
                ],
  tfoot      => [
                  "width",
                  "align",
                  "valign",
                  "colspan",
                  "rowspan",
                  "bgcolor",
                  "height",
                  "class",
                ],
  th         => [
                  "width",
                  "align",
                  "valign",
                  "colspan",
                  "rowspan",
                  "bgcolor",
                  "height",
                  "class",
                ],
  thead      => [
                  "width",
                  "align",
                  "valign",
                  "colspan",
                  "rowspan",
                  "bgcolor",
                  "height",
                  "class",
                ],
  tr         => [
                  "width",
                  "align",
                  "valign",
                  "colspan",
                  "bgcolor",
                  "height",
                  "class",
                ],
  tt         => ["class"],
  u          => [],
  ul         => ["type"],
  wbr        => [],
}

        [download]
        valid_elements : "a[href|name|target|class|title|rel],abbr[title],b,bi
+g,blockquote[class|cite|lang|dir],br,c,caption[class],center,code,col
+[align|col|span|width|class],colgroup[align|col|span|width|class],dd,
+del[class|datetime|cite],div[class],dl,dt,em,font[size|color|class],h
+[class|align],h3[class|align],h4[class|align],h5[class|align],h6[clas
+s|align],hr,i,ins[class|datetime|cite],li[value],ol[type|start],p[ali
+gn|class],pre[class],readmore3[title],small,span[class|title],spoiler
+4,strike,strong,sub,sup,table[width|cellpadding|cellspacing|border|bg
+color|class],tbody[width|align|valign|colspan|rowspan|bgcolor|height|
+class],td[width|align|valign|colspan|rowspan|bgcolor|height|class],tf
+oot[width|align|valign|colspan|rowspan|bgcolor|height|class],th[width
+|align|valign|colspan|rowspan|bgcolor|height|class],thead[width|align
+|valign|colspan|rowspan|bgcolor|height|class],tr[width|align|valign|c
+olspan|bgcolor|height|class],tt[class],u,ul[type],wbr"

        [download]
[reply]
[d/l]
[select]
Re^2: TinyMCE javascript toolbar
by Anonymous Monk on Dec 14, 2014 at 11:49 UTC
    This is not good :) 
    <h2>Code tag</h2>
<code>use strict;</code>
<code>use warnings;</code>
<code>print @_;</code>

    [download]
[reply]
[d/l]
      Yes, I saw that. Any ideas?
[reply]

        Yes, I saw that. Any ideas?

        I don't hack TinyMCE :)

[reply]

In Section Perl Monks Discussion