Jump to content

N1CK3RS0N

Members
  • Posts

    103
  • Joined

  • Last visited

    Never

About N1CK3RS0N

  • Birthday 08/28/1987

Contact Methods

  • AIM
    N1CK3RS0N
  • MSN
    N1CK3RS0N@hotmail.com
  • Website URL
    http://nickerson.biz

Profile Information

  • Gender
    Male
  • Location
    Massachusetts

N1CK3RS0N's Achievements

Member

Member (2/5)

0

Reputation

  1. Hello all, I'm working on a rich-text editor, aka a WYSIWYG text editor. I'm doing some testing now with custom commands to create rich text. By default there is an execCommand function which lets you apply effects to rich text, but you have limited control on the HTML which is out put and how it works in general. This new method I thought of seems pretty effective. The problem at the moment is that it replaces all the text in the text area with the modified text you highlighted. I need it to replace just the highlighted text. I'm still new to JavaScript so please bear with me. function button(type) { var txt = ''; editor_body = document.getElementById('editor').contentWindow.document; if (editor_body.getSelection()) { txt = editor_body.getSelection(); } else if (editor_body.selection.createRange()) { txt = editor_body.selection.createRange(); } else return; switch (type) { case "bold": txt = '<b>' + txt + '</b>'; break case "italic": txt = '<i>' + txt + '</i>'; break case "underline": txt = '<u>' + txt + '</u>'; break case "strike": txt = '<strike>' + txt + '</strike>'; break case "supscript": txt = '<sup>' + txt + '</sup>'; break case "subscript": txt = '<sub>' + txt + '</sub>'; break case "alignleft": txt = '<div style="text-align: left;">' + txt + '</div>'; break case "aligncenter": txt = '<div style="text-align: center;">' + txt + '</div>'; break case "alignright": txt = '<div style="text-align: right;">' + txt + '</div>'; break case "alignjustify": txt = '<div style="text-align: justify;">' + txt + '</div>'; break case "ol": txt = '<ol>' + txt + '</ol>'; break case "ul": txt = '<ul>' + txt + '</ul>'; break case "insertlink": insertlink = prompt("Enter image URL:", "http://"); if ((insertlink != null) && (insertlink != "")) {txt = '<a href="' + insertlink + '">' + txt + '</a>'; } break case "insertimage": insertimage = prompt("Enter image URL:", "http://"); if ((insertimage != null) && (insertimage != "")) {txt = '<img src="' + insertimage + '">'; } break case 'insertvideo': insertvideo = prompt("Enter video URL:", "http://"); if ((insertvideo != null) && (insertvideo != "")) {txt = '<object type="application/x-shockwave-flash" data="' + insertvideo + '" width="640" height="385"><param name="movie" value="' + insertvideo + '" /></object>';} break } editor_body.body.innerHTML = txt; document.getElementById('editor').contentWindow.focus(); } function Start() { var e; document.getElementById('editor').contentWindow.document.designMode = "on"; try { document.getElementById('editor').contentWindow.document.execCommand("undo", false, null); editormode = "true"; } catch (e) { editormode = "false"; } if (document.addEventListener) { document.addEventListener("mouseup", dismissmenu, true); document.getElementById("editor").contentWindow.document.addEventListener("mouseup", dismissmenu, true); document.addEventListener("keypress", dismissmenu, true); document.getElementById("editor").contentWindow.document.addEventListener("keypress", dismissmenu, true); } else if (document.attachEvent) { document.attachEvent("mouseup", dismissmenu, true); document.getElementById("editor").contentWindow.document.attachEvent("mouseup", dismissmenu, true); document.attachEvent("keypress", dismissmenu, true); document.getElementById("editor").contentWindow.document.attachEvent("keypress", dismissmenu, true); } }
  2. I'm still new to JS. Working on a WYSIWYG text editor. Was wondering if anyone had any ideas of how I could make it toggle between WYSIWYG and BB code.
  3. Exactly what I did and here is the problem. You click bold, now the bold button class is shown as active. Now when you click into an area with not-bold text, it still shows as active. So the real way to do this would be to find what effects are currently applied to what you are typing, and then change the class based on that. Only problem is I don't know how to find what effects are applied to the current text. Find how to do that and we got ourselves an answer.
  4. I got my WYSIWYG text editor working pretty good. I'm trying to figure out how I should make the buttons classes toggle. Heres the demo. http://www.cigarcompendium.com/WYSIWYG/index.html I want it so when bold is currently enabled on the text you are typing then the bold button class will change to active. Just not sure how to check if that effect is currently enabled in the editor.
  5. Interesting. Just curious but why would you not want FF users to be able to access a site?
  6. Huh? HTML does not use variables. HTML is just a markup language. Here is a very rudimentary example of option 1 Epic. Thank you man. I owe ya one All thats left now is to get the div to position itself based on which was clicked. And WYSIWYG editor pretty much done for the JS part. BTW, should i always add that return; to the end of my functions?
  7. Thanks. I'm kinda confused a bit. Sorta understand what you mean but kinda confused. I've been doing JavaScript for like a week now. Just sort of editing different things from different guides and trying to optimize it for minimal coding. Is it to much to ask for you to show me what you mean by showing me the coding? Doesn't seem all that complex, I'm just not fully clear on what you mean and how I should do it. I'm more of a visual learner It does kind of sound like what I'm trying to do in my 2nd post. The problem is the HTML already uses a variable in the function for the color selection. I didn't know how to use a variable from the HTML and from the JS in 1 function. Thanks for the help though, appreciate it.
  8. I tried doing something like this, but had no luck... function colorlist(a) { var colortype = a; document.getElementById('colorlist').style.visibility="visible"; document.getElementById('editor').contentWindow.focus(); coloroption(colortype); } function coloroption(colortype) { if (colortype == "forecolor") { function color(color) { document.getElementById('editor').contentWindow.document.execCommand("forecolor", false, color); document.getElementById('colorpalette').style.visibility="hidden"; document.getElementById('editor').contentWindow.focus(); } } else if (colortype =="hilitecolor") { function color(color) { document.getElementById('editor').contentWindow.document.execCommand("hilitecolor", false, color); document.getElementById('colorpalette').style.visibility="hidden"; document.getElementById('editor').contentWindow.focus(); } } }
  9. Hello, I'm working on my first JavaScript project at the moment. I'm working on making a WYSIWYG text-editor. At the moment I'm trying to figure out how to get my text color changer to work. Heres the demo. http://www.cigarcompendium.com/WYSIWYG/index.html What I am trying to do is have them click the button for either text color or background color, and then it opens up the color window. That part works. What I'm having trouble is passing a variable into the second function which controls what color they select and applies the changes to the text. Basically I want the first function to tell the color window to appear and tell the second function which color they want to change, foreground or background color. You can view the HTML and JS on that demo. Thanks
  10. Hello, I'm having some trouble getting the positioning of this JS to work. if ((this.id == "forecolor") || (this.id == "hilitecolor")) { parent.command = this.id; buttonElement = document.getElementById(this.id); document.getElementById("colorpalette").style.left = getOffsetLeft(buttonElement); document.getElementById("colorpalette").style.top = getOffsetTop(buttonElement) + buttonElement.offsetHeight; document.getElementById("colorpalette").style.visibility="visible"; } The problem is when I declare a doctype for the HTML page. For some reason the positioning stops working. It positions an iframe on the button that was clicked. Ideas?
  11. Well I been having a series of problems and it comes down to using the following. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Currently I'm working on a WYSIWYG text editor. Without DOCTYPE, I cannot use div:hover CSS for mouse over effects on a DIV. And with DOCTYPE, the positioning is way off on the pop-ups for color selector. Here is a demo of the WYSIWYG text-editor. http://www.cigarcompendium.com/WYSIWYG/index.html If you view source and save it locally and make some tweaks to try it out, you can see the problems that occur when you add and remove the DOCTYPE. Appreciate any help. Thanks
  12. I'm working on a WYSIWYG editor. I'm not that great with JS at the moment. I'm trying to make the buttons on the toolbar turn a color if they are enabled and then shut off when disabled. For example. If you click bold to enable bold font weight, it will turn the background of the button darker while enabled. Then I want it to return to normal when clicked again to disable the bold font weight. Using "this.style.background" in the function that handles the things onclick works, but I cannot get it to disable when u click again.
  13. Hello, I was wondering if anyone knows how to create a WYSIWYG text editor using JavaScript and HTML. If there are any useful tutorials out there please feel free to share. I'm not interested in an already coded one. I would like to create my own, somewhat of learning experience. Thanks
  14. According to W3C. Any other solutions you would think to work around this? Other than using a table.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.