how to preserve formatting of html textarea

问题

the question is i have a textarea, from which if the text is copied and pasted to a word document it looses all formatings like fonts and colors only plaintext is retained. I am alrewady aware of Ckeditor and nicedit but i am trying to make my own implementattion of such editor . the question is what should be my approach? which direction i should start?

Note: i am using javascript

the code is below

<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>

来源：https://stackoverflow.com/questions/29375483/how-to-preserve-formatting-of-html-textarea

标签

javascript

html

editor

textarea