Changes between Initial Version and Version 2 of Ticket #8726


Ignore:
Timestamp:
Sep 28, 2012, 7:42:05 AM (9 years ago)
Author:
Jakub Ś
Comment:

Legend:

Unmodified
Added
Removed
Modified

  • Ticket #8726

    • Property Status changed from new to confirmed
    • Property Component changed from General to Core : Parser

  • Ticket #8726 – Description

    initial v2  
    22
    33Some clients ask about possibility to filter/block/modify certain HTML elements E.g.
    4 1. Remove all elements except strong and u tags and text nodes that are inside forbidden elements.
    5 2. Delete all a tags but leave their contents
    6 3. Wrap all images in spans
     41. How to remove all elements except strong and u tags and text nodes that are inside forbidden elements?
     52. How to delete all a tags but leave their contents?
     63. How to wrap all images in spans?
    77
    8 **Below are some incomplete solutions:**
     8Below I have presented some incomplete solutions (**just put code in config.js**). You may ask why Incomplete? [[BR]]
     9The below semi-solutions work on initial data or when switching to source and back or when pasting with CRTL+V, but they don’t work with plugins that insert these particular tags.
     10
     11The new feature here might be some white-list/ black-list or simply list based filter that would:
     12* remove tags that are on the black-list
     13* remove tags that are on the black-list but depending on some filter configuration setting it would leave or remove tag contents.
     14* would change tags that are on black-list to other tags that are on white-list.
     15* “Which tags should be changed to which” should be also defined in configuration option (something that user can define), perhaps in form of an object where properties are tag names:
     16{{{
     17var myFilterList = {
     18        a : '',
     19        strong : 'b',
     20        img : 'img:span'                                       
     21}
     22}}}
     23* Please note that object used above can tell filter to remove tag (a : ''), change it (strong : 'b'), or wrap it (img : 'img:span').
     24
     25
     26----
     27This code wrap images in spans
    928{{{
    1029on :{
    11                                         'pluginsLoaded' : function( evt ){ //it must be done before "instanceReady" to make the tag blocking in effect
    12                                                 evt.editor.dataProcessor.dataFilter.addRules({
    13                                                         elements :{
    14                                                                 span : function( element ) {
    15                                                                         //the rule for img is dumm as it keeps adding span tags the idea is to remove span and let img add it
    16                                                                         if ( element._processed )
    17                                                                                 return;
    18                                                                         if(element.attributes.id == 'cke_image_s_wrapper')
    19                                                                                 delete element.name;
    20                                                                 },
    21                                                                 img : function( element )
    22                                                                 {
    23                                                                         if ( element._processed )
    24                                                                                 return;
    25                                                                         element._processed = 1;
    26                                                                         element.alt = (!element.attributes.alt ? element.attributes.alt : 'An image');
    27 
    28                                                                         var parent = new CKEDITOR.htmlParser.element('span');
    29                                                                         parent.attributes.style='border:10px solid #f00;display: inline-block;';
    30                                                                         parent.attributes.id='cke_image_s_wrapper';
    31                                                                         parent.add(element);
    32                                                                         parent._processed = 1
    33                                                                         return parent;
    34                                                                 }
    35                                                         }
    36                                                 });
    37                                         }
     30        'pluginsLoaded' : function( evt ){ //it must be done before "instanceReady" to make the tag blocking in effect
     31                evt.editor.dataProcessor.dataFilter.addRules({
     32                        elements :{
     33                                span : function( element ) {
     34                                        //the rule for img is dumm as it keeps adding span tags the idea is to remove span and let img add it
     35                                        if ( element._processed )
     36                                                return;
     37                                        if(element.attributes.id == 'cke_image_s_wrapper')
     38                                                delete element.name;
     39                                },
     40                                img : function( element )
     41                                {
     42                                        if ( element._processed )
     43                                                return;
     44                                        element._processed = 1;
     45                                        element.alt = (!element.attributes.alt ? element.attributes.alt : 'An image');
     46                                        var parent = new CKEDITOR.htmlParser.element('span');
     47                                        parent.attributes.style='border:10px solid #f00;display: inline-block;';
     48                                        parent.attributes.id='cke_image_s_wrapper';
     49                                        parent.add(element);
     50                                        parent._processed = 1
     51                                        return parent;
    3852                                }
     53                        }
     54                });
     55        }
     56}
     57}}}
     58This code removes a tags but leaves their contents
     59{{{
     60on :
     61  {
     62          'pluginsLoaded' : function( evt )  //it must be done before "instanceReady" to make the tag blocking in effect
     63          {                                                       
     64                  evt.editor.dataProcessor.dataFilter.addRules(
     65                  {
     66                          elements :
     67                          {
     68                                a : function( element )
     69                                {                       delete element.name                                                                     
     70}                               
     71                          }
     72                  } );
     73          }
     74 }
    3975}}}
    4076
    41 {{{
    42 on :
    43                                           {
    44                                                   'pluginsLoaded' : function( evt )  //it must be done before "instanceReady" to make the tag blocking in effect
    45                                                   {                                                       
    46                                                           evt.editor.dataProcessor.dataFilter.addRules(
    47                                                                           {
    48                                                                                   elements :
    49                                                                                   {
    50                                                                                         a : function( element )
    51                                                                                         {                                                                                                       
    52                                                                                                 delete element.name                                                                                             
    53                                                                                         }                                                               
    54                                                                                   }
    55                                                                           } );
    56                                                   }
    57                                           }
    58 }}}
    59 
    60 
    61 **Why incomplete?**[[BR]]
    62 This works on initial data, when switching to source and back, when pasting but it does not work with plugins (for the above with image and link plugins).
    63 
    64 The solution here might be some plugin-filter through which all data would have to go through when it is enabled in configuration options.
    65 
    66 For such plugin used could define a set of rules according to his needs (perhaps again in configuration option?).
© 2003 – 2021 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy