PDA

View Full Version : Ext.ux.CodePress



eVizions
22 Aug 2007, 4:08 PM
I've been playing around with trying to integrate CodePress into Ext. I'll share what I have currently and hopefully get a few fresh eyes to help me fix what's still broken.

To use:

You must download the CodePress library (http://codepress.org) and use as suggested. Add the following code into a file called 'Ext.ux.codepress.js' and put it in the main codepress folder. Instead of

<script type="text/javascript" src="includes/codepress/codepress.js"></script>
you would then use

<script type="text/javascript" src="includes/codepress/Ext.ux.codepress.js"></script>

From there, you call it as a form item:

new Ext.ux.CodePress({
id: 'docadminTemplateEditor'
, language: 'html'
, autoResize: true
})

The main config options for it are:
id: The id of the component
element: If your code is in a textarea element, put the id here
code: If you want to input the code via initialization
language: The language to use
height: The component's height
width: The component's width
autoResize: If you don't enter a width or height and want it to automatically resize (still not perfect)

There are probably quite a few things still wrong with this at this point, but it's a good start and I figured I would put it out there so others can improve on it as well.


Download the file here (http://evizions.com/assets/includes/codepress/Ext.ux.codepress.js) or check out the example here (http://evizions.com/ext_ux_codepress).

galdaka
23 Aug 2007, 5:45 AM
Live example please!!

Thanks in advance,

eVizions
23 Aug 2007, 9:48 AM
Since people love live examples, I threw one up quickly here (http://evizions.com/ext_ux_codepress).

Please note that I am having some issues with it that are noted on the page, but most importantly that it broke (again) in IE, so I would recommend either viewing in Firefox or helping me figure out why I'm getting an 'invalid argument' message in IE7.

All feedback appreciated.

redbulljunkie
23 Aug 2007, 11:31 AM
Since people love live examples, I threw one up quickly here (http://evizions.com/ext_ux_codepress).

Please note that I am having some issues with it that are noted on the page, but most importantly that it broke (again) in IE, so I would recommend either viewing in Firefox or helping me figure out why I'm getting an 'invalid argument' message in IE7.

All feedback appreciated.

Did a quick check in the IE script debugger which breaks on this line

this.editor.body.style.width = w + 'px';

Try removing the ' + 'px' ' at the end of the line as you already add this previously.

galdaka
23 Aug 2007, 11:31 AM
Since people love live examples, I threw one up quickly here (http://evizions.com/ext_ux_codepress).

Please note that I am having some issues with it that are noted on the page, but most importantly that it broke (again) in IE, so I would recommend either viewing in Firefox or helping me figure out why I'm getting an 'invalid argument' message in IE7.

All feedback appreciated.

OK I have error with IE6.

eVizions
23 Aug 2007, 11:37 AM
Thanks redbulljunkie... that seemed to do the trick. Code has been updated.

galdaka
23 Aug 2007, 1:44 PM
Thanks ;) good work!

kevinzc
23 Aug 2007, 6:57 PM
Tested, Working, Great ! :)

DeeZ
24 Aug 2007, 4:49 AM
Great ! Thank you.
Coud you please add it to the user community extension page ? => http://extjs.com/learn/Ext_Extensions

eVizions
24 Aug 2007, 10:32 AM
Created as an Extension : http://extjs.com/learn/Extension:CodePress

jguru
24 Aug 2007, 11:44 AM
I am getting an error:Ext.reg is not a function -- Ext.reg('codepress', Ext.ux.CodePress); line 245

steffenk
28 Aug 2007, 8:30 AM
first - thx for this, i need that atm and i'm happy to use it this way.

I have a strange effect by scrolling, look to the screenshot.

DigitalSkyline
30 Aug 2007, 10:05 AM
Not sure which is better, but if you've never come across it:
http://www.cdolivet.net/editarea/editarea/exemples/exemple_full.html

Has a bit more to it then codepress, goto line, search, and the line numbers aren't a image. Anyways -- I'm undecided. If codepress could get away from using the image for line numbers I'd like it more, I think its a better performing engine.

steffenk
3 Sep 2007, 12:38 PM
I get errors with the extension.
when i only include the Ext.ux.codepress.js, i get
Ext.reg has no properties
Ext.reg('codepress', Ext.ux.CodePress);

when i remove that line i get next error after


var codeHTML=new Ext.ux.CodePress({
id: 'docadminTemplateEditor'
, element: 'ext_html_example'
, language: 'html'
, autoResize: true
});

Error:
this.editor has no properties
[Break on this error] this.editor.body = this.doc.getElementsByTagName('body')[0];

FreeGroup
14 Sep 2007, 7:49 AM
Hi

I have the same problem. Any solution?!

greetings

Andreas

FreeGroup
14 Sep 2007, 7:55 AM
additional I have the save scrolling problem (horizontal lines)

:-(

antimatter15
16 Sep 2007, 1:44 PM
additional I have the save scrolling problem (horizontal lines)

:-(

I think that's pretty common. I sometimes see that bizzare phenomenon on SMF forums...

steffenk
18 Sep 2007, 1:54 AM
yes, it's also in the demo.

i stopped investigating atm and look for another solution.

philmaker
1 Mar 2008, 3:33 PM
I'm having trouble turning line numbers off. I'm able to do this with CodePress alone but not with Ext.ux.CodePress. I tried setting cls:'linenumbers-off' in the Ext.ux.CodePress config but that does not help. I also tried calling toggleLineNumbers() once the component is instantiated. Has anyone had this work?

scuter
5 Apr 2008, 12:37 PM
At me it is impossible to put Ext.ux. CodePress (http://extjs.com/forum/showthread.php%3Fp=131928#post131928) in TabPanel,
The form is not sent and appears a glitch,
Prompt please as it to correct
I am sorry for English (I use the translator)

var tpl_TabAdd = function(node)
{
Ext.MessageBox.show({
msg: 'получение страници',
progressText: 'Згрузка...',
width:300,
wait:true
});
Ext.Ajax.request({
url : 'src/page_tpl_get:'+node.text,
method: 'GET',
success: function ( result, request ) {
//alert(result.responseText);
Ext.MessageBox.hide();
tab = new Ext.FormPanel({
title: node.text,
closable:true,
autoScroll:true,
id:'tpl_'+node.id,
bodyStyle:'padding:5px',
items: [new Ext.ux.CodePress({
name:'html',
width: '100%',
height:'99%',
language: 'html',
autoResize:true,
value:result.responseText
})],
buttons: [{
text: 'Submit',
handler: function(){
tab.form.submit({
url:'/admin/src/page_seve:'+node.id,
failure:function(result, request)
{
},
waitMsg:'Обработка запроса...',
waitTitle:'Сохранение...'
});
}
}]
});
tabPanel.add(tab).show();
}
});
}

sierk
20 Apr 2008, 7:15 AM
Hi,

For GuiDesigner (http://extjs.com/forum/showthread.php?t=28133), a project of mine i fixed a number of bug in the code and added documentation. I place it here so the original owner may decide how to continue.

Sierk

/*
* CodePress - Real Time Syntax Highlighting Editor written in JavaScript - http://codepress.org/
*
* Copyright (C) 2006 Fernando M.A.d.S. <[email protected]>
*
* This program is free software; you can redistribute it and/or modify it under the terms of the
* GNU Lesser General Public License as published by the Free Software Foundation.
*
* Read the full licence: http://www.opensource.org/licenses/lgpl-license.php
*
* This file is not the original but has been modified to be more compliant with
* ExtJs. Changes are made by S.J.Hoeksma
*/
Ext.namespace('Ext.ux');

/**
* Component which wraps the <a href="http://codepress.org">CodePress</a> library to make
* it available for ExtJs. CodePress gives syntax highlighting for different programming
* languages.
* @type component
*/
Ext.ux.CodePress = Ext.extend(Ext.form.Field, {

/**
* The id of the element to pull code from
* @type {String}
@cfg */
sourceEl : false,

/**
* The code to use in the editor
* @type {String}
@cfg */
code : false,

/**
* The language to render the code with (defaults none)
* @type {String}
@cfg */
language : false,

/**
* The url used to read code which is display in editor
* @type {String}
@cfg */
url : false,

/**
* Height of the editor (defaults false)
* @type {Int}
@cfg */
height : false,

/**
* Width of the editor (defaults false)
* @type {Int}
@cfg */
width : false,

/**
* AutoResize window on change container (defaults false)
* @type {Boolean}
@cfg */
autoResize : false,

/**
* Trim the code of trailing spaces and empty lines (defaults true)
* @type {Boolean}
@cfg */
trim : true,

/**
* Is autoComplete for keywords turned on or off (defaults true)
* @type {Boolean}
@cfg */
autoComplete : true,

/**
* Is the editor readonly (defaults false)
* @type {Boolean}
@cfg */
readOnly : false,

/**
* Are lineNumbers visible (defaults true)
* @type {Boolean}
@cfg */
lineNumbers : true,

//@private Has the editor been initialized
initialized : false,

/**
* @private Init the codepress component for ExtJs
*/
initComponent : function(){
if (!Ext.ux.CodePress.path) {
s = document.getElementsByTagName('script');
for(var i=0,n=s.length;i<n;i++) {
var name = s[i].src ? s[i].src : s[i].id;
if(name.match('Ext\.ux\.CodePress\.js')) {
Ext.ux.CodePress.path = name.replace('Ext\.ux\.CodePress\.js','');
break;
}
}
}
Ext.ux.CodePress.superclass.initComponent.call(this);

// Hide the sourceEl if provided
if(this.sourceEl) Ext.get(this.sourceEl).hide();

this.addEvents({
/**
* Fires when the editor is fully initialized (including the iframe)
* @event initialize
* @param {Object} editor The editor
*/
initialize: true,

/**
* Fires when the editor is first receives the focus. Any insertion must wait
* until after this event.
* @event activate
* @param {Object} editor The editor when activated
*/
activate: true

});
},

/**
* @private (for BoxComponent)
*/
adjustSize : Ext.BoxComponent.prototype.adjustSize,

/**
* Resize the the editor depending, behavior depends on height,width and autoResize
*/
resize : function(){
if (!this.editor) return;
var h,w;
if (this.autoResize) {
h = this.ownerCt.body.dom.clientHeight +'px';
w = this.ownerCt.body.dom.clientWidth +'px';
} else {
h = (this.height || this.ownerCt.body.dom.clientHeight) +'px';
w = (this.width || this.ownerCt.body.dom.clientWidth) +'px';
}
this.editor.body.style.width = w;
this.iframe.setStyle('height', h);
this.iframe.setStyle('width', w);
},

/**
* @private During render we create textarea of code press
* @param {Component} ct The component to render
* @param {Object} position A object containing the position of the component
*/
onRender : function(ct, position){
Ext.ux.CodePress.superclass.onRender.call(this, ct, position);

//Taken from Ext.form.HtmlEditor
this.el.dom.style.border = '0 none';
this.el.dom.setAttribute('tabIndex', -1);
this.el.addClass('x-hidden');


if(Ext.isIE){ // fix IE 1px bogus margin
this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
}
this.wrap = this.el.wrap({});

// Create the iframe
this.iframe = Ext.get(document.createElement('iframe'));
this.iframe.src = (Ext.SSL_SECURE_URL || 'javascript:false');

// Create the textarea element if not created
if(!this.sourceEl){
this.textarea = Ext.get(document.createElement('textarea'));
}else{
this.textarea = Ext.get(this.sourceEl);
}
this.textarea.dom.disabled = true;
this.textarea.dom.style.overflow = 'hidden';
this.textarea.dom.style.overflow = 'auto';
this.iframe.dom.frameBorder = 0; // remove IE internal iframe border
this.iframe.setStyle('visibility', 'hidden');
this.iframe.setStyle('position', 'absolute');
this.options = this.textarea.dom.className;
this.wrap.dom.appendChild(this.textarea.dom);
this.textarea.dom.parentNode.insertBefore(this.iframe.dom, this.textarea.dom);
this.edit();
this.height = (this.height || this.ownerCt.body.dom.clientHeight);
this.width= (this.width || this.ownerCt.body.dom.clientWidth);
},

/**
* @private We don't support focus of editor
*/
focus : function(){},

/**
* @private Initialize the editor
*/
initialize : function() {
if(Ext.isIE){
this.doc = this.iframe.dom.contentWindow.document;
this.win = this.iframe.dom.contentWindow;
} else {
this.doc = this.iframe.dom.contentDocument;
this.win = this.iframe.dom.contentWindow;
}
this.editor = this.win.CodePress;
this.editor.body = this.doc.getElementsByTagName('body')[0];
if(this.url){
Ext.Ajax.request({
url: this.url
, method:'get'
, success:function(response, options){
var code = response.responseText;
this.code = code;
this.editor.setCode(this.code);
}.createDelegate(this)
});
}else{
this.editor.setCode(this.code || this.textarea.dom.value);
}
this.resize();
this.setOptions();
this.editor.syntaxHighlight('init');
this.textarea.dom.style.display = 'none';
this.iframe.dom.style.position = 'static';
this.iframe.dom.style.visibility = 'visible';
this.iframe.dom.style.display = 'inline';

this.initialized = true;
this.fireEvent('initialize', this);
},

/**
* Initailize the editor with a element and set the langauge
* @param {Object} obj Can by a textarea id or a string
* @param {String} language The langauge to use
*/
edit : function(obj,language) {
if(obj) this.textarea.dom.value = document.getElementById(obj) ? document.getElementById(obj).value : obj;
if(!this.textarea.dom.disabled) return;
this.language = language ? language : this.getLanguage();
this.iframe.dom.src = Ext.ux.CodePress.path+'codepress.html?language='+this.language+'&ts='+(new Date).getTime();
this.iframe.removeListener('load', this.initialize);
this.iframe.on('load', this.initialize, this);
},

/**
* Get the current langauge used by the editor
* @return {String} The language used by editor
*/
getLanguage : function() {
if(this.language) return this.language;
for (language in Ext.ux.CodePress.languages)
if(this.options.match('\\b'+language+'\\b'))
return Ext.ux.CodePress.languages[language] ? language : 'generic';
},

/**
* Set the options of editor
* See config items autoComplete, readOnly, lineNumbers
*/
setOptions : function() {
if(this.autoComplete===false || this.options.match('autocomplete-off')) this.toggleAutoComplete();
if(this.readOnly===true || this.options.match('readonly-on')) this.toggleReadOnly();
if(this.lineNumbers===false || this.options.match('linenumbers-off')) this.toggleLineNumbers();
},

/**
* Original CodePress function to get the code from the editor. For compatibility reasons
* with ExtJs TextArea whe implemented getValue
* @return {String} The code from editor
*/
getCode : function() {
var code;
if (this.textarea && this.editor)
code = this.textarea.dom.disabled ? this.editor.getCode() : this.textarea.dom.value;
else
code = this.code || "";
code = this.trim ? code.replace(/^\s+|(\s+$|\n$|\r$)/g,"") : code;
return code;
},

/**
* Original CodePress function to set the code of the editor.For compatibility reasons
* with ExtJs TextArea whe implemented setValue
* @param {String} code The code to be display in editor
*/
setCode : function(code) {
if (this.textarea && this.editor) {
this.textarea.dom.disabled ? this.editor.setCode(code) : this.textarea.dom.value = code;
this.editor.syntaxHighlight('init');
} else {
this.code = code;
}
},

/**
* Set the value to be used by the editor
* @param {String} text The code to be display in editor
*/
setValue : function(text) {
this.setCode(text);
},

/**
* Get the value of the code within the editor
* @return {String} The code within the editor
*/
getValue : function() {
return this.getCode();
},

/**
* Toggle autocomplreate on or off
*/
toggleAutoComplete : function() {
if (this.editor)
this.editor.autocomplete = (this.editor.autocomplete) ? false : true;
},

/**
* Toggle readonly on or off
*/
toggleReadOnly : function() {
this.textarea.dom.readOnly = (this.textarea.dom.readOnly) ? false : true;
if(this.iframe.dom.style.display != 'none' && this.editor) // prevent exception on FF + iframe with display:none
this.editor.readOnly(this.textarea.dom.readOnly ? true : false);
},

/**
* Toggle line numbers on or off
*/
toggleLineNumbers : function() {
if (!this.editor) return;
var cn = this.editor.body.className;
this.editor.body.className = (cn==''||cn=='show-line-numbers') ? 'hide-line-numbers' : 'show-line-numbers';
},

/**
* Toggle between codepress and textarea
*/
toggleEditor : function() {
if(this.textarea.dom.disabled) {
this.textarea.dom.value = this.getCode();
this.textarea.dom.disabled = false;
this.iframe.dom.style.display = 'none';
this.textarea.dom.style.display = 'inline';
}
else {
this.textarea.dom.disabled = true;
this.setCode(this.textarea.dom.value);
if (this.editor) this.editor.syntaxHighlight('init');
this.iframe.domstyle.display = 'inline';
this.textarea.dom.style.display = 'none';
}
}
});

Ext.reg('codepress', Ext.ux.CodePress);

Ext.ux.CodePress.languages = {
csharp : 'C#',
css : 'CSS',
generic : 'Generic',
html : 'HTML',
java : 'Java',
javascript : 'JavaScript',
perl : 'Perl',
ruby : 'Ruby',
php : 'PHP',
text : 'Text',
sql : 'SQL',
vbscript : 'VBScript'
}

johncarlson21
9 May 2008, 5:35 AM
problem with the editor? first of all I want to call this on a form element.. and it seems to be that the only way to do it is to just render it to something.. you can't use it like I want..

also I get it to work.. but the problem is that I have to call the editor for the code.. which with editarea I don't have to in a regular html form but when using ext I have to also call the editor for the value..

is there any other way to accomplish this..?

InOttawa
3 Jul 2008, 11:59 AM
Has anyone tried to implement a dropTarget / DropZone with the CodePress Editor??

I'm attempting to drop text from another panel (tree) into the editor and the dragging of the components seems to stop at the border of the editor. Anyone else tried this and can perhaps share some insight / wisdom?

InOttawa
4 Jul 2008, 7:21 AM
well.. I found the following post in another thread and I'm guessing that this is the reason why DD into the editor doesn't work and stops at the border

http://extjs.com/forum/showthread.php?p=151322

I will investigate pulling the editor out of an iframe (if possible).:-/

neonexus
17 Nov 2008, 1:08 AM
Thought I would through in my two cents, and help anyone out that I can with this.

First off, if you are using the 'codepress' xtype inside of a resizable element (such as a window), add the following code:



, listeners : {
resize:{
fn: function(){ this.resize(); }
}
}


Right after this code:



, initComponent : function(){
Ext.ux.CodePress.superclass.initComponent.call(this);

// Hide the sourceEl if provided
if(this.sourceEl){
Ext.get(this.sourceEl).hide();
}

this.addEvents({
/**
* @event initialize
* Fires when the editor is fully initialized (including the iframe)
* @param {HtmlEditor} this
*/
initialize: true

/**
* @event activate
* Fires when the editor is first receives the focus. Any insertion must wait
* until after this event.
* @param {HtmlEditor} this
*/
, activate: true

});
}

// private (for BoxComponent)
, adjustSize : Ext.BoxComponent.prototype.adjustSize
Next, if you receive the error: "editor is not defined", then you didn't follow directions when installing this script. You HAVE to name the file that the Ext version of Codepress "Ext.ux.CodePress.js" is in (and it MUST be included via "script" tag, can NOT be inline) because of this code in the initiallizer:



if(name.match('Ext\.ux\.CodePress\.js')) {
Ext.ux.CodePress.path = name.replace('Ext\.ux\.CodePress\.js','');
break;
}
It MUST also be in the same folder as CodePress.

You can, of coarse, just change this behavior to match your filename (if you are so stubborn, as I am). Just change the above lines.


One final note, there is a small syntax error that I found when using toggleEditor() (a period is missing). Here is the fix:


, toggleEditor : function() {
if(this.textarea.dom.disabled) {
this.textarea.dom.value = this.getCode();
this.textarea.dom.disabled = false;
this.iframe.dom.style.display = 'none';
this.textarea.dom.style.display = 'inline';
}
else {
this.textarea.dom.disabled = true;
this.setCode(this.textarea.dom.value);
this.editor.syntaxHighlight('init');
this.iframe.dom.style.display = 'inline';
this.textarea.dom.style.display = 'none';
}
}

You'll also want to replace the resize() with this:



, resize : function(){
if(this.initialized){
var h = (this.height || this.ownerCt.body.dom.clientHeight) +'px';
var w = (this.width || this.ownerCt.body.dom.clientWidth) +'px';
this.editor.body.style.width = w;
this.iframe.setStyle('height', h);
this.iframe.setStyle('width', w);
this.textarea.setStyle('height', h);
this.textarea.setStyle('width', w);
}
}


Hope this helps releave someones stress. It took me forever to fix these very small bugs.

galdaka
23 Nov 2008, 11:58 AM
Created as an Extension : http://extjs.com/learn/Extension:CodePress

This extensions works with Ext 2.2?

Thanks in advance,

neonexus
23 Nov 2008, 2:11 PM
This extensions works with Ext 2.2?

Yes, this extension does work with Ext 2.2.

mschwartz
3 Dec 2008, 5:13 PM
Thought I would through in my two cents, and help anyone out that I can with this.

First off, if you are using the 'codepress' xtype inside of a resizable element (such as a window), add the following code:



, listeners : {
resize:{
fn: function(){ this.resize(); }
}
}
Right after this code:


Tried it and it does resize, but there's a horizontal scrollbar in the window with FF3. I hacked the resize function to set the width-50 and it worked out.



Next, if you receive the error: "editor is not defined", then you didn't follow directions when installing this script. You HAVE to name the file that the Ext version of Codepress "Ext.ux.CodePress.js" is in (and it MUST be included via "script" tag, can NOT be inline) because of this code in the initiallizer:



if(name.match('Ext\.ux\.CodePress\.js')) {
Ext.ux.CodePress.path = name.replace('Ext\.ux\.CodePress\.js','');
break;
}
It MUST also be in the same folder as CodePress.

You can, of coarse, just change this behavior to match your filename (if you are so stubborn, as I am). Just change the above lines.


You can put this in your Ext.onReady() function and never have to worry about it:


Ext.ux.CodePress.path = '/whatever/...../codepress/';


(/whatever/....codepress/ needs to be set up proper for your filesystem layout)

~o)

neonexus
5 Dec 2008, 1:44 PM
mschwartz:

You make good points. I have noticed the horizontal scrollbar, but I haven't bothered to fix it yet (not a priority right now). As far as the CodePress path goes, I never thought about doing it the way you did. Thanks for the tip :D.

aityahia
28 Mar 2009, 7:09 AM
hi all

i add a code with initialisation of code and i have the code in single ligne
how to wrap a text,

Mark
4 Apr 2009, 9:49 AM
I've tried to setup Ext.ux.codepress without success. I followed the explantions of the demo page but I'm confused because there is a broken link to codepress.org. So I cannot download the codelib. Can anybody help me out?
Thanks in advance!

Mark

ms-pj
19 Nov 2009, 1:14 PM
http://sourceforge.net/projects/codepress/

coolstar
4 Jan 2010, 8:49 PM
I see that your extention is really nice, but if you can't upgrade it to extjs 3.*, I will have to run it in compatibility mode(or an iframe with extjs 1.*). So my request is that you please update it to run on extjs 3.* It would be nice for everyone to have the functionality of CodePress in extjs 3.*. Thanks in advance.

scottpederick
18 Mar 2010, 3:05 PM
I had some issues where it would resize properly so added:



, setSize : function(width, height) {
this.resize();
}


and all is well.

Hope this helps someone

slckysr
30 Nov 2010, 7:55 AM
so hi at first,

i have two problems with CodePress.

1. works very poor with google chrome.

2. how can i disable the codepress editor ?

except these two problems which i have faced now, the editor is very good. thanks for your efforts evizion.