anoopmb
/
frappe
1
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
Explorar el Código

[text editor] added wysiwyg-bootstrap

version-14
Rushabh Mehta hace 12 años
padre
869c748627
commit
e8f002b9ca
Se han modificado 7 ficheros con 1260 adiciones y 131 borrados
Dividir vista
Opciones de diferencias
Mostrar estadísticas Descargar archivo de parche Descargar archivo de diferencias
  1. +1
    -0
      public/build.json
  2. +15
    -0
      public/css/ui/common.css
  3. +22
    -131
      public/js/legacy/widgets/form/form_fields.js
  4. +637
    -0
      public/js/lib/beautify-html.js
  5. +181
    -0
      public/js/lib/bootstrap-wysiwyg.js
  6. +100
    -0
      public/js/lib/jquery/jquery.hotkeys.js
  7. +304
    -0
      public/js/wn/form/editors.js

+ 1
- 0
public/build.json Ver fichero

@@ -155,6 +155,7 @@
"lib/public/js/legacy/widgets/form/form_comments.js",
"lib/public/js/legacy/wn/widgets/form/sidebar.js",
"lib/public/js/legacy/wn/widgets/form/comments.js",
"lib/public/js/wn/form/editors.js",
"lib/public/js/wn/form/attachments.js",
"lib/public/js/wn/form/linked_with.js",
"lib/public/js/wn/form/states.js",


+ 15
- 0
public/css/ui/common.css Ver fichero

@@ -113,3 +113,18 @@ a {
font-size: 32px;
color: #888;
}

.wysiwyg-editor {
min-height: 400px;
background-color: white;
border-collapse: separate;
border: 1px solid rgb(204, 204, 204);
padding: 4px;
box-sizing: content-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
border-top-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-top-left-radius: 3px;
overflow: scroll;
outline: none;
}

+ 22
- 131
public/js/legacy/widgets/form/form_fields.js Ver fichero

@@ -218,143 +218,33 @@ _f.CodeField.prototype.make_input = function() {

this.label_span.innerHTML = this.df.label;

if(this.df.fieldtype=='Text Editor') {
$(this.input_area).css({"min-height":"360px"});
this.input = $a(this.input_area, 'text_area', '', {fontSize:'12px'});
this.myid = wn.dom.set_unique_id(this.input);

// setup tiny mce
$(me.input).tinymce({
// Location of TinyMCE script
script_url : 'lib/js/lib/tiny_mce_3.5.7/tiny_mce.js',

// General options
theme : "advanced",
plugins : "style,inlinepopups,table,advimage",
extended_valid_elements: "script|embed",
// w/h
width: '100%',
height: '360px',
// buttons
theme_advanced_buttons1 : "bold,italic,underline,hr,|,justifyleft,justifycenter,|,formatselect,fontsizeselect,|,bullist,numlist,|,image,|,outdent,indent,|,link,|,forecolor,backcolor,|,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",

theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location: "none",
theme_advanced_path: false,

valid_elements : "*[*]",

content_css: "lib/js/lib/tiny_mce_3.5.7/custom_content.css?q=1",
$(this.input_area).css({"min-height":"360px"});

oninit: function() { me.init_editor(); },
setup: function(ed) {
ed.onChange.add(function(ed, l) {
me.set(l.content);
me.run_trigger();
});
}
if(this.df.fieldtype=='Text Editor') {
this.input = new wn.editors.BootstrapWYSIWYG({
parent: this.input_area,
change: function(value) {
me.set_value_and_run_trigger(value);
},
field: this
});

this.input.set_input = function(v) {
if(me.editor) {
me.editor.setContent(v==null ? "" : v);
} else {
$(me.input).val(v);
}
}
this.get_value = function() {
return me.editor && me.editor.getContent(); // tinyMCE
}

} else {
// setup ace
wn.require('lib/js/lib/ace/ace.js');
$(this.input_area).css('border','1px solid #aaa');
this.pre = $("<pre style='position: relative; height: 400px; \
width: 100%; padding: 0px; border-radius: 0px;\
margin: 0px; background-color: #fff;'>").appendTo(this.input_area).get(0);

this.input = {};
this.myid = wn.dom.set_unique_id(this.pre);
this.editor = ace.edit(this.myid);

if(me.df.options=='Markdown' || me.df.options=='HTML') {
wn.require('lib/js/lib/ace/mode-html.js');
var HTMLMode = require("ace/mode/html").Mode;
me.editor.getSession().setMode(new HTMLMode());
}

else if(me.df.options=='Javascript') {
wn.require('lib/js/lib/ace/mode-javascript.js');
var JavascriptMode = require("ace/mode/javascript").Mode;
me.editor.getSession().setMode(new JavascriptMode());
}

else if(me.df.options=='Python') {
wn.require('lib/js/lib/ace/mode-python.js');
var PythonMode = require("ace/mode/python").Mode;
me.editor.getSession().setMode(new PythonMode());
}
this.input.set_input = function(v) {
// during field refresh in run trigger, set_input is called
// if called during on_change, setting doesn't make sense
// and causes cursor to shift back to first position
if(me.changing_value) return;
me.setting_value = true;
me.editor.getSession().setValue(v==null ? "" : v);
me.setting_value = false;
}
this.get_value = function() {
return me.editor.getSession().getValue(); // tinyMCE
}
$(cur_frm.wrapper).bind('render_complete', function() {
me.editor.resize();
me.editor.getSession().on('change', function() {
if(me.setting_value) return;
var val = me.get_value();
if(locals[cur_frm.doctype][cur_frm.docname][me.df.fieldname] != val) {
me.set(me.get_value());

me.changing_value = true;
me.run_trigger();
me.changing_value = false;
}
})
this.input = new wn.editors.ACE({
parent: this.input_area,
change: function(value) {
me.set_value_and_run_trigger(value);
},
field: this
});
this.onrefresh = function() {
me.editor && me.editor.resize();
}
}
}

_f.CodeField.prototype.init_editor = function() {
// attach onchange methods
var me = this;
this.editor = tinymce.get(this.myid);
this.editor.onKeyUp.add(function(ed, e) {
me.set(ed.getContent());
});
this.editor.onPaste.add(function(ed, e) {
me.set(ed.getContent());
});
this.editor.onSetContent.add(function(ed, e) {
me.set(ed.getContent());
});
// reset content
var c = locals[cur_frm.doctype][cur_frm.docname][this.df.fieldname];
if(cur_frm && c) {
this.editor.setContent(c);
_f.CodeField.prototype.set_value_and_run_trigger = function(value) {
if(locals[cur_frm.doctype][cur_frm.docname][this.df.fieldname] != value) {
this.set(value);
this.changing_value = true;
this.run_trigger();
this.changing_value = false;
}
}

@@ -363,7 +253,8 @@ _f.CodeField.prototype.set_disp = function(val) {
if(this.df.fieldtype=='Text Editor') {
this.disp_area.innerHTML = val;
} else {
this.disp_area.innerHTML = '<textarea class="code_text" readonly=1>'+val+'</textarea>';
this.disp_area.innerHTML = '<textarea class="code_text" readonly=1>'
+val+'</textarea>';
}
}



+ 637
- 0
public/js/lib/beautify-html.js Ver fichero

@@ -0,0 +1,637 @@
/*jshint curly:true, eqeqeq:true, laxbreak:true, noempty:false */
/*

The MIT License (MIT)

Copyright (c) 2007-2013 Einar Lielmanis and contributors.

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation files
(the "Software"), to deal in the Software without restriction,
including without limitation the rights to use, copy, modify, merge,
publish, distribute, sublicense, and/or sell copies of the Software,
and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


Style HTML
---------------

Written by Nochum Sossonko, (nsossonko@hotmail.com)

Based on code initially developed by: Einar Lielmanis, <elfz@laacz.lv>
http://jsbeautifier.org/

Usage:
style_html(html_source);

style_html(html_source, options);

The options are:
indent_size (default 4) — indentation size,
indent_char (default space) — character to indent with,
max_char (default 250) - maximum amount of characters per line (0 = disable)
brace_style (default "collapse") - "collapse" | "expand" | "end-expand"
put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line.
unformatted (defaults to inline tags) - list of tags, that shouldn't be reformatted
indent_scripts (default normal) - "keep"|"separate"|"normal"

e.g.

style_html(html_source, {
'indent_size': 2,
'indent_char': ' ',
'max_char': 78,
'brace_style': 'expand',
'unformatted': ['a', 'sub', 'sup', 'b', 'i', 'u']
});
*/

(function() {

function style_html(html_source, options, js_beautify, css_beautify) {
//Wrapper function to invoke all the necessary constructors and deal with the output.

var multi_parser,
indent_size,
indent_character,
max_char,
brace_style,
unformatted;

options = options || {};
indent_size = options.indent_size || 4;
indent_character = options.indent_char || ' ';
brace_style = options.brace_style || 'collapse';
max_char = options.max_char === 0 ? Infinity : options.max_char || 250;
unformatted = options.unformatted || ['a', 'span', 'bdo', 'em', 'strong', 'dfn', 'code', 'samp', 'kbd', 'var', 'cite', 'abbr', 'acronym', 'q', 'sub', 'sup', 'tt', 'i', 'b', 'big', 'small', 'u', 's', 'strike', 'font', 'ins', 'del', 'pre', 'address', 'dt', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

function Parser() {

this.pos = 0; //Parser position
this.token = '';
this.current_mode = 'CONTENT'; //reflects the current Parser mode: TAG/CONTENT
this.tags = { //An object to hold tags, their position, and their parent-tags, initiated with default values
parent: 'parent1',
parentcount: 1,
parent1: ''
};
this.tag_type = '';
this.token_text = this.last_token = this.last_text = this.token_type = '';

this.Utils = { //Uilities made available to the various functions
whitespace: "\n\r\t ".split(''),
single_token: 'br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed,?php,?,?='.split(','), //all the single tags for HTML
extra_liners: 'head,body,/html'.split(','), //for tags that need a line of whitespace before them
in_array: function (what, arr) {
for (var i=0; i<arr.length; i++) {
if (what === arr[i]) {
return true;
}
}
return false;
}
};

this.get_content = function () { //function to capture regular content between tags

var input_char = '',
content = [],
space = false; //if a space is needed

while (this.input.charAt(this.pos) !== '<') {
if (this.pos >= this.input.length) {
return content.length?content.join(''):['', 'TK_EOF'];
}

input_char = this.input.charAt(this.pos);
this.pos++;
this.line_char_count++;

if (this.Utils.in_array(input_char, this.Utils.whitespace)) {
if (content.length) {
space = true;
}
this.line_char_count--;
continue; //don't want to insert unnecessary space
}
else if (space) {
if (this.line_char_count >= this.max_char) { //insert a line when the max_char is reached
content.push('\n');
for (var i=0; i<this.indent_level; i++) {
content.push(this.indent_string);
}
this.line_char_count = 0;
}
else{
content.push(' ');
this.line_char_count++;
}
space = false;
}
content.push(input_char); //letter at-a-time (or string) inserted to an array
}
return content.length?content.join(''):'';
};

this.get_contents_to = function (name) { //get the full content of a script or style to pass to js_beautify
if (this.pos === this.input.length) {
return ['', 'TK_EOF'];
}
var input_char = '';
var content = '';
var reg_match = new RegExp('</' + name + '\\s*>', 'igm');
reg_match.lastIndex = this.pos;
var reg_array = reg_match.exec(this.input);
var end_script = reg_array?reg_array.index:this.input.length; //absolute end of script
if(this.pos < end_script) { //get everything in between the script tags
content = this.input.substring(this.pos, end_script);
this.pos = end_script;
}
return content;
};

this.record_tag = function (tag){ //function to record a tag and its parent in this.tags Object
if (this.tags[tag + 'count']) { //check for the existence of this tag type
this.tags[tag + 'count']++;
this.tags[tag + this.tags[tag + 'count']] = this.indent_level; //and record the present indent level
}
else { //otherwise initialize this tag type
this.tags[tag + 'count'] = 1;
this.tags[tag + this.tags[tag + 'count']] = this.indent_level; //and record the present indent level
}
this.tags[tag + this.tags[tag + 'count'] + 'parent'] = this.tags.parent; //set the parent (i.e. in the case of a div this.tags.div1parent)
this.tags.parent = tag + this.tags[tag + 'count']; //and make this the current parent (i.e. in the case of a div 'div1')
};

this.retrieve_tag = function (tag) { //function to retrieve the opening tag to the corresponding closer
if (this.tags[tag + 'count']) { //if the openener is not in the Object we ignore it
var temp_parent = this.tags.parent; //check to see if it's a closable tag.
while (temp_parent) { //till we reach '' (the initial value);
if (tag + this.tags[tag + 'count'] === temp_parent) { //if this is it use it
break;
}
temp_parent = this.tags[temp_parent + 'parent']; //otherwise keep on climbing up the DOM Tree
}
if (temp_parent) { //if we caught something
this.indent_level = this.tags[tag + this.tags[tag + 'count']]; //set the indent_level accordingly
this.tags.parent = this.tags[temp_parent + 'parent']; //and set the current parent
}
delete this.tags[tag + this.tags[tag + 'count'] + 'parent']; //delete the closed tags parent reference...
delete this.tags[tag + this.tags[tag + 'count']]; //...and the tag itself
if (this.tags[tag + 'count'] === 1) {
delete this.tags[tag + 'count'];
}
else {
this.tags[tag + 'count']--;
}
}
};

this.get_tag = function (peek) { //function to get a full tag and parse its type
var input_char = '',
content = [],
comment = '',
space = false,
tag_start, tag_end,
orig_pos = this.pos,
orig_line_char_count = this.line_char_count;

peek = peek !== undefined ? peek : false;

do {
if (this.pos >= this.input.length) {
if (peek) {
this.pos = orig_pos;
this.line_char_count = orig_line_char_count;
}
return content.length?content.join(''):['', 'TK_EOF'];
}

input_char = this.input.charAt(this.pos);
this.pos++;
this.line_char_count++;

if (this.Utils.in_array(input_char, this.Utils.whitespace)) { //don't want to insert unnecessary space
space = true;
this.line_char_count--;
continue;
}

if (input_char === "'" || input_char === '"') {
if (!content[1] || content[1] !== '!') { //if we're in a comment strings don't get treated specially
input_char += this.get_unformatted(input_char);
space = true;
}
}

if (input_char === '=') { //no space before =
space = false;
}

if (content.length && content[content.length-1] !== '=' && input_char !== '>' && space) {
//no space after = or before >
if (this.line_char_count >= this.max_char) {
this.print_newline(false, content);
this.line_char_count = 0;
}
else {
content.push(' ');
this.line_char_count++;
}
space = false;
}
if (input_char === '<') {
tag_start = this.pos - 1;
}
content.push(input_char); //inserts character at-a-time (or string)
} while (input_char !== '>');

var tag_complete = content.join('');
var tag_index;
if (tag_complete.indexOf(' ') !== -1) { //if there's whitespace, thats where the tag name ends
tag_index = tag_complete.indexOf(' ');
}
else { //otherwise go with the tag ending
tag_index = tag_complete.indexOf('>');
}
var tag_check = tag_complete.substring(1, tag_index).toLowerCase();
if (tag_complete.charAt(tag_complete.length-2) === '/' ||
this.Utils.in_array(tag_check, this.Utils.single_token)) { //if this tag name is a single tag type (either in the list or has a closing /)
if ( ! peek) {
this.tag_type = 'SINGLE';
}
}
else if (tag_check === 'script') { //for later script handling
if ( ! peek) {
this.record_tag(tag_check);
this.tag_type = 'SCRIPT';
}
}
else if (tag_check === 'style') { //for future style handling (for now it justs uses get_content)
if ( ! peek) {
this.record_tag(tag_check);
this.tag_type = 'STYLE';
}
}
else if (this.is_unformatted(tag_check, unformatted)) { // do not reformat the "unformatted" tags
comment = this.get_unformatted('</'+tag_check+'>', tag_complete); //...delegate to get_unformatted function
content.push(comment);
// Preserve collapsed whitespace either before or after this tag.
if (tag_start > 0 && this.Utils.in_array(this.input.charAt(tag_start - 1), this.Utils.whitespace)){
content.splice(0, 0, this.input.charAt(tag_start - 1));
}
tag_end = this.pos - 1;
if (this.Utils.in_array(this.input.charAt(tag_end + 1), this.Utils.whitespace)){
content.push(this.input.charAt(tag_end + 1));
}
this.tag_type = 'SINGLE';
}
else if (tag_check.charAt(0) === '!') { //peek for <!-- comment
if (tag_check.indexOf('[if') !== -1) { //peek for <!--[if conditional comment
if (tag_complete.indexOf('!IE') !== -1) { //this type needs a closing --> so...
comment = this.get_unformatted('-->', tag_complete); //...delegate to get_unformatted
content.push(comment);
}
if ( ! peek) {
this.tag_type = 'START';
}
}
else if (tag_check.indexOf('[endif') !== -1) {//peek for <!--[endif end conditional comment
this.tag_type = 'END';
this.unindent();
}
else if (tag_check.indexOf('[cdata[') !== -1) { //if it's a <[cdata[ comment...
comment = this.get_unformatted(']]>', tag_complete); //...delegate to get_unformatted function
content.push(comment);
if ( ! peek) {
this.tag_type = 'SINGLE'; //<![CDATA[ comments are treated like single tags
}
}
else {
comment = this.get_unformatted('-->', tag_complete);
content.push(comment);
this.tag_type = 'SINGLE';
}
}
else if ( ! peek) {
if (tag_check.charAt(0) === '/') { //this tag is a double tag so check for tag-ending
this.retrieve_tag(tag_check.substring(1)); //remove it and all ancestors
this.tag_type = 'END';
}
else { //otherwise it's a start-tag
this.record_tag(tag_check); //push it on the tag stack
this.tag_type = 'START';
}
if (this.Utils.in_array(tag_check, this.Utils.extra_liners)) { //check if this double needs an extra line
this.print_newline(true, this.output);
}
}

if (peek) {
this.pos = orig_pos;
this.line_char_count = orig_line_char_count;
}

return content.join(''); //returns fully formatted tag
};

this.get_unformatted = function (delimiter, orig_tag) { //function to return unformatted content in its entirety

if (orig_tag && orig_tag.toLowerCase().indexOf(delimiter) !== -1) {
return '';
}
var input_char = '';
var content = '';
var space = true;
do {

if (this.pos >= this.input.length) {
return content;
}

input_char = this.input.charAt(this.pos);
this.pos++;

if (this.Utils.in_array(input_char, this.Utils.whitespace)) {
if (!space) {
this.line_char_count--;
continue;
}
if (input_char === '\n' || input_char === '\r') {
content += '\n';
/* Don't change tab indention for unformatted blocks. If using code for html editing, this will greatly affect <pre> tags if they are specified in the 'unformatted array'
for (var i=0; i<this.indent_level; i++) {
content += this.indent_string;
}
space = false; //...and make sure other indentation is erased
*/
this.line_char_count = 0;
continue;
}
}
content += input_char;
this.line_char_count++;
space = true;


} while (content.toLowerCase().indexOf(delimiter) === -1);
return content;
};

this.get_token = function () { //initial handler for token-retrieval
var token;

if (this.last_token === 'TK_TAG_SCRIPT' || this.last_token === 'TK_TAG_STYLE') { //check if we need to format javascript
var type = this.last_token.substr(7);
token = this.get_contents_to(type);
if (typeof token !== 'string') {
return token;
}
return [token, 'TK_' + type];
}
if (this.current_mode === 'CONTENT') {
token = this.get_content();
if (typeof token !== 'string') {
return token;
}
else {
return [token, 'TK_CONTENT'];
}
}

if (this.current_mode === 'TAG') {
token = this.get_tag();
if (typeof token !== 'string') {
return token;
}
else {
var tag_name_type = 'TK_TAG_' + this.tag_type;
return [token, tag_name_type];
}
}
};

this.get_full_indent = function (level) {
level = this.indent_level + level || 0;
if (level < 1) {
return '';
}

return Array(level + 1).join(this.indent_string);
};

this.is_unformatted = function(tag_check, unformatted) {
//is this an HTML5 block-level link?
if (!this.Utils.in_array(tag_check, unformatted)){
return false;
}

if (tag_check.toLowerCase() !== 'a' || !this.Utils.in_array('a', unformatted)){
return true;
}

//at this point we have an tag; is its first child something we want to remain
//unformatted?
var next_tag = this.get_tag(true /* peek. */);

// tets next_tag to see if it is just html tag (no external content)
var tag = (next_tag || "").match(/^\s*<\s*\/?([a-z]*)\s*[^>]*>\s*$/);

// if next_tag comes back but is not an isolated tag, then
// let's treat the 'a' tag as having content
// and respect the unformatted option
if (!tag || this.Utils.in_array(tag, unformatted)){
return true;
} else {
return false;
}
};

this.printer = function (js_source, indent_character, indent_size, max_char, brace_style) { //handles input/output and some other printing functions

this.input = js_source || ''; //gets the input for the Parser
this.output = [];
this.indent_character = indent_character;
this.indent_string = '';
this.indent_size = indent_size;
this.brace_style = brace_style;
this.indent_level = 0;
this.max_char = max_char;
this.line_char_count = 0; //count to see if max_char was exceeded

for (var i=0; i<this.indent_size; i++) {
this.indent_string += this.indent_character;
}

this.print_newline = function (ignore, arr) {
this.line_char_count = 0;
if (!arr || !arr.length) {
return;
}
if (!ignore) { //we might want the extra line
while (this.Utils.in_array(arr[arr.length-1], this.Utils.whitespace)) {
arr.pop();
}
}
arr.push('\n');
for (var i=0; i<this.indent_level; i++) {
arr.push(this.indent_string);
}
};

this.print_token = function (text) {
this.output.push(text);
};

this.indent = function () {
this.indent_level++;
};

this.unindent = function () {
if (this.indent_level > 0) {
this.indent_level--;
}
};
};
return this;
}

/*_____________________--------------------_____________________*/

multi_parser = new Parser(); //wrapping functions Parser
multi_parser.printer(html_source, indent_character, indent_size, max_char, brace_style); //initialize starting values

while (true) {
var t = multi_parser.get_token();
multi_parser.token_text = t[0];
multi_parser.token_type = t[1];

if (multi_parser.token_type === 'TK_EOF') {
break;
}

switch (multi_parser.token_type) {
case 'TK_TAG_START':
multi_parser.print_newline(false, multi_parser.output);
multi_parser.print_token(multi_parser.token_text);
multi_parser.indent();
multi_parser.current_mode = 'CONTENT';
break;
case 'TK_TAG_STYLE':
case 'TK_TAG_SCRIPT':
multi_parser.print_newline(false, multi_parser.output);
multi_parser.print_token(multi_parser.token_text);
multi_parser.current_mode = 'CONTENT';
break;
case 'TK_TAG_END':
//Print new line only if the tag has no content and has child
if (multi_parser.last_token === 'TK_CONTENT' && multi_parser.last_text === '') {
var tag_name = multi_parser.token_text.match(/\w+/)[0];
var tag_extracted_from_last_output = multi_parser.output[multi_parser.output.length -1].match(/<\s*(\w+)/);
if (tag_extracted_from_last_output === null || tag_extracted_from_last_output[1] !== tag_name) {
multi_parser.print_newline(true, multi_parser.output);
}
}
multi_parser.print_token(multi_parser.token_text);
multi_parser.current_mode = 'CONTENT';
break;
case 'TK_TAG_SINGLE':
// Don't add a newline before elements that should remain unformatted.
var tag_check = multi_parser.token_text.match(/^\s*<([a-z]+)/i);
if (!tag_check || !multi_parser.Utils.in_array(tag_check[1], unformatted)){
multi_parser.print_newline(false, multi_parser.output);
}
multi_parser.print_token(multi_parser.token_text);
multi_parser.current_mode = 'CONTENT';
break;
case 'TK_CONTENT':
if (multi_parser.token_text !== '') {
multi_parser.print_token(multi_parser.token_text);
}
multi_parser.current_mode = 'TAG';
break;
case 'TK_STYLE':
case 'TK_SCRIPT':
if (multi_parser.token_text !== '') {
multi_parser.output.push('\n');
var text = multi_parser.token_text,
_beautifier,
script_indent_level = 1;
if (multi_parser.token_type === 'TK_SCRIPT') {
_beautifier = typeof js_beautify === 'function' && js_beautify;
} else if (multi_parser.token_type === 'TK_STYLE') {
_beautifier = typeof css_beautify === 'function' && css_beautify;
}

if (options.indent_scripts === "keep") {
script_indent_level = 0;
} else if (options.indent_scripts === "separate") {
script_indent_level = -multi_parser.indent_level;
}

var indentation = multi_parser.get_full_indent(script_indent_level);
if (_beautifier) {
// call the Beautifier if avaliable
text = _beautifier(text.replace(/^\s*/, indentation), options);
} else {
// simply indent the string otherwise
var white = text.match(/^\s*/)[0];
var _level = white.match(/[^\n\r]*$/)[0].split(multi_parser.indent_string).length - 1;
var reindent = multi_parser.get_full_indent(script_indent_level -_level);
text = text.replace(/^\s*/, indentation)
.replace(/\r\n|\r|\n/g, '\n' + reindent)
.replace(/\s*$/, '');
}
if (text) {
multi_parser.print_token(text);
multi_parser.print_newline(true, multi_parser.output);
}
}
multi_parser.current_mode = 'TAG';
break;
}
multi_parser.last_token = multi_parser.token_type;
multi_parser.last_text = multi_parser.token_text;
}
return multi_parser.output.join('');
}

if (typeof define === "function") {
// Add support for require.js
define(function(require, exports, module) {
var js_beautify = require('./beautify.js').js_beautify;
var css_beautify = require('./beautify-css.js').css_beautify;

exports.html_beautify = function(html_source, options) {
return style_html(html_source, options, js_beautify, css_beautify);
};
});
} else if (typeof exports !== "undefined") {
// Add support for CommonJS. Just put this file somewhere on your require.paths
// and you will be able to `var html_beautify = require("beautify").html_beautify`.
var js_beautify = require('./beautify.js').js_beautify;
var css_beautify = require('./beautify-css.js').css_beautify;

exports.html_beautify = function(html_source, options) {
return style_html(html_source, options, js_beautify, css_beautify);
};
} else if (typeof window !== "undefined") {
// If we're running a web page and don't have either of the above, add our one global
window.html_beautify = function(html_source, options) {
return style_html(html_source, options, window.js_beautify, window.css_beautify);
};;
}
}());

+ 181
- 0
public/js/lib/bootstrap-wysiwyg.js Ver fichero

@@ -0,0 +1,181 @@
/* http://github.com/mindmup/bootstrap-wysiwyg */
/*global jQuery, $, FileReader*/
/*jslint browser:true*/
jQuery(function ($) {
'use strict';
var readFileIntoDataUrl = function (fileInfo) {
var loader = $.Deferred(),
fReader = new FileReader();
fReader.onload = function (e) {
loader.resolve(e.target.result);
};
fReader.onerror = loader.reject;
fReader.onprogress = loader.notify;
fReader.readAsDataURL(fileInfo);
return loader.promise();
};
$.fn.cleanHtml = function () {
var html = $(this).html();
return html && html.replace(/(<br>|\s|<div><br><\/div>|&nbsp;)*$/, '');
};
$.fn.wysiwyg = function (userOptions) {
var editor = this,
selectedRange,
defaultOptions = {
hotKeys: {
'ctrl+b meta+b': 'bold',
'ctrl+i meta+i': 'italic',
'ctrl+u meta+u': 'underline',
'ctrl+z meta+z': 'undo',
'ctrl+y meta+y meta+shift+z': 'redo',
'ctrl+l meta+l': 'justifyleft',
'ctrl+e meta+e': 'justifycenter',
'ctrl+j meta+j': 'justifyfull',
'shift+tab': 'outdent',
'tab': 'indent'
},
toolbarSelector: '[data-role=editor-toolbar]',
commandRole: 'edit',
activeToolbarClass: 'btn-info',
selectionMarker: 'edit-focus-marker',
selectionColor: 'darkgrey'
},
options,
updateToolbar = function () {
if (options.activeToolbarClass) {
$(options.toolbarSelector).find('.btn[data-' + options.commandRole + ']').each(function () {
var command = $(this).data(options.commandRole);
if (document.queryCommandState(command)) {
$(this).addClass(options.activeToolbarClass);
} else {
$(this).removeClass(options.activeToolbarClass);
}
});
}
},
execCommand = function (commandWithArgs, valueArg) {
var commandArr = commandWithArgs.split(' '),
command = commandArr.shift(),
args = commandArr.join(' ') + (valueArg || '');
document.execCommand(command, 0, args);
updateToolbar();
},
bindHotkeys = function (hotKeys) {
$.each(hotKeys, function (hotkey, command) {
editor.keydown(hotkey, function (e) {
if (editor.attr('contenteditable') && editor.is(':visible')) {
e.preventDefault();
e.stopPropagation();
execCommand(command);
}
}).keyup(hotkey, function (e) {
if (editor.attr('contenteditable') && editor.is(':visible')) {
e.preventDefault();
e.stopPropagation();
}
});
});
},
getCurrentRange = function () {
var sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
},
saveSelection = function () {
selectedRange = getCurrentRange();
},
restoreSelection = function () {
var selection = window.getSelection();
if (selectedRange) {
selection.removeAllRanges();
selection.addRange(selectedRange);
}
},
insertFiles = function (files) {
editor.focus();
$.each(files, function (idx, fileInfo) {
if (/^image\//.test(fileInfo.type)) {
$.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
execCommand('insertimage', dataUrl);
});
}
});
},
markSelection = function (input, color) {
restoreSelection();
document.execCommand('hiliteColor', 0, color || 'transparent');
saveSelection();
input.data(options.selectionMarker, color);
},
bindToolbar = function (toolbar, options) {
toolbar.find('a[data-' + options.commandRole + ']').click(function () {
restoreSelection();
editor.focus();
execCommand($(this).data(options.commandRole));
saveSelection();
});
toolbar.find('[data-toggle=dropdown]').click(restoreSelection);

toolbar.find('input[type=text][data-' + options.commandRole + ']').on('webkitspeechchange change', function () {
var newValue = this.value; /* ugly but prevents fake double-calls due to selection restoration */
this.value = '';
restoreSelection();
if (newValue) {
editor.focus();
execCommand($(this).data(options.commandRole), newValue);
}
saveSelection();
}).on('focus', function () {
var input = $(this);
if (!input.data(options.selectionMarker)) {
markSelection(input, options.selectionColor);
input.focus();
}
}).on('blur', function () {
var input = $(this);
if (input.data(options.selectionMarker)) {
markSelection(input, false);
}
});
toolbar.find('input[type=file][data-' + options.commandRole + ']').change(function () {
restoreSelection();
if (this.type === 'file' && this.files && this.files.length > 0) {
insertFiles(this.files);
}
saveSelection();
this.value = '';
});
},
initFileDrops = function () {
editor.on('dragenter dragover', false)
.on('drop', function (e) {
var dataTransfer = e.originalEvent.dataTransfer;
e.stopPropagation();
e.preventDefault();
if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
insertFiles(dataTransfer.files);
}
});
};
options = $.extend({}, defaultOptions, userOptions);
bindHotkeys(options.hotKeys);
initFileDrops();
bindToolbar($(options.toolbarSelector), options);
editor.attr('contenteditable', true)
.on('mouseup keyup mouseout', function () {
saveSelection();
updateToolbar();
});
$(window).bind('touchend', function (e) {
var isInside = (editor.is(e.target) || editor.has(e.target).length > 0),
currentRange = getCurrentRange(),
clear = currentRange && (currentRange.startContainer === currentRange.endContainer && currentRange.startOffset === currentRange.endOffset);
if (!clear || isInside) {
saveSelection();
updateToolbar();
}
});
return this;
};
});

+ 100
- 0
public/js/lib/jquery/jquery.hotkeys.js Ver fichero

@@ -0,0 +1,100 @@
/*
* jQuery Hotkeys Plugin
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Based upon the plugin by Tzury Bar Yochay:
* http://github.com/tzuryby/hotkeys
*
* Original idea by:
* Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
*/

(function(jQuery){
jQuery.hotkeys = {
version: "0.8",

specialKeys: {
8: "backspace", 9: "tab", 13: "return", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause",
20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del",
96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7",
104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/",
112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8",
120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 191: "/", 224: "meta"
},
shiftNums: {
"`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&",
"8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<",
".": ">", "/": "?", "\\": "|"
}
};

function keyHandler( handleObj ) {
// Only care when a possible input has been specified
if ( typeof handleObj.data !== "string" ) {
return;
}
var origHandler = handleObj.handler,
keys = handleObj.data.toLowerCase().split(" "),
textAcceptingInputTypes = ["text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime", "datetime-local", "search", "color"];
handleObj.handler = function( event ) {
// Don't fire in text-accepting inputs that we didn't directly bind to
if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) ||
jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1 ) ) {
return;
}
// Keypress represents characters, not special keys
var special = event.type !== "keypress" && jQuery.hotkeys.specialKeys[ event.which ],
character = String.fromCharCode( event.which ).toLowerCase(),
key, modif = "", possible = {};

// check combinations (alt|ctrl|shift+anything)
if ( event.altKey && special !== "alt" ) {
modif += "alt+";
}

if ( event.ctrlKey && special !== "ctrl" ) {
modif += "ctrl+";
}
// TODO: Need to make sure this works consistently across platforms
if ( event.metaKey && !event.ctrlKey && special !== "meta" ) {
modif += "meta+";
}

if ( event.shiftKey && special !== "shift" ) {
modif += "shift+";
}

if ( special ) {
possible[ modif + special ] = true;

} else {
possible[ modif + character ] = true;
possible[ modif + jQuery.hotkeys.shiftNums[ character ] ] = true;

// "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
if ( modif === "shift+" ) {
possible[ jQuery.hotkeys.shiftNums[ character ] ] = true;
}
}

for ( var i = 0, l = keys.length; i < l; i++ ) {
if ( possible[ keys[i] ] ) {
return origHandler.apply( this, arguments );
}
}
};
}

jQuery.each([ "keydown", "keyup", "keypress" ], function() {
jQuery.event.special[ this ] = { add: keyHandler };
});

})( jQuery );

+ 304
- 0
public/js/wn/form/editors.js Ver fichero

@@ -0,0 +1,304 @@

// Options
// parent
// change (event)

// Properties
// set_input
// input

wn.provide("wn.editors");

wn.editors.BootstrapWYSIWYG = Class.extend({
init: function(opts) {
wn.require("lib/js/lib/jquery/jquery.hotkeys.js");
wn.require("lib/js/lib/bootstrap-wysiwyg.js");
wn.require("lib/js/lib/beautify-html.js");
this.opts = opts;
this.make_body();
this.make_bindings();
},
make_body: function() {
this.myid = "editor-" + wn.dom.set_unique_id();
$('<div class="for-rich-text">\
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#'+ this.myid +'">\
<div class="btn-group">\
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>\
<ul class="dropdown-menu">\
</ul>\
</div>\
<div class="btn-group">\
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i> <b class="caret"></b></a>\
<ul class="dropdown-menu">\
<li><a data-edit="formatBlock &lt;p&gt;"><p>Paragraph</p></a></li>\
<li><a data-edit="formatBlock &lt;h1&gt;"><h1>Heading 1</h1></a></li>\
<li><a data-edit="formatBlock &lt;h2&gt;"><h2>Heading 2</h2></a></li>\
<li><a data-edit="formatBlock &lt;h3&gt;"><h3>Heading 3</h3></a></li>\
<li><a data-edit="formatBlock &lt;h4&gt;"><h4>Heading 4</h4></a></li>\
<li><a data-edit="formatBlock &lt;h5&gt;"><h5>Heading 5</h5></a></li>\
</ul>\
</div>\
<div class="btn-group">\
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>\
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>\
<a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>\
</div>\
<div class="btn-group">\
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>\
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>\
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>\
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>\
</div>\
<div class="btn-group">\
<a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>\
<a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>\
<a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>\
</div>\
<div class="btn-group">\
<a class="btn" data-edit="insertHorizontalRule" title="Horizontal Line Break">-</a>\
</div>\
<div class="btn-group">\
<a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>\
<a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>\
</div>\
</div>\
<div id="'+this.myid+'" class="wysiwyg-editor">\
</div>\
</div>\
<div class="for-html" style="display:none">\
<textarea class="html-editor" style="width:95%; height: 440px;\
font-family: Monaco, Menlo, Consolas, Courier, monospace;\
font-size: 11px;"></textarea>\
</div>\
<div class="btn-toolbar pull-right">\
<div class="btn-group">\
<a class="btn btn-info btn-rich-text" title="Rich Text" disabled="disabled"><i class="icon-reorder"></i></a>\
<a class="btn btn-html" title="HTML"><i class="icon-wrench"></i></a>\
</div>\
</div>\
').appendTo(this.opts.parent);
this.$parent = $(this.opts.parent);
this.$editor = $("#" + this.myid)
this.$textarea = this.$parent.find(".html-editor");
this.input = this.$editor.get(0);
},
make_bindings: function() {
var me = this;
var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
'Lucida Sans', 'Tahoma', 'Times', 'Times New Roman', 'Verdana'],
fontTarget = this.$parent.find('[title=Font]').siblings('.dropdown-menu');
$.each(fonts, function (idx, fontName) {
fontTarget.append($('<li><a data-edit="fontName ' +
fontName +'" style="font-family:\''+ fontName +'\'">'+
fontName + '</a></li>'));
});
//this.$parent.find('a[title]').tooltip({container:'body'});
this.$parent.find('.dropdown-menu input').click(function() {return false;})
.change(function () {
$(this).parent('.dropdown-menu').siblings('.dropdown-toggle')
.dropdown('toggle');
})
.keydown('esc', function () {
this.value='';$(this).change();
});

this.$parent.find('[data-role=magic-overlay]').each(function () {
var overlay = $(this), target = $(overlay.data('target'));
overlay.css('opacity', 0).css('position', 'absolute')
.offset(target.offset())
.width(target.outerWidth()).height(target.outerHeight());
});
this.$editor
.wysiwyg()
.on("mouseup keyup mouseout", function() {
var value = $(this).html();
if(value==null) value="";
me.opts.change(value);
})
this.$textarea
.on("change", function() {
var value = $(this).val();
if(value==null) value="";
me.opts.change(value);
});
this.current_editor = this.$editor;
this.$parent.find(".btn-html").click(function() {
if($(this).attr("disabled")=="disabled") return;
me.$textarea.val(html_beautify(me.$editor.html()));
me.$parent.find(".for-rich-text").toggle(false);
me.$parent.find(".for-html").toggle(true);
me.$parent.find(".btn-html").addClass("btn-info").attr("disabled", "disabled");
me.$parent.find(".btn-rich-text").removeClass("btn-info").attr("disabled", false);
me.current_editor = me.$textarea;
});

this.$parent.find(".btn-rich-text").click(function() {
if($(this).attr("disabled")=="disabled") return;
me.$editor.html(me.$textarea.val());
me.$parent.find(".for-rich-text").toggle(true);
me.$parent.find(".for-html").toggle(false);
me.$parent.find(".btn-html").removeClass("btn-info").attr("disabled", false);
me.$parent.find(".btn-rich-text").addClass("btn-info").attr("disabled", "disabled");
me.current_editor = me.$editor;
});

},
set_input: function(value) {
if(this.value!=value) {
this.value = value==null ? "" : value;
this.$editor.html(this.value);
this.$textarea.val(this.value);
}
},
get_value: function() {
if(this.current_editor==this.$editor)
return this.$editor.html();
else
return this.$textarea.val();
}
})

//// TinyMCE

wn.editors.TinyMCE = Class.extend({
init: function(opts) {
this.opts = opts;
this.make();
},
make: function() {
var me = this;
this.input = $("<textarea>").appendTo(this.opts.parent).get(0);
this.myid = wn.dom.set_unique_id(this.input);

// setup tiny mce
$(me.input).tinymce({
// Location of TinyMCE script
script_url : 'lib/js/lib/tiny_mce_3.5.7/tiny_mce.js',

// General options
theme : "advanced",
plugins : "style,inlinepopups,table,advimage",
extended_valid_elements: "script|embed",
// w/h
width: '100%',
height: '360px',
// buttons
theme_advanced_buttons1 : "bold,italic,underline,hr,|,justifyleft,justifycenter,|,formatselect,fontsizeselect,|,bullist,numlist,|,image,|,outdent,indent,|,link,|,forecolor,backcolor,|,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",

theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location: "none",
theme_advanced_path: false,

valid_elements : "*[*]",

content_css: "lib/js/lib/tiny_mce_3.5.7/custom_content.css?q=1",

oninit: function() {
me.init_editor();
},
setup: function(ed) {
ed.onChange.add(function(ed, l) {
me.opts.change(l.content);
});
}
});
},
set_input: function(value) {
if(this.editor)
this.editor.setContent(value==null ? "" : value);
else
$(this.input).val(value==null ? "" : value);
},
get_value: function() {
return this.editor && this.editor.getContent(); // tinyMCE
},
init_editor: function() {
// attach onchange methods
var me = this;
this.editor = tinymce.get(this.myid);
this.editor.onKeyUp.add(function(ed, e) {
me.set_value_and_run_trigger(ed.getContent());
});
this.editor.onPaste.add(function(ed, e) {
me.set_value_and_run_trigger(ed.getContent());
});
this.editor.onSetContent.add(function(ed, e) {
me.set_value_and_run_trigger(ed.getContent());
});
}
});

wn.editors.ACE = Class.extend({
init: function(opts) {
this.opts = opts;

// setup ace
wn.require('lib/js/lib/ace/ace.js');
this.make();
this.bind_form_load();
},
make: function() {
$(this.opts.parent).css('border','1px solid #aaa');
this.pre = $("<pre style='position: relative; height: 400px; \
width: 100%; padding: 0px; border-radius: 0px;\
margin: 0px; background-color: #fff;'>").appendTo(this.opts.parent).get(0);

this.input = {};
this.myid = wn.dom.set_unique_id(this.pre);
this.editor = ace.edit(this.myid);

if(this.opts.field.df.options=='Markdown' || this.opts.field.df.options=='HTML') {
wn.require('lib/js/lib/ace/mode-html.js');
var HTMLMode = require("ace/mode/html").Mode;
this.editor.getSession().setMode(new HTMLMode());
}

else if(this.opts.field.df.options=='Javascript') {
wn.require('lib/js/lib/ace/mode-javascript.js');
var JavascriptMode = require("ace/mode/javascript").Mode;
this.editor.getSession().setMode(new JavascriptMode());
}

else if(this.opts.field.df.options=='Python') {
wn.require('lib/js/lib/ace/mode-python.js');
var PythonMode = require("ace/mode/python").Mode;
this.editor.getSession().setMode(new PythonMode());
}
},
set_input: function(value) {
// during field refresh in run trigger, set_input is called
// if called during on_change, setting doesn't make sense
// and causes cursor to shift back to first position
if(this.opts.field.changing_value) return;
this.setting_value = true;
this.editor.getSession().setValue(value==null ? "" : value);
this.setting_value = false;
},
get_value: function() {
return this.editor.getSession().getValue();
},
bind_form_load: function() {
var me = this;
if(cur_frm) {
$(cur_frm.wrapper).bind('render_complete', function() {
me.editor.resize();
me.editor.getSession().on('change', function() {
if(me.setting_value) return;
me.opts.change(me.get_value())
})
});
}
}
})

Escribir Vista previa
Cargando…
Cancelar
Guardar