*/\r
\r
(function() {\r
+ var each = tinymce.each, Node = tinymce.html.Node;\r
+\r
tinymce.create('tinymce.plugins.FullPagePlugin', {\r
init : function(ed, url) {\r
var t = this;\r
inline : 1\r
}, {\r
plugin_url : url,\r
- head_html : t.head\r
+ data : t._htmlToData()\r
});\r
});\r
\r
ed.addButton('fullpage', {title : 'fullpage.desc', cmd : 'mceFullPageProperties'});\r
\r
ed.onBeforeSetContent.add(t._setContent, t);\r
- ed.onSetContent.add(t._setBodyAttribs, t);\r
ed.onGetContent.add(t._getContent, t);\r
},\r
\r
\r
// Private plugin internal methods\r
\r
- _setBodyAttribs : function(ed, o) {\r
- var bdattr, i, len, kv, k, v, t, attr = this.head.match(/body(.*?)>/i);\r
+ _htmlToData : function() {\r
+ var headerFragment = this._parseHeader(), data = {}, nodes, elm, matches, editor = this.editor;\r
\r
- if (attr && attr[1]) {\r
- bdattr = attr[1].match(/\s*(\w+\s*=\s*".*?"|\w+\s*=\s*'.*?'|\w+\s*=\s*\w+|\w+)\s*/g);\r
+ function getAttr(elm, name) {\r
+ var value = elm.attr(name);\r
\r
- if (bdattr) {\r
- for(i = 0, len = bdattr.length; i < len; i++) {\r
- kv = bdattr[i].split('=');\r
- k = kv[0].replace(/\s/,'');\r
- v = kv[1];\r
+ return value || '';\r
+ };\r
\r
- if (v) {\r
- v = v.replace(/^\s+/,'').replace(/\s+$/,'');\r
- t = v.match(/^["'](.*)["']$/);\r
+ // Default some values\r
+ data.fontface = editor.getParam("fullpage_default_fontface", "");\r
+ data.fontsize = editor.getParam("fullpage_default_fontsize", "");\r
+\r
+ // Parse XML PI\r
+ elm = headerFragment.firstChild;\r
+ if (elm.type == 7) {\r
+ data.xml_pi = true;\r
+ matches = /encoding="([^"]+)"/.exec(elm.value);\r
+ if (matches)\r
+ data.docencoding = matches[1];\r
+ }\r
\r
- if (t)\r
- v = t[1];\r
- } else\r
- v = k;\r
+ // Parse doctype\r
+ elm = headerFragment.getAll('#doctype')[0];\r
+ if (elm)\r
+ data.doctype = '<!DOCTYPE' + elm.value + ">"; \r
\r
- ed.dom.setAttrib(ed.getBody(), 'style', v);\r
- }\r
+ // Parse title element\r
+ elm = headerFragment.getAll('title')[0];\r
+ if (elm && elm.firstChild) {\r
+ data.metatitle = elm.firstChild.value;\r
+ }\r
+\r
+ // Parse meta elements\r
+ each(headerFragment.getAll('meta'), function(meta) {\r
+ var name = meta.attr('name'), httpEquiv = meta.attr('http-equiv'), matches;\r
+\r
+ if (name)\r
+ data['meta' + name.toLowerCase()] = meta.attr('content');\r
+ else if (httpEquiv == "Content-Type") {\r
+ matches = /charset\s*=\s*(.*)\s*/gi.exec(meta.attr('content'));\r
+\r
+ if (matches)\r
+ data.docencoding = matches[1];\r
}\r
+ });\r
+\r
+ // Parse html attribs\r
+ elm = headerFragment.getAll('html')[0];\r
+ if (elm)\r
+ data.langcode = getAttr(elm, 'lang') || getAttr(elm, 'xml:lang');\r
+ \r
+ // Parse stylesheet\r
+ elm = headerFragment.getAll('link')[0];\r
+ if (elm && elm.attr('rel') == 'stylesheet')\r
+ data.stylesheet = elm.attr('href');\r
+\r
+ // Parse body parts\r
+ elm = headerFragment.getAll('body')[0];\r
+ if (elm) {\r
+ data.langdir = getAttr(elm, 'dir');\r
+ data.style = getAttr(elm, 'style');\r
+ data.visited_color = getAttr(elm, 'vlink');\r
+ data.link_color = getAttr(elm, 'link');\r
+ data.active_color = getAttr(elm, 'alink');\r
}\r
+\r
+ return data;\r
},\r
\r
- _createSerializer : function() {\r
- return new tinymce.dom.Serializer({\r
- dom : this.editor.dom,\r
- apply_source_formatting : true\r
+ _dataToHtml : function(data) {\r
+ var headerFragment, headElement, html, elm, value, dom = this.editor.dom;\r
+\r
+ function setAttr(elm, name, value) {\r
+ elm.attr(name, value ? value : undefined);\r
+ };\r
+\r
+ function addHeadNode(node) {\r
+ if (headElement.firstChild)\r
+ headElement.insert(node, headElement.firstChild);\r
+ else\r
+ headElement.append(node);\r
+ };\r
+\r
+ headerFragment = this._parseHeader();\r
+ headElement = headerFragment.getAll('head')[0];\r
+ if (!headElement) {\r
+ elm = headerFragment.getAll('html')[0];\r
+ headElement = new Node('head', 1);\r
+\r
+ if (elm.firstChild)\r
+ elm.insert(headElement, elm.firstChild, true);\r
+ else\r
+ elm.append(headElement);\r
+ }\r
+\r
+ // Add/update/remove XML-PI\r
+ elm = headerFragment.firstChild;\r
+ if (data.xml_pi) {\r
+ value = 'version="1.0"';\r
+\r
+ if (data.docencoding)\r
+ value += ' encoding="' + data.docencoding + '"';\r
+\r
+ if (elm.type != 7) {\r
+ elm = new Node('xml', 7);\r
+ headerFragment.insert(elm, headerFragment.firstChild, true);\r
+ }\r
+\r
+ elm.value = value;\r
+ } else if (elm && elm.type == 7)\r
+ elm.remove();\r
+\r
+ // Add/update/remove doctype\r
+ elm = headerFragment.getAll('#doctype')[0];\r
+ if (data.doctype) {\r
+ if (!elm) {\r
+ elm = new Node('#doctype', 10);\r
+\r
+ if (data.xml_pi)\r
+ headerFragment.insert(elm, headerFragment.firstChild);\r
+ else\r
+ addHeadNode(elm);\r
+ }\r
+\r
+ elm.value = data.doctype.substring(9, data.doctype.length - 1);\r
+ } else if (elm)\r
+ elm.remove();\r
+\r
+ // Add/update/remove title\r
+ elm = headerFragment.getAll('title')[0];\r
+ if (data.metatitle) {\r
+ if (!elm) {\r
+ elm = new Node('title', 1);\r
+ elm.append(new Node('#text', 3)).value = data.metatitle;\r
+ addHeadNode(elm);\r
+ }\r
+ }\r
+\r
+ // Add meta encoding\r
+ if (data.docencoding) {\r
+ elm = null;\r
+ each(headerFragment.getAll('meta'), function(meta) {\r
+ if (meta.attr('http-equiv') == 'Content-Type')\r
+ elm = meta;\r
+ });\r
+\r
+ if (!elm) {\r
+ elm = new Node('meta', 1);\r
+ elm.attr('http-equiv', 'Content-Type');\r
+ elm.shortEnded = true;\r
+ addHeadNode(elm);\r
+ }\r
+\r
+ elm.attr('content', 'text/html; charset=' + data.docencoding);\r
+ }\r
+\r
+ // Add/update/remove meta\r
+ each('keywords,description,author,copyright,robots'.split(','), function(name) {\r
+ var nodes = headerFragment.getAll('meta'), i, meta, value = data['meta' + name];\r
+\r
+ for (i = 0; i < nodes.length; i++) {\r
+ meta = nodes[i];\r
+\r
+ if (meta.attr('name') == name) {\r
+ if (value)\r
+ meta.attr('content', value);\r
+ else\r
+ meta.remove();\r
+\r
+ return;\r
+ }\r
+ }\r
+\r
+ if (value) {\r
+ elm = new Node('meta', 1);\r
+ elm.attr('name', name);\r
+ elm.attr('content', value);\r
+ elm.shortEnded = true;\r
+\r
+ addHeadNode(elm);\r
+ }\r
});\r
+\r
+ // Add/update/delete link\r
+ elm = headerFragment.getAll('link')[0];\r
+ if (elm && elm.attr('rel') == 'stylesheet') {\r
+ if (data.stylesheet)\r
+ elm.attr('href', data.stylesheet);\r
+ else\r
+ elm.remove();\r
+ } else if (data.stylesheet) {\r
+ elm = new Node('link', 1);\r
+ elm.attr({\r
+ rel : 'stylesheet',\r
+ text : 'text/css',\r
+ href : data.stylesheet\r
+ });\r
+ elm.shortEnded = true;\r
+\r
+ addHeadNode(elm);\r
+ }\r
+\r
+ // Update body attributes\r
+ elm = headerFragment.getAll('body')[0];\r
+ if (elm) {\r
+ setAttr(elm, 'dir', data.langdir);\r
+ setAttr(elm, 'style', data.style);\r
+ setAttr(elm, 'vlink', data.visited_color);\r
+ setAttr(elm, 'link', data.link_color);\r
+ setAttr(elm, 'alink', data.active_color);\r
+\r
+ // Update iframe body as well\r
+ dom.setAttribs(this.editor.getBody(), {\r
+ style : data.style,\r
+ dir : data.dir,\r
+ vLink : data.visited_color,\r
+ link : data.link_color,\r
+ aLink : data.active_color\r
+ });\r
+ }\r
+\r
+ // Set html attributes\r
+ elm = headerFragment.getAll('html')[0];\r
+ if (elm) {\r
+ setAttr(elm, 'lang', data.langcode);\r
+ setAttr(elm, 'xml:lang', data.langcode);\r
+ }\r
+\r
+ // Serialize header fragment and crop away body part\r
+ html = new tinymce.html.Serializer({\r
+ validate: false,\r
+ indent: true,\r
+ apply_source_formatting : true,\r
+ indent_before: 'head,html,body,meta,title,script,link,style',\r
+ indent_after: 'head,html,body,meta,title,script,link,style'\r
+ }).serialize(headerFragment);\r
+\r
+ this.head = html.substring(0, html.indexOf('</body>'));\r
+ },\r
+\r
+ _parseHeader : function() {\r
+ // Parse the contents with a DOM parser\r
+ return new tinymce.html.DomParser({\r
+ validate: false,\r
+ root_name: '#document'\r
+ }).parse(this.head);\r
},\r
\r
_setContent : function(ed, o) {\r
- var t = this, sp, ep, c = o.content, v, st = '';\r
+ var self = this, startPos, endPos, content = o.content, headerFragment, styles = '', dom = self.editor.dom, elm;\r
+\r
+ function low(s) {\r
+ return s.replace(/<\/?[A-Z]+/g, function(a) {\r
+ return a.toLowerCase();\r
+ })\r
+ };\r
\r
// Ignore raw updated if we already have a head, this will fix issues with undo/redo keeping the head/foot separate\r
- if (o.format == 'raw' && t.head)\r
+ if (o.format == 'raw' && self.head)\r
return;\r
\r
if (o.source_view && ed.getParam('fullpage_hide_in_source_view'))\r
return;\r
\r
// Parse out head, body and footer\r
- c = c.replace(/<(\/?)BODY/gi, '<$1body');\r
- sp = c.indexOf('<body');\r
+ content = content.replace(/<(\/?)BODY/gi, '<$1body');\r
+ startPos = content.indexOf('<body');\r
\r
- if (sp != -1) {\r
- sp = c.indexOf('>', sp);\r
- t.head = c.substring(0, sp + 1);\r
+ if (startPos != -1) {\r
+ startPos = content.indexOf('>', startPos);\r
+ self.head = low(content.substring(0, startPos + 1));\r
\r
- ep = c.indexOf('</body', sp);\r
- if (ep == -1)\r
- ep = c.indexOf('</body', ep);\r
+ endPos = content.indexOf('</body', startPos);\r
+ if (endPos == -1)\r
+ endPos = content.length;\r
\r
- o.content = c.substring(sp + 1, ep);\r
- t.foot = c.substring(ep);\r
+ o.content = content.substring(startPos + 1, endPos);\r
+ self.foot = low(content.substring(endPos));\r
+ } else {\r
+ self.head = this._getDefaultHeader();\r
+ self.foot = '\n</body>\n</html>';\r
+ }\r
\r
- function low(s) {\r
- return s.replace(/<\/?[A-Z]+/g, function(a) {\r
- return a.toLowerCase();\r
- })\r
- };\r
+ // Parse header and update iframe\r
+ headerFragment = self._parseHeader();\r
+ each(headerFragment.getAll('style'), function(node) {\r
+ if (node.firstChild)\r
+ styles += node.firstChild.value;\r
+ });\r
\r
- t.head = low(t.head);\r
- t.foot = low(t.foot);\r
- } else {\r
- t.head = '';\r
- if (ed.getParam('fullpage_default_xml_pi'))\r
- t.head += '<?xml version="1.0" encoding="' + ed.getParam('fullpage_default_encoding', 'ISO-8859-1') + '" ?>\n';\r
+ elm = headerFragment.getAll('body')[0];\r
+ if (elm) {\r
+ dom.setAttribs(self.editor.getBody(), {\r
+ style : elm.attr('style') || '',\r
+ dir : elm.attr('dir') || '',\r
+ vLink : elm.attr('vlink') || '',\r
+ link : elm.attr('link') || '',\r
+ aLink : elm.attr('alink') || ''\r
+ });\r
+ }\r
\r
- t.head += ed.getParam('fullpage_default_doctype', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');\r
- t.head += '\n<html>\n<head>\n<title>' + ed.getParam('fullpage_default_title', 'Untitled document') + '</title>\n';\r
+ dom.remove('fullpage_styles');\r
\r
- if (v = ed.getParam('fullpage_default_encoding'))\r
- t.head += '<meta http-equiv="Content-Type" content="' + v + '" />\n';\r
+ if (styles) {\r
+ dom.add(self.editor.getDoc().getElementsByTagName('head')[0], 'style', {id : 'fullpage_styles'}, styles);\r
\r
- if (v = ed.getParam('fullpage_default_font_family'))\r
- st += 'font-family: ' + v + ';';\r
+ // Needed for IE 6/7\r
+ elm = dom.get('fullpage_styles');\r
+ if (elm.styleSheet)\r
+ elm.styleSheet.cssText = styles;\r
+ }\r
+ },\r
\r
- if (v = ed.getParam('fullpage_default_font_size'))\r
- st += 'font-size: ' + v + ';';\r
+ _getDefaultHeader : function() {\r
+ var header = '', editor = this.editor, value, styles = '';\r
\r
- if (v = ed.getParam('fullpage_default_text_color'))\r
- st += 'color: ' + v + ';';\r
+ if (editor.getParam('fullpage_default_xml_pi'))\r
+ header += '<?xml version="1.0" encoding="' + editor.getParam('fullpage_default_encoding', 'ISO-8859-1') + '" ?>\n';\r
\r
- t.head += '</head>\n<body' + (st ? ' style="' + st + '"' : '') + '>\n';\r
- t.foot = '\n</body>\n</html>';\r
- }\r
+ header += editor.getParam('fullpage_default_doctype', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');\r
+ header += '\n<html>\n<head>\n';\r
+\r
+ if (value = editor.getParam('fullpage_default_title'))\r
+ header += '<title>' + value + '</title>\n';\r
+\r
+ if (value = editor.getParam('fullpage_default_encoding'))\r
+ header += '<meta http-equiv="Content-Type" content="text/html; charset=' + value + '" />\n';\r
+\r
+ if (value = editor.getParam('fullpage_default_font_family'))\r
+ styles += 'font-family: ' + value + ';';\r
+\r
+ if (value = editor.getParam('fullpage_default_font_size'))\r
+ styles += 'font-size: ' + value + ';';\r
+\r
+ if (value = editor.getParam('fullpage_default_text_color'))\r
+ styles += 'color: ' + value + ';';\r
+\r
+ header += '</head>\n<body' + (styles ? ' style="' + styles + '"' : '') + '>\n';\r
+\r
+ return header;\r
},\r
\r
_getContent : function(ed, o) {\r
- var t = this;\r
+ var self = this;\r
\r
if (!o.source_view || !ed.getParam('fullpage_hide_in_source_view'))\r
- o.content = tinymce.trim(t.head) + '\n' + tinymce.trim(o.content) + '\n' + tinymce.trim(t.foot);\r
+ o.content = tinymce.trim(self.head) + '\n' + tinymce.trim(o.content) + '\n' + tinymce.trim(self.foot);\r
}\r
});\r
\r
// Register plugin\r
tinymce.PluginManager.add('fullpage', tinymce.plugins.FullPagePlugin);\r
-})();
\ No newline at end of file
+})();\r