富文本编辑器高度的textarea [英] textarea of rich text editor height
问题描述
大家好
我试图从头开始创建一个用于娱乐和学习目的的富文本编辑器，我有一个小问题。
我已经达到了预期的功能，但我有一个小的UI故障。我希望Iframe中的文本区域自动调整其高度作为用户类型我不喜欢用户必须滚动以查看完整文档我觉得它删除了你看到的是什么元素看到一半的照片。我希望它有点像我现在在这里使用的那个，但我得到的是这个：
https://docs.google.com/file/d/0B0xtvsdSbHMnNVFoRDc4Y3VhWFk/edit?usp=sharing [ ^ ]
这里是html代码
Hi guys
I was trying to create a rich text editor for fun and learning purposes myself from scratch, and I have a minor problem.
I've come as far as making it function as expected but I have a small UI glitch. I want the text area inside the Iframe to auto-resize its height as user types I don't like how user has to scroll to view the full document I feel it removes the 'What u see is what you get' element when I only see half the picture. I want it to be kinda like the one I'm using now here but all I get is this:
https://docs.google.com/file/d/0B0xtvsdSbHMnNVFoRDc4Y3VhWFk/edit?usp=sharing[^]
And here's the html code
<blockquote class="FQ"><div class="FQA">Quote:</div><div id="bio" >
<h1>Biography</h1>
Enter Bio:
<div id="txtEd">
<form id="bioForm" method="post" action="" >
<ul>
<div id="wysiwyg_cp">
<a href="java<!-- no -->script:void(null)" önclick="iBold();" title="bold"><img src="Images/bold.gif" alt="bold" height="30" width="32"></a>
<a href="java<!-- no -->script:void(null)" önclick="iUnderline();" title="Underline"><img src="Images/underline.gif" alt="Underline" height="30" width="32"></a>
<a href="java<!-- no -->script:void(null)" önclick="iItalic();" title="Italics"><img src="Images/italic.gif" alt="Italics" height="30" width="32"></a>
<a href="java<!-- no -->script:void(null)" önclick="iFontSize();" title="Font Size"><img src="Images/icon_increase_font_size.gif" alt="Font Size" height="30" width="32"></a>
<a href="java<!-- no -->script:void(null)" önclick="show_menu();" title="Font Color"><img src="Images/font_color_icon.jpg" alt="Font Color" height="30" width="32"></a>
<div id="dropdown_menu" class="hidden_menu">
<ul>
<li href="javascript:void(null);" önclick="iForeColor('blue');" style="color: blue;">Blue</li>
<li href="javascript:void(null)" önclick="iForeColor('aqua');" style="color: aqua;">Aqua</li>
<li href="javascript:void(null)" önclick="iForeColor('blueviolet');" style="color: blueviolet;">blue violet</li>
<li href="javascript:void(null)" önclick="iForeColor('brown');" style="color: brown;">Brown</li>
</ul>
</div>
<a href="java<!-- no -->script:void(null)" önclick="iHorizontalRule();" title="Horizontal rule"><img src="Images/horizontalrule.gif" alt="Horizontal Rule" height="30" width="32"></a>
<a href="java<!-- no -->script:void(null)" önclick="iUnorderedList();" title="Unordered List"><img src="Images/bulletedlist.gif" alt="Unordered List" height="30" width="32"></a>
<a href="java<!-- no -->script:void(null)" önclick="iOrderedList();" title="Ordered List"><img src="Images/numberedlist.gif" alt="Ordered List" height="30" width="32"></a>
<a href="java<!-- no -->script:void(null)" önclick="iLink();" title="Link"><img src="Images/add-link.gif" alt="Link" height="30" width="32"></a>
<a href="java<!-- no -->script:void(null)" önclick="iUnLink();" title="Remove Link"><img src="Images/link_remove.gif" alt="Remove Link" height="30" width="32"></a>
<a href="java<!-- no -->script:void(null)" önclick="iImage();" title="Add Image"><img src="Images/camera-icon.gif" alt="Add Image" height="27" width="38"></a>
</div>
<!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it -->
<textarea style="display:none; box-sizing: content-box; -moz-box-sizing: border-box;" name="myTextArea" id="myTextArea" cols="100" rows="300"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:100%; height:100%; margin-bottom: 50%;"></iframe>
<!-- End replacing your normal textarea -->
<a href="java<!-- no -->script:void(null)" önclick="submit_form();" title="Save Bio" class="txtSavebtn" />Save </a>
</ul>
</form>
</div>
</div></blockquote>
当用户点击编辑Bio的链接时，隐藏页面上的所有其他div并显示dio div这个js函数被调用：
When the user clicks on a link to edit Bio that hides all other div's on the page and show the dio div this js function is called:
<blockquote class="FQ"><div class="FQA">Quote:</div>var $divState ={};
function showhide($id){
if(document.getElementById){
var $divid = document.getElementById($id);
$divState[$id] = ($divState[$id]) ? false : true;
for (var $div in $divState){
if ($divState[$div] && $div != $id){
document.getElementById($div).style.display = 'none';
$divState[$div] = false;
}
}
$divid.style.display = ($divid.style.display == 'block' ? 'none' : 'block');
}
if($id == 'bio' ) {
var el = document.getElementById('wysiwyg_cp');
el.style.display = 'block';
var el = document.getElementById('txtEd');
el.style.display = 'block';
iFrameOn();
}
}
function iFrameOn(){
richTextField.document.designMode = 'On';
}
</blockquote>
Thanks in advance ...
Thanks in advance ...
推荐答案
divState ={};
function showhide(
divState ={}; function showhide(
id){
if(document.getElementById){
var
id){ if(document.getElementById){ var
divid = document.getElementById(
divid = document.getElementById(
这篇关于富文本编辑器高度的textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
