Roo/htmleditor/FilterWord.js
[roojs1] / Roo / htmleditor / FilterWord.js
1 /**
2  * @class Roo.htmleditor.FilterWord
3  * try and clean up all the mess that Word generates.
4  * 
5  * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters 
6  
7  * @constructor
8  * Run a new Span Filter
9  * @param {Object} config Configuration options
10  */
11
12 Roo.htmleditor.FilterWord = function(cfg)
13 {
14     // no need to apply config.
15     this.replaceDocBullets(cfg.node);
16     
17     this.replaceAname(cfg.node);
18     // this is disabled as the removal is done by other filters;
19    // this.walk(cfg.node);
20     
21     
22 }
23
24 Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
25 {
26     tag: true,
27      
28     
29     /**
30      * Clean up MS wordisms...
31      */
32     replaceTag : function(node)
33     {
34          
35         // no idea what this does - span with text, replaceds with just text.
36         if(
37                 node.nodeName == 'SPAN' &&
38                 !node.hasAttributes() &&
39                 node.childNodes.length == 1 &&
40                 node.firstChild.nodeName == "#text"  
41         ) {
42             var textNode = node.firstChild;
43             node.removeChild(textNode);
44             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
45                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
46             }
47             node.parentNode.insertBefore(textNode, node);
48             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
49                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
50             }
51             
52             node.parentNode.removeChild(node);
53             return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
54         }
55         
56    
57         
58         if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
59             node.parentNode.removeChild(node);
60             return false; // dont do chidlren
61         }
62         //Roo.log(node.tagName);
63         // remove - but keep children..
64         if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
65             //Roo.log('-- removed');
66             while (node.childNodes.length) {
67                 var cn = node.childNodes[0];
68                 node.removeChild(cn);
69                 node.parentNode.insertBefore(cn, node);
70                 // move node to parent - and clean it..
71                 if (cn.nodeType == 1) {
72                     this.replaceTag(cn);
73                 }
74                 
75             }
76             node.parentNode.removeChild(node);
77             /// no need to iterate chidlren = it's got none..
78             //this.iterateChildren(node, this.cleanWord);
79             return false; // no need to iterate children.
80         }
81         // clean styles
82         if (node.className.length) {
83             
84             var cn = node.className.split(/\W+/);
85             var cna = [];
86             Roo.each(cn, function(cls) {
87                 if (cls.match(/Mso[a-zA-Z]+/)) {
88                     return;
89                 }
90                 cna.push(cls);
91             });
92             node.className = cna.length ? cna.join(' ') : '';
93             if (!cna.length) {
94                 node.removeAttribute("class");
95             }
96         }
97         
98         if (node.hasAttribute("lang")) {
99             node.removeAttribute("lang");
100         }
101         
102         if (node.hasAttribute("style")) {
103             
104             var styles = node.getAttribute("style").split(";");
105             var nstyle = [];
106             Roo.each(styles, function(s) {
107                 if (!s.match(/:/)) {
108                     return;
109                 }
110                 var kv = s.split(":");
111                 if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
112                     return;
113                 }
114                 // what ever is left... we allow.
115                 nstyle.push(s);
116             });
117             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
118             if (!nstyle.length) {
119                 node.removeAttribute('style');
120             }
121         }
122         return true; // do children
123         
124         
125         
126     },
127     
128     styleToObject: function(node)
129     {
130         var styles = (node.getAttribute("style") || '').split(";");
131         var ret = {};
132         Roo.each(styles, function(s) {
133             if (!s.match(/:/)) {
134                 return;
135             }
136             var kv = s.split(":");
137              
138             // what ever is left... we allow.
139             ret[kv[0].trim()] = kv[1];
140         });
141         return ret;
142     },
143     
144     
145     replaceAname : function (doc)
146     {
147         // replace all the a/name without..
148         var aa = Array.from(doc.getElementsByTagName('a'));
149         for (var i = 0; i  < aa.length; i++) {
150             var a = aa[i];
151             if (a.hasAttribute("name")) {
152                 a.removeAttribute("name");
153             }
154             if (a.hasAttribute("href")) {
155                 continue;
156             }
157             // reparent children.
158             this.removeNodeKeepChildren(a);
159             
160         }
161         
162         
163         
164     },
165
166     
167     
168     replaceDocBullets : function(doc)
169     {
170         // this is a bit odd - but it appears some indents use ql-indent-1
171          Roo.log(doc.innerHTML);
172         
173         var listpara = doc.getElementsByClassName('MsoListParagraphCxSpFirst');
174         for( var i = 0; i < listpara.length; i ++) {
175             listpara.item(i).className = "MsoListParagraph";
176         }
177         // this is a bit hacky - we had one word document where h2 had a miso-list attribute.
178         var htwo = doc.getElementsByTagName('h2');
179         for( var i = 0; i < htwo.length; i ++) {
180             if (htwo.item(i).hasAttribute('style') && htwo.item(i).getAttribute('style').match(/mso-list:/)) {
181                 htwo.item(i).className = "MsoListParagraph";
182             }
183         }
184         listpara = doc.getElementsByClassName('MsoNormal');
185         while(listpara.length) {
186             if (listpara.item(0).hasAttribute('style') && listpara.item(0).getAttribute('style').match(/mso-list:/)) {
187                 listpara.item(0).className = "MsoListParagraph";
188             } else {
189                 listpara.item(0).className = "MsoNormalx";
190             }
191         }
192         listpara = doc.getElementsByClassName('ql-indent-1');
193         while(listpara.length) {
194             this.replaceDocBullet(listpara.item(0));
195         }
196         listpara = doc.getElementsByClassName('MsoListParagraph');
197         while(listpara.length) {
198             
199             this.replaceDocBullet(listpara.item(0));
200         }
201       
202     },
203     
204      
205     
206     replaceDocBullet : function(p)
207     {
208         // gather all the siblings.
209         var ns = p,
210             parent = p.parentNode,
211             doc = parent.ownerDocument,
212             items = [];
213             
214         var listtype = 'ul';   
215         while (ns) {
216             if (ns.nodeType != 1) {
217                 ns = ns.nextSibling;
218                 continue;
219             }
220             if (!ns.className.match(/(MsoListParagraph|ql-indent-1)/i)) {
221                 break;
222             }
223             var spans = ns.getElementsByTagName('span');
224             if (ns.hasAttribute('style') && ns.getAttribute('style').match(/mso-list/)) {
225                 items.push(ns);
226                 ns = ns.nextSibling;
227                 has_list = true;
228                 if (spans.length && spans[0].hasAttribute('style')) {
229                     var  style = this.styleToObject(spans[0]);
230                     if (typeof(style['font-family']) != 'undefined' && !style['font-family'].match(/Symbol/)) {
231                         listtype = 'ol';
232                     }
233                 }
234                 
235                 continue;
236             }
237             var spans = ns.getElementsByTagName('span');
238             if (!spans.length) {
239                 break;
240             }
241             var has_list  = false;
242             for(var i = 0; i < spans.length; i++) {
243                 if (spans[i].hasAttribute('style') && spans[i].getAttribute('style').match(/mso-list/)) {
244                     has_list = true;
245                     break;
246                 }
247             }
248             if (!has_list) {
249                 break;
250             }
251             items.push(ns);
252             ns = ns.nextSibling;
253             
254             
255         }
256         if (!items.length) {
257             ns.className = "";
258             return;
259         }
260         
261         var ul = parent.ownerDocument.createElement(listtype); // what about number lists...
262         parent.insertBefore(ul, p);
263         var lvl = 0;
264         var stack = [ ul ];
265         var last_li = false;
266         
267         var margin_to_depth = {};
268         max_margins = -1;
269         
270         items.forEach(function(n, ipos) {
271             //Roo.log("got innertHMLT=" + n.innerHTML);
272             
273             var spans = n.getElementsByTagName('span');
274             if (!spans.length) {
275                 //Roo.log("No spans found");
276                  
277                 parent.removeChild(n);
278                 
279                 
280                 return; // skip it...
281             }
282            
283                 
284             var num = 1;
285             var style = {};
286             for(var i = 0; i < spans.length; i++) {
287             
288                 style = this.styleToObject(spans[i]);
289                 if (typeof(style['mso-list']) == 'undefined') {
290                     continue;
291                 }
292                 if (listtype == 'ol') {
293                     var num = spans[i].innerText.replace(/[^0-9]+]/g,'');
294                 }
295                 spans[i].parentNode.removeChild(spans[i]); // remove the fake bullet.
296                 break;
297             }
298             //Roo.log("NOW GOT innertHMLT=" + n.innerHTML);
299             style = this.styleToObject(n); // mo-list is from the parent node.
300             if (typeof(style['mso-list']) == 'undefined') {
301                 //Roo.log("parent is missing level");
302                   
303                 parent.removeChild(n);
304                  
305                 return;
306             }
307             
308             var margin = style['margin-left'];
309             if (typeof(margin_to_depth[margin]) == 'undefined') {
310                 max_margins++;
311                 margin_to_depth[margin] = max_margins;
312             }
313             nlvl = margin_to_depth[margin] ;
314              
315             if (nlvl > lvl) {
316                 //new indent
317                 var nul = doc.createElement(listtype); // what about number lists...
318                 if (!last_li) {
319                     last_li = doc.createElement('li');
320                     stack[lvl].appendChild(last_li);
321                 }
322                 last_li.appendChild(nul);
323                 stack[nlvl] = nul;
324                 
325             }
326             lvl = nlvl;
327             
328             // not starting at 1..
329             if (!stack[nlvl].hasAtribute("start") && num > 1) {
330                 stack[nlvl].setAttribuet("start", num);
331             }
332             
333             var nli = stack[nlvl].appendChild(doc.createElement('li'));
334             last_li = nli;
335             nli.innerHTML = n.innerHTML;
336             //Roo.log("innerHTML = " + n.innerHTML);
337             parent.removeChild(n);
338             
339              
340              
341             
342         },this);
343         
344         
345         
346         
347     }
348     
349     
350     
351 });