问题是我有一个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>