fixed codearea to work better and more compatible
This commit is contained in:
Doug Bell
parent
13c588ff7f
commit
81a256bd71
5 changed files with 344 additions and 26 deletions
|
|
@ -62,6 +62,7 @@
|
|||
- fixed #10625: Map point no save button
|
||||
- fixed #10639: Map: Can't edit or delete points
|
||||
- fixed #10640: Map: points not working correctly
|
||||
- fixed Codearea editor to work a lot better and be more compatible
|
||||
|
||||
7.7.17
|
||||
- fixed #10697: Story: Image crowds text
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ package WebGUI::Form::Codearea;
|
|||
|
||||
use strict;
|
||||
use base 'WebGUI::Form::Textarea';
|
||||
use HTML::Entities qw(encode_entities decode_entities);
|
||||
use WebGUI::International;
|
||||
|
||||
=head1 NAME
|
||||
|
|
@ -114,6 +115,21 @@ sub getName {
|
|||
|
||||
#-------------------------------------------------------------------
|
||||
|
||||
=head2 getValue ( [value] )
|
||||
|
||||
Return the value, HTML decoded
|
||||
|
||||
=cut
|
||||
|
||||
sub getValue {
|
||||
my ( $self, @args ) = @_;
|
||||
my $value = $self->SUPER::getValue( @args );
|
||||
$self->session->log->warn( $value );
|
||||
return decode_entities( $value );
|
||||
}
|
||||
|
||||
#-------------------------------------------------------------------
|
||||
|
||||
=head2 isDynamicCompatible ( )
|
||||
|
||||
A class method that returns a boolean indicating whether this control is compatible with the DynamicField control.
|
||||
|
|
@ -136,7 +152,7 @@ sub toHtml {
|
|||
my $self = shift;
|
||||
my ($style, $url, $stow) = $self->session->quick(qw(style url stow));
|
||||
|
||||
my $value = $self->fixMacros($self->fixTags($self->fixSpecialCharacters(scalar $self->getOriginalValue)));
|
||||
my $value = encode_entities( $self->fixMacros($self->fixTags($self->fixSpecialCharacters(scalar $self->getOriginalValue))) );
|
||||
my $width = $self->get('width') || 400;
|
||||
my $height = $self->get('height') || 150;
|
||||
my $id = $self->get('id');
|
||||
|
|
@ -146,33 +162,31 @@ sub toHtml {
|
|||
my $styleAttr = $self->get('style');
|
||||
|
||||
$style->setLink($url->extras("yui/build/resize/assets/skins/sam/resize.css"), {type=>"text/css", rel=>"stylesheet"});
|
||||
$style->setScript($url->extras("yui/build/utilities/utilities.js"), {type=>"text/javascript"});
|
||||
$style->setScript($url->extras("yui/build/resize/resize-min.js"), {type=>"text/javascript"});
|
||||
$style->setScript($url->extras('editarea/edit_area/edit_area_full.js'), {type=>"text/javascript"});
|
||||
$style->setLink($url->extras("yui/build/assets/skins/sam/skin.css"), {type=>"text/css", rel=>"stylesheet"});
|
||||
$style->setLink($url->extras('yui/build/logger/assets/skins/sam/logger.css'), {type=>"text/css", rel=>"stylesheet"});
|
||||
$style->setScript($url->extras("yui/build/yahoo-dom-event/yahoo-dom-event.js"),{type=>"text/javascript"});
|
||||
$style->setScript($url->extras("yui/build/utilities/utilities.js"),{type=>"text/javascript"});
|
||||
$style->setScript($url->extras("yui/build/container/container_core-min.js"),{type=>"text/javascript"});
|
||||
$style->setScript($url->extras("yui/build/menu/menu-min.js"),{type=>"text/javascript"});
|
||||
$style->setScript($url->extras("yui/build/button/button-min.js"),{type=>"text/javascript"});
|
||||
$style->setScript($url->extras("yui/build/element/element-min.js"),{type=>"text/javascript"});
|
||||
$style->setScript($url->extras("yui/build/dragdrop/dragdrop-min.js"),{type=>"text/javascript"});
|
||||
$style->setScript($url->extras("yui/build/resize/resize-min.js"),{type=>"text/javascript"});
|
||||
$style->setScript($url->extras("yui/build/editor/editor-debug.js"),{type=>"text/javascript"});
|
||||
$style->setScript($url->extras("yui/build/logger/logger.js"),{type=>"text/javascript"});
|
||||
$style->setScript($url->extras("yui-webgui/build/code-editor/code-editor.js"),{type=>"text/javascript"});
|
||||
my $codeCss = $url->extras("yui-webgui/build/code-editor/code.css");
|
||||
my $out = <<"END_HTML";
|
||||
<div id="${id}_resizewrapper" style="padding-right: 6px; padding-bottom: 6px; margin-bottom: 1em; width: ${width}px; height: ${height}px">
|
||||
<textarea id="$id" name="$name" $extras rows="10" cols="60" style="font-family: monospace; $styleAttr; height: 100%; width: 100%; resize: none;">$value</textarea>
|
||||
</div>
|
||||
<textarea id="$id" name="$name" $extras rows="10" cols="60" style="font-family: monospace; $styleAttr; height: 100%; width: 100%; resize: none;">$value</textarea>
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var resize = new YAHOO.util.Resize('${id}_resizewrapper', {useShim : true});
|
||||
editAreaLoader.init({
|
||||
id : '$id',
|
||||
syntax : '$syntax',
|
||||
start_highlight : true,
|
||||
show_line_colors : true,
|
||||
allow_resize : 'no',
|
||||
display : 'later',
|
||||
toolbar : 'search,go_to_line,|,undo,redo,|,syntax_selection,highlight,reset_highlight,|,help'
|
||||
});
|
||||
resize.on('resize', function(e) {
|
||||
YAHOO.util.Dom.setStyle('${id}', 'width', resize.getStyle('width'));
|
||||
YAHOO.util.Dom.setStyle('${id}', 'height', resize.getStyle('height'));
|
||||
YAHOO.util.Dom.setStyle('frame_${id}', 'width', resize.getStyle('width'));
|
||||
YAHOO.util.Dom.setStyle('frame_${id}', 'height', resize.getStyle('height'));
|
||||
});
|
||||
resize.reset();
|
||||
})();
|
||||
(function(){
|
||||
YAHOO.util.Event.onDOMReady( function () {
|
||||
YAHOO.util.Dom.addClass( document.body, "yui-skin-sam" );
|
||||
var mylogger = new YAHOO.widget.LogReader();
|
||||
var myeditor = new YAHOO.widget.CodeEditor('${id}', { handleSubmit: true, css_url: '${codeCss}', height: '${height}px', width: '${width}px', status: true, resize: true });
|
||||
myeditor.render();
|
||||
} );
|
||||
}());
|
||||
</script>
|
||||
END_HTML
|
||||
return $out;
|
||||
|
|
|
|||
294
www/extras/yui-webgui/build/code-editor/code-editor.js
vendored
Executable file
294
www/extras/yui-webgui/build/code-editor/code-editor.js
vendored
Executable file
|
|
@ -0,0 +1,294 @@
|
|||
(function() {
|
||||
var Dom = YAHOO.util.Dom,
|
||||
Event = YAHOO.util.Event,
|
||||
Lang = YAHOO.lang
|
||||
;
|
||||
|
||||
YAHOO.widget.CodeEditor = function (id, cfg) {
|
||||
// Disable Editor configs that don't apply
|
||||
cfg["animate"] = false;
|
||||
cfg["dompath"] = false;
|
||||
|
||||
// Default toolbar is different
|
||||
cfg["toolbar"] = cfg["toolbar"] || {
|
||||
titlebar : "Code Editor",
|
||||
buttons : []
|
||||
};
|
||||
|
||||
YAHOO.widget.CodeEditor.superclass.constructor.call(this, id, cfg);
|
||||
|
||||
// Allow us to have no buttons
|
||||
// This will be fixed in a future version of YUI Editor
|
||||
YAHOO.widget.Toolbar.prototype.disableAllButtons
|
||||
= function () {
|
||||
if (!this._buttonList) {
|
||||
this._buttonList = [];
|
||||
}
|
||||
if (this.get('disabled')) {
|
||||
return false;
|
||||
}
|
||||
var len = this._buttonList.length;
|
||||
for (var i = 0; i < len; i++) {
|
||||
this.disableButton(this._buttonList[i]);
|
||||
}
|
||||
};
|
||||
// End allow us to have no buttons
|
||||
|
||||
this.on('editorContentLoaded', function() {
|
||||
// Add the code stylesheet
|
||||
var link = this._getDoc().createElement('link');
|
||||
link.rel = "stylesheet";
|
||||
link.type = "text/css";
|
||||
link.href = this.get('css_url');
|
||||
this._getDoc().getElementsByTagName('head')[0].appendChild(link);
|
||||
// Highlight the initial value
|
||||
if ( !this.browser.ie ) { // IE puts "!!CURSOR HERE!!" in the main doc, not the iframe...
|
||||
this.highlight(false);
|
||||
}
|
||||
// Setup resize
|
||||
if ( this.status ) {
|
||||
this._writeStatus();
|
||||
this._setupResize();
|
||||
}
|
||||
}, this, true);
|
||||
this.on('editorKeyUp', function(ev) {
|
||||
|
||||
// Don't highlight arrows or modifiers
|
||||
if ( ( ev.ev.keyCode > 36 && ev.ev.keyCode < 41 )
|
||||
|| ev.ev.keyCode == 16 || ev.ev.keyCode == 17
|
||||
|| ev.ev.keyCode == 18 || ev.ev.keyCode == 91 // Safari "command"
|
||||
|| ev.ev.keyCode == 224 // Firefox "command"
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: Don't re-highlight if there is a selection
|
||||
// That is the problem we're trying to avoid with disabling
|
||||
// highlighting for arrows and modifiers
|
||||
|
||||
// Highlight every keypress
|
||||
Lang.later(10, this, this.highlight);
|
||||
Lang.later(100, this, this._writeStatus);
|
||||
}, this, true);
|
||||
|
||||
//Borrowed this from CodePress: http://codepress.sourceforge.net
|
||||
this.cc = '\u2009'; // carret char
|
||||
this.keywords = [
|
||||
{ code: /(<DOCTYPE.*?-->.)/g, tag: '<ins>$1</ins>' }, // comments
|
||||
{ code: /(<[^!]*?>)/g, tag: '<b>$1</b>' }, // all tags
|
||||
{ code: /(<!--.*?-->.)/g, tag: '<ins>$1</ins>' }, // comments
|
||||
{ code: /\b(YAHOO|widget|util|Dom|Event|lang)\b/g, tag: '<cite>$1</cite>' }, // reserved words
|
||||
{ code: /\b(break|continue|do|for|new|this|void|case|default|else|function|return|typeof|while|if|label|switch|var|with|catch|boolean|int|try|false|throws|null|true|goto)\b/g, tag: '<b>$1</b>' }, // reserved words
|
||||
{ code: /\"(.*?)(\"|<br>|<\/P>)/gi, tag: '<s>"$1$2</s>' }, // strings double quote
|
||||
{ code: /\'(.*?)(\'|<br>|<\/P>)/gi, tag: '<s>\'$1$2</s>' }, // strings single quote
|
||||
{ code: /\b(alert|isNaN|parent|Array|parseFloat|parseInt|blur|clearTimeout|prompt|prototype|close|confirm|length|Date|location|Math|document|element|name|self|elements|setTimeout|navigator|status|String|escape|Number|submit|eval|Object|event|onblur|focus|onerror|onfocus|onclick|top|onload|toString|onunload|unescape|open|valueOf|window|onmouseover|innerHTML)\b/g, tag: '<u>$1</u>' }, // special words
|
||||
{ code: /([^:]|^)\/\/(.*?)(<br|<\/P)/gi, tag: '$1<i>//$2</i>$3' }, // comments //
|
||||
{ code: /\/\*(.*?)\*\//g, tag: '<i>/*$1* /</i>' } // comments / * */
|
||||
];
|
||||
//End Borrowed Content
|
||||
|
||||
};
|
||||
Lang.extend( YAHOO.widget.CodeEditor, YAHOO.widget.Editor, {
|
||||
/**
|
||||
* @property _defaultCSS
|
||||
* @description The default CSS used in the config for 'css'. This way you can add to the config like this: { css: YAHOO.widget.SimpleEditor.prototype._defaultCSS + 'ADD MYY CSS HERE' }
|
||||
* @type String
|
||||
*/
|
||||
_defaultCSS: 'html { height: 95%; } body { background-color: #fff; font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small; } a, a:visited, a:hover { color: blue !important; text-decoration: underline !important; cursor: text !important; } .warning-localfile { border-bottom: 1px dashed red !important; } .yui-busy { cursor: wait !important; } img.selected { border: 2px dotted #808080; } img { cursor: pointer !important; border: none; } body.ptags.webkit div { margin: 11px 0; }'
|
||||
});
|
||||
|
||||
|
||||
YAHOO.widget.CodeEditor.prototype._cleanIncomingHTML = function(str) {
|
||||
// before <br> for IE7 so lines show up correctly
|
||||
str = str.replace(/\r?\n/g, " <br>");
|
||||
return str;
|
||||
};
|
||||
|
||||
/* Override to fix problem with the rest of what the normal _handleFormSubmit does
|
||||
* ( it doesn't properly click the correct submit button )
|
||||
*/
|
||||
YAHOO.widget.CodeEditor.prototype._handleFormSubmit = function () {
|
||||
this.saveHTML();
|
||||
return;
|
||||
};
|
||||
/* End override to fix problem */
|
||||
|
||||
YAHOO.widget.CodeEditor.prototype._writeStatus = function () {
|
||||
if ( this.status ) {
|
||||
var text = this.getEditorText();
|
||||
this.status.innerHTML
|
||||
= 'C: ' + text.length
|
||||
+ ' L: ' + text.split(/\r?\n/).length
|
||||
;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @method _setupResize
|
||||
* @description Creates the Resize instance and binds its events.
|
||||
*/
|
||||
YAHOO.widget.CodeEditor.prototype._setupResize
|
||||
= function() {
|
||||
if (!YAHOO.util.DD || !YAHOO.util.Resize) { return false; }
|
||||
if (this.get('resize')) {
|
||||
var config = {};
|
||||
Lang.augmentObject(config, this._resizeConfig); //Break the config reference
|
||||
this.resize = new YAHOO.util.Resize(this.get('element_cont').get('element'), config);
|
||||
this.resize.on('resize', function(args) {
|
||||
var anim = this.get('animate');
|
||||
this.set('animate', false);
|
||||
this.set('width', args.width + 'px');
|
||||
var h = args.height,
|
||||
th = (this.toolbar.get('element').clientHeight + 2),
|
||||
dh = 0;
|
||||
if (this.status) {
|
||||
dh = (this.status.clientHeight + 1); //It has a 1px top border..
|
||||
}
|
||||
var newH = (h - th - dh);
|
||||
this.set('height', newH + 'px');
|
||||
this.get('element_cont').setStyle('height', '');
|
||||
this.set('animate', anim);
|
||||
}, this, true);
|
||||
}
|
||||
};
|
||||
|
||||
YAHOO.widget.CodeEditor.prototype.cleanHTML = function (html) {
|
||||
if (!html) {
|
||||
html = this.getEditorHTML();
|
||||
}
|
||||
html = html.replace(/ /g," ");
|
||||
html = html.replace(/ ?<br>/gi,'\n');
|
||||
html = html.replace(/<[^>]+>/g,'');
|
||||
// Remove spaces at end of lines
|
||||
html = html.replace(/ +\r?\n/g,"");
|
||||
return html;
|
||||
};
|
||||
|
||||
YAHOO.widget.CodeEditor.prototype.focusCaret = function() {
|
||||
if (this.browser.gecko) {
|
||||
if (this._getWindow().find(this.cc)) {
|
||||
this._getSelection().getRangeAt(0).deleteContents();
|
||||
}
|
||||
} else if (this.browser.webkit || this.browser.ie || this.browser.opera) {
|
||||
var cur = this._getDoc().getElementById('cur');
|
||||
if ( cur ) {
|
||||
cur.id = '';
|
||||
cur.innerHTML = '';
|
||||
this._selectNode(cur);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
YAHOO.widget.CodeEditor.prototype.getEditorText
|
||||
= function () {
|
||||
return this.cleanHTML( this.getEditorHTML() );
|
||||
};
|
||||
|
||||
YAHOO.widget.CodeEditor.prototype.highlight = function(focus) {
|
||||
|
||||
// Opera support is not working yet
|
||||
if ( this.browser.opera ) {
|
||||
return;
|
||||
}
|
||||
// Firefox < 3 support is not working yet
|
||||
if ( this.browser.gecko && this.browser.gecko <= 1.8 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!focus) {
|
||||
if (this.browser.gecko) {
|
||||
this._getSelection().getRangeAt(0).insertNode(this._getDoc().createTextNode(this.cc));
|
||||
} else if (this.browser.webkit || this.browser.ie || this.browser.opera) {
|
||||
try {
|
||||
this.execCommand('inserthtml', '!!CURSOR_HERE!!');
|
||||
}
|
||||
catch (e) {}
|
||||
}
|
||||
}
|
||||
var html = '';
|
||||
html = this._getDoc().body.innerHTML;
|
||||
//if (this.browser.opera) {
|
||||
// html = html.replace(/<(?!span|\/span|br).*?>/gi,'');
|
||||
//} else
|
||||
if (this.browser.webkit) {
|
||||
//YAHOO.log('1: ' + html);
|
||||
html = html.replace(/<\/div>/ig, '');
|
||||
html = html.replace(/<br><div>/ig, '<br>');
|
||||
html = html.replace(/<div>/ig, '<br>');
|
||||
html = html.replace(/<br>/ig,'\n');
|
||||
html = html.replace(/<.*?>/g,'');
|
||||
html = html.replace(/\r?\n/g,'<br>');
|
||||
//YAHOO.log('2: ' + html);
|
||||
} else {
|
||||
if (this.browser.ie) {
|
||||
html = html.replace(/<SPAN><\/SPAN>/ig, '');
|
||||
}
|
||||
YAHOO.log(html);
|
||||
// before <br> for IE7
|
||||
html = html.replace(/( |!!CURSOR_HERE!!)?<br[^>]*>/gi,'$1\n');
|
||||
html = html.replace(/<[^>]*>/g,'');
|
||||
html = html.replace(/\r?\n/g,'<br>');
|
||||
// between <br> for IE6
|
||||
html = html.replace(/<br[^>]*>(!!CURSOR_HERE!!)?<br[^>]*>/gi, '<br>$1 <br>');
|
||||
YAHOO.log(html);
|
||||
}
|
||||
for (var i = 0; i < this.keywords.length; i++) {
|
||||
html = html.replace(this.keywords[i].code, this.keywords[i].tag);
|
||||
}
|
||||
YAHOO.log("AFTER HIGHLIGHT:" + html);
|
||||
html = html.replace('!!CURSOR_HERE!!', '<span id="cur">|</span>');
|
||||
|
||||
this._getDoc().body.innerHTML = html;
|
||||
if (!focus) {
|
||||
this.focusCaret();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @method initAttributes
|
||||
* @description Initializes all of the configuration attributes used to create
|
||||
* the editor.
|
||||
* @param {Object} attr Object literal specifying a set of
|
||||
* configuration attributes used to create the editor.
|
||||
*/
|
||||
YAHOO.widget.CodeEditor.prototype.initAttributes
|
||||
= function(attr) {
|
||||
YAHOO.widget.CodeEditor.superclass.initAttributes.call(this, attr);
|
||||
var self = this;
|
||||
/**
|
||||
* @attribute status
|
||||
* @description Toggle the display of a status line below the editor
|
||||
* @default false
|
||||
* @type Boolean
|
||||
*/
|
||||
this.setAttributeConfig('status', {
|
||||
value: attr.status || false,
|
||||
method: function(status) {
|
||||
if (status && !this.status) {
|
||||
this.status = document.createElement('DIV');
|
||||
this.status.id = this.get('id') + '_status';
|
||||
Dom.addClass(this.status, 'dompath'); // Piggy-back on Editor's dompath
|
||||
this.get('element_cont').get('firstChild').appendChild(this.status);
|
||||
if (this.get('iframe')) {
|
||||
this._writeStatus();
|
||||
}
|
||||
} else if (!status && this.status) {
|
||||
this.status.parentNode.removeChild(this.status);
|
||||
this.status = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
/**
|
||||
* @attribute css_url
|
||||
* @description The URL to the CSS file for the inside of the code editor
|
||||
* @default 'code.css'
|
||||
* @type String
|
||||
*/
|
||||
this.setAttributeConfig('css_url', {
|
||||
value: attr.css_url || 'code.css'
|
||||
} );
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
9
www/extras/yui-webgui/build/code-editor/code.css
Executable file
9
www/extras/yui-webgui/build/code-editor/code.css
Executable file
|
|
@ -0,0 +1,9 @@
|
|||
body { background:white url(line-numbers.png) repeat-y scroll 0pt -4px; font-family:monospace; font-size:13px; height:100%; line-height:16px; margin-left:32px; margin-top:8px; white-space:pre; }
|
||||
b, i, s, u, a, em, tt, ins, big, cite, strong, var, dfn {text-decoration:none;font-weight:normal;font-style:normal;font-size:13px;}
|
||||
b, cite {color:#7F0055;font-weight:bold;} /* reserved words */
|
||||
u {color:darkblue;font-weight:bold;} /* special words */
|
||||
i, i b, i s, i u {color:green;font-weight:normal;} /* comments */
|
||||
s, s b, s u {color:#2A00FF;font-weight:normal;} /* strings */
|
||||
ins, ins b, ins s, ins em {color:green;} /* comments */
|
||||
a {color:blue; text-decoration: underline; } /* links */
|
||||
body.ie { padding-left: 32px; margin-left: 0px; background-position: 0 -10px; margin-top: 0px;}
|
||||
BIN
www/extras/yui-webgui/build/code-editor/line-numbers.png
Executable file
BIN
www/extras/yui-webgui/build/code-editor/line-numbers.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Loading…
Add table
Add a link
Reference in a new issue