Home
Hello!
Yeah I know why do I need to do this, well
1) Never done it before
2) I am learning the concepts of HTML5/JS
3) I wanna make it look good and not sloppy, as learning sloppy will make you sloppy when you have a job to do.
What I have so far all works wonderfully except...
How do I create a button bar that wont click out of the ediable area when i click the button for eample paste, when i go to click it, it just clicks out of the ediable area and doesnt do anything.
Notice I did attempt to make the toolbar, but it didn't work. I am not worried about the pictures on the buttons just yet, but while I am thinking about it how do I resize them, the same as the rest? the width/height
Thanks!
My code:
Yeah I know why do I need to do this, well
1) Never done it before
2) I am learning the concepts of HTML5/JS
3) I wanna make it look good and not sloppy, as learning sloppy will make you sloppy when you have a job to do.
What I have so far all works wonderfully except...
How do I create a button bar that wont click out of the ediable area when i click the button for eample paste, when i go to click it, it just clicks out of the ediable area and doesnt do anything.
Notice I did attempt to make the toolbar, but it didn't work. I am not worried about the pictures on the buttons just yet, but while I am thinking about it how do I resize them, the same as the rest? the width/height
Thanks!
My code:
- Code:
<!Doctype>
<header>
<script type="text/javascript">
function ShowResult()
{
my_window = window.open("about:blank", "mywindow1");
my_window.document.write(x);
}
</script>
<style>
.selector
{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
</style>
</header>
<body>
<div class="selector">
<button onclick="ShowResult()">see result!</button><button onclick="document.execCommand('bold',false,null);">Bold</button>
<button onclick="document.execCommand('italic',false,null);">Italic</button> <button onclick="document.execCommand('saveas',false,null);">SaveAs</button><button onclick="document.execCommand('justifyCenter',false,null);"> Align Center</button>
<button onclick="document.execCommand('justifyLeft',false,null);">Align Left</button>
<button onclick="document.execCommand('justifyRight',false,null);"> Align Right</button>
<button onclick="document.execCommand('removeFormat',false,null);">Remove Format</button>
<button onclick="document.execCommand('cut',false,null);">Cut</button>
<button onclick="document.execCommand('copy',false,null);">Copy</button>
<button onclick="document.execCommand('paste',false,null);">Paste</button>
<button onclick="document.execCommand('undo',false,null);">Undo</button>
<button onclick="document.execCommand('redo',false,null);">Redo</button>
<button onclick="document.execCommand('insertimage',false,null);">Insert Image</button>
<button onclick="document.execCommand('createlink',false,null);">Link</button>
<button onclick="document.execCommand('Heading1',false,null);">Heading</button>
<button onclick="document.execCommand('increaseFontSize',false,null);">Increase Font Size </button>
</div>
<div contenteditable style="height:400px;width:750px;overflow:auto;" onblur="x=this.value">
Try editing this content... go on... select me with your cursor then write over the top of me!
</div>
</body>
</html>
