Question

如何在html中创建文本区域，用户可以在其中更改字体样式，大小和颜色。我花了大约一个小时寻找无济于事。我可以找到用户可以输入数据的简单文本框，但不能找到可以更改字体大小样式和颜色的文本框

感谢

Answer 1

尝试使用TinyMCE文本编辑器和自定义配置的工具栏（您应该关闭不需要的工具栏按钮）

Answer 2

我认为您正在寻找textarea（WYSIWYG）编辑。你可以通过谷歌搜索找到更多。试试这些，

<强> CKEditor

演示：http://ckeditor.com/demo

<强> TinyMCE

演示：http://www.tinymce.com/tryit/full.php

更多，请检查这些链接以获取更多编辑器

http://web.enavu.com/tutorials/14-jquery-and-non-jquery-rich-text-editors/

http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/

Answer 3

最基本的，你可能需要写一些javascript。

例如，您可能会有一个显示字体大小从4px到30px的下拉列表。例如：

<textarea id="textarea1">test 123</textarea>
<select onchange="textarea1.style.fontSize = this.value;">
     <option value="12px" selected="selected">12px</option>
     <option value="4px">4px</option>
     <option value="30px">30px</option>
</select>

要更改背景颜色，onchange代码为textarea1.style.backgroundColor = this.value;，红色可能为#ff0000，绿色为#00ff00，依此类推。

要更改样式，您可能需要一些if语句，例如：

if(this.value == 'u')
    textarea.style.textDecoration = 'underline';
else
    textarea.style.textDecoration = '';
if(this.value == 'i')
    textarea.style.fontStyle = 'italic';
else
    textarea.style.fontStyle = 'normal';
if(this.value == 'b')
    textarea.style.fontWeight = 'bold';
else
    textarea.style.fontWeight = '';

虽然您可能需要自定义上面的代码以满足组合样式，例如粗体斜体。

Answer 4

试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
  #container {width:100%; text-align:center;}

</style>
</head>

<body>
<div id="container">
<textarea name="mytextarea" cols="10" rows="10" style="font-family:comic sans ms"></textarea>
</div>
</body>
</html>

Answer 5

试试这个： -

$('btn1').click(function(){
$('textarea').css("font-style","italic");
}

我认为你必须为每个样式创建一个按钮列表，然后根据需要更改css方法的第二个参数。

HTML文本区域，具有自定义用户字体大小样式和颜色

5 个答案: