如何保留html textarea的格式

时间:2015-03-31 18:09:19

标签: javascript html editor textarea

问题是我有一个textarea,如果文本被复制并粘贴到word文档,它将丢失所有格式,如字体和颜色,只保留明文。我很清楚Ckeditor和nicedit,但我正在尝试自己实现这样的编辑器。 问题是我的方法应该是什么? 我应该从哪个方向开始?

注意:我使用的是javascript

代码在

之下
<html>
<head>
<script src="index.js" type="text/javascript"></script>
<link rel="index.css" type="text/css">
    <style>


    textarea {
    resize: none;
    width: 80%;
    height: 600px;    
        }
#dock{

width: 80%;
height: 61px;



background: rgb(246, 242, 250);

-moz-box-shadow:  2px 0px 4px 0px rgb(128,128,128);
-webkit-box-shadow:  2px 0px 4px 0px rgb(128,128,128);
box-shadow:  2px 0px 4px 0px rgb(128,128,128);

}
.btn {
border:1px solid #495267; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #606c88; background-image: -webkit-gradient(linear, left top, left bottom, from(#606c88), to(#3f4c6b));
 background-image: -webkit-linear-gradient(top, #606c88, #3f4c6b);
 background-image: -moz-linear-gradient(top, #606c88, #3f4c6b);
 background-image: -ms-linear-gradient(top, #606c88, #3f4c6b);
 background-image: -o-linear-gradient(top, #606c88, #3f4c6b);
 background-image: linear-gradient(to bottom, #606c88, #3f4c6b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#606c88, endColorstr=#3f4c6b);
}

.btn:hover {
 border:1px solid #363d4c;
 background-color: #4b546a; background-image: -webkit-gradient(linear, left top, left bottom, from(#4b546a), to(#2c354b));
 background-image: -webkit-linear-gradient(top, #4b546a, #2c354b);
 background-image: -moz-linear-gradient(top, #4b546a, #2c354b);
 background-image: -ms-linear-gradient(top, #4b546a, #2c354b);
 background-image: -o-linear-gradient(top, #4b546a, #2c354b);
 background-image: linear-gradient(to bottom, #4b546a, #2c354b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4b546a, endColorstr=#2c354b);
}
#b1{
float:left;
width: 10px;
height: 25px;
line-height: 5px; /* <- changed this */
box-sizing: border-box;
margin-left: 3px;
margin-top: 3px;
}

    </style>
</head>
<body> 
<div id="editor">
        <center>
        <div id="dock">
        <button type="button" class="btn" id="b1" onclick="myFunction()">B</button>
        <button type="button" class="btn" id="b1" onclick="myFunction()"><i>i</i></button>
        <button type="button" class="btn" id="b1" onclick="myFunction()">U</button>
        </div>
        <textarea id="textarea-1" rows="20" cols="70"></textarea>
        </center>


</div>
</body>
</html>

0 个答案:

没有答案