changing text

[optikalefx]

ok this one is tough.

 

ok so in my last thread we changed the attributes to an img tag.

Well now i want to change the text on the page.  I want to be able to click on some text, insert the cursor, and be able to type.  And using a giant textbox is no good here because any/all text needs to be editable.  You can see examples of this with that designer mode that browsers have, theres some javascirpt code you enter in the URL and you can drag pictures and change text.  So there must be a way.  And ive read about a javascript way of 'placing the cursor at text' somwhere.

 

my initial idea is to envoke the script onClick of the text.  Not sure what your onClicking exactly.  But yea, this is the idea.

[optikalefx]

Oh yea, the other option is, there can be a button to turn on Text editing mode or whatever. so your not ALWAYS editing text.

 

the reason for this is so that links dont work in text edit mode.  So you can change the text of the link.

[phpQuestioner]

 

Your wanting a WYSIWYG Editor; search Google for "TinyMCE".

[optikalefx]

ok, kinda, but not really.

 

I dont want to turn the whole page into text box.  Plus i only want the editing portion, and that code is near impossible to break down.

This is much closer to what im after.

http://www.quirksmode.org/dom/cms.html

 

except i would need to put <p> and </p> around all things that text, not sure if thats possible either.  I dont want have mini text boxes there, but thats closer than the wysiwyg

[phpQuestioner]

 

Not really sure what to tell you about this one; never created something quit like that.

 

- Good Luck

[optikalefx]

well maybe you could help me go this route.  I can style the textareas so they dont look like textareas.  BUT, how can scan a document and put <p> in front of everything thats text?

[optikalefx]

and on the same line, a button that will disable all links, and then when pressed again, enables all links.   

if im getting annoying let me know

[phpQuestioner]

 

You take the current textarea value; add paragraph tags to it and it all together back in the textarea. You can reference all links with the code I provided for you before; just change the attribute to href.

[optikalefx]

ok so ive got this part

 

var y = document.createElement('TEXTAREA');

y.style.border="none";

 

it works where if the text has <p>  </p> around it, you can click it and it turns to a textarea, and i made the border be...not there, so it looks like your editing on the page.  The problem is that the text area doesnt adjust to the size of the text.  If its one line of text, it creates a blank row which kinda moves the text out of position.  And if its long, it puts it all in like a reallly small textarea with a scrollbar.  Anyway to make this look right?

[emehrkay]

This is pretty simple

 

Crete a span/p with an id.

Create a JS onclick listener that will take that span and take the innerHTML and apply it to the textarea's value

 

Something like this

 

js:

<script type="text/javascript">
    onload = function(){
        var text        = documnet.getElementById('editable');
        var text_area   = documnet.getElementById('editable:textarea');
        var save_btn    = documnet.getElementById('save_button');
        
        //add text functionality
        text.onclick = function(){
            text.style.display      = 'none';
            text_area.style.diaplay = 'block';
            //inside here you whould set the innerhtml of the text area to the innerhtml of the text node and 
            //add click event for the save_btn that would write the inner html of the textarea to the text element
        };
    }
    
</script>

css:
#textarea_form{
    display:none;
}

html:
<p id="editable">
    this is some text
</p>
<form id="textarea_form">
<textarea id="editable:textarea" rows="3" cols="30">    
</textarea><input type="button" value="save" id="save_button" />
</form>
[code]

[/code]

[optikalefx]

It seems like that code just does what i already have done, it allows you to click a spot of text and turns it into a text box and then when you hit save it puts in the new innerHtml.  I got that part.  The part thats tough is the SIZE of the textbox is always set, and it needs to be dynamic to the size of the text area your editing, not to mention the size of the window (did that part) and it needs to extend as you type, (i found a script for that i cant get to work).

 

But the part that gets me, is how i can tell what CSS is appllied to the area b4 you edit so you can reApply the same styles in the new text box, basically a wysiwyg but not as complicated as the other one.  Just a few simple things in this one.

 

here is the script that extends the textarea as you type

http://www.felgall.com/jstip45.htm

 

and here is the script that ive altered to do what emehrykay was saying

http://www.quirksmode.org/dom/cms.html

 

 

[emehrkay]

In that resize script he says to add onkeyup="sz(this);" to the element. You would say

 

y.onkeyup = sz(this);

 

if y = document.createElement('TEXTAREA');

[optikalefx]

is there any reason why there is a syntax error?

function sz(t) {
a = t.value.split('\n');
b=1;
for (i=0;i<a.length;i++) {
 		if (a[i].length >= t.cols) b+= Math.floor(a[i].length/t.cols);
 	}
b+= a.length;
if (b > t.rows) t.rows = b;
}

 

 

i copied straight from the site, and it didnt work, i changed their x to my i and it still doesnt work, any ideas?

[optikalefx]

ok it says it needs to be in the head, but, i dont want it in the head, it needs to be with the rest of the javascritpt...grrr

[emehrkay]

is there any reason why there is a syntax error?

function sz(t) {
a = t.value.split('\n');
b=1;
for (i=0;i<a.length;i++) {
		if (a[i].length >= t.cols) b+= Math.floor(a[i].length/t.cols);
	}
b+= a.length;
if (b > t.rows) t.rows = b;
}

 

 

i copied straight from the site, and it didnt work, i changed their x to my i and it still doesnt work, any ideas?

 

My guess, without looking at the rest of your code, is that you are using global variables when you dont write var in front of them. But there could be an error with my original code. try

 

y.onkeyup = function(){

sz(this);

}

 

[optikalefx]

would global/local variables be a reason for that code having to be in the head of the document.  I mean the function alone, not even the call right now, but the function sz(t) { } part, when i past that in the body with the rest of the JS it gets an error, but it works in the head, although i cant even get the code to work at that point.

var x = obj.innerHTML;
var y = document.createElement('TEXTAREA');
if (attr) y.id = attr;
y.style.border="none";
y.style.width=pageX;
var z = obj.parentNode;
z.insertBefore(y,obj);
z.insertBefore(done,obj);
z.insertBefore(bold_butt,obj);
z.insertBefore(ital_butt,obj);
z.insertBefore(color_butt,obj);
z.removeChild(obj);
y.value = x;
y.focus();
y.onkeyup = sz(this);
editing = true;

 

 

[emehrkay]

did you try

 

y.onkeyup = function(){

sz(this);

};

 

?

[nogray]

check this out

 

http://nicedit.com/

 

[optikalefx]

yea i tried that.

 

i believe the problem is that the the sz function is in the <head> of the document.  I dont get it, nothing else needs to be there, why does this stupid function have to be.  See in the end it needs adjust to the CURRENT size of the text, and then adjust as you type as well.

 

i also need to figure out how, when you hit enter, insert a \n.  when you edit the text box and hit enter in it, and then get out of the text box, it doesnt register the line break.  Id like it to be a \n and not a <br> though because i dont want the user to see <br> in the text box.

 

I checked out nicedit.com.  Im not looking to use someone elses script, im trying to make my own, and since their source is sooooooo packed i cant really read through it for help.  thanks for the suggestion though.

[emehrkay]

Having the script in the head or the body doesnt matter, it all gets put to the memory.

 

You need to do

 

y.onkeyup = function(){func();}; because you need that function (func) to fire when a key is pressed

 

try

 

y.onkeyup = function(){

alert('key pressed');

};

[optikalefx]

im not even ready for the function call, i cant get the script to not ruin everythign else

 

this causes a syntax error

function sz(t) {
a = t.value.split('\n');
b=1;
for (i=0;i<a.length;i++) {
 		if (a[i].length >= t.cols) b+= Math.floor(a[i].length/t.cols);
 	}
b+= a.length;
if (b > t.rows) t.rows = b;
}

 

this doesnt

function sz(t) {
a = t.value.split('\n');
b=1;
for (i=0;i<a.length;i++) {
		//if (a[i].length >= t.cols) b+= Math.floor(a[i].length/t.cols);
	}
b+= a.length;
if (b > t.rows) t.rows = b;
}

 

when i comment out that line, my original code runs, (doesnt work obviously) but something is wrong there that is causing an error.

[emehrkay]

post it all, html included

[optikalefx]

var editing  = false;
var pageX = (document.all)?document.body.offsetWidth:window.innerWidth - 50;
var myObj;

if (document.getElementById && document.createElement) {
// create done button
var done = document.createElement('BUTTON');
var donetext = document.createTextNode('Done Editing')
done.style.position="absolute";
done.style.top="0px";
done.style.left="0px";;
done.appendChild(donetext);
done.onclick = saveEdit;

//create bold button
var bold_butt = document.createElement('BUTTON');
bold_butt.style.position="absolute";
bold_butt.style.top="0px";
bold_butt.style.left="120px";
var boldtext = document.createTextNode('Bold');
bold_butt.appendChild(boldtext);

//create italics button
var ital_butt = document.createElement('BUTTON');
ital_butt.style.position="absolute";
ital_butt.style.top="0px";
ital_butt.style.left="170px";
var italtext = document.createTextNode('Italics');
ital_butt.appendChild(italtext);

//create color button
var color_butt = document.createElement('BUTTON');
color_butt.style.position="absolute";
color_butt.style.top="0px";
color_butt.style.left="230px";
var colortext = document.createTextNode('color');
color_butt.appendChild(colortext);
}

// show what tag your on as you move mouse around
document.onmouseover = function() {
self.status = "Current Tag is:   " + window.event.srcElement.tagName;
}


function catchIt(e) {
// cant click if your busy editing
if (editing) return;
// validate check
if (!document.getElementById || !document.createElement) return;
//  get the current element tag
if (!e) var obj = window.event.srcElement;
else var obj = e.target;
// go up DOM till we get to a tag
while (obj.nodeType != 1) {
	obj = obj.parentNode;
}

// if Textarea or link dont do anything
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
//allow inner most tag to be created
while (obj.nodeName != 'P' && obj.nodeName != 'HTML' && obj.nodeName != 'SPAN' && obj.nodeName != 'DIV' && obj.nodeName != 'B' && obj.nodeName != 'I' && obj.nodeName != 'TD') {
	obj = obj.parentNode;
}
// if its HTML dont do anything
if (obj.nodeName == 'HTML') return;
// create a global varaible of the current tag
myObj = obj;
// get the text
var x = obj.innerHTML;
// create the new textarea
var y = document.createElement('TEXTAREA');
// get the node above that so you can insert b4 it
var z = obj.parentNode;
// put the new textarea in
z.insertBefore(y,obj);

//put all the buttons in
z.insertBefore(done,obj);
z.insertBefore(bold_butt,obj);
z.insertBefore(ital_butt,obj);
z.insertBefore(color_butt,obj);

// we dont need to know the above node anymore
z.removeChild(obj);
// put the text in the new textarea
y.value = x;
// make it borderless
y.style.border="none";
// make it long
y.style.width=pageX;
// make it tall
y.style.height="50px";
// give it an id to use later
y.id = "cur_edit";
// put the focus on it
y.focus();
// user is editing right now
editing = true;
}

function saveEdit() {
var area = document.getElementById('cur_edit');

// get the ID attribute
//NEXT FIND IF ONE EXISTS, AND DO THAT FOR EACH AND SO ON
alert(myObj.getAttribute('id'));
//Re-create inner most element
if (myObj.nodeName == 'P') var y = document.createElement('P');
if (myObj.nodeName == 'SPAN') var y = document.createElement('SPAN');
if (myObj.nodeName == 'DIV') var y = document.createElement('DIV');
if (myObj.nodeName == 'B') var y = document.createElement('B');
if (myObj.nodeName == 'I') var y = document.createElement('I');
if (myObj.nodeName == 'TD') var y = document.createElement('TD');

// get node above new textarea
var z = area.parentNode;
// get the new text in the textarea
y.innerHTML = area.value;
//  put the text between the re-created tag
z.insertBefore(y,area);
//  get rid of the text area
z.removeChild(area);
// how many buttons are there
numButtons = 3;
// get rid of each button
for (i=numButtons;i>=0;i--) {
z.removeChild(document.getElementsByTagName('button')[i]);
}
// not editing anymore
editing = false;
}
// when you click, Start
document.onclick = catchIt;

[emehrkay]

This seems to be the error

 

self.status = "Current Tag is:  " + window.event.srcElement.tagName;

 

what are you trying to do here? You cannot edit the status bar in browsers anymore

[optikalefx]

that code works fine.  It puts the current tag under mouse in the browser.  Its very helpful for me when developing this.  It works in the newest safari.