Fatal编程技术网
  • javascript/
  • Javascript 如何保留html文本区域的格式

Javascript 如何保留html文本区域的格式

javascript html editor

Javascript 如何保留html文本区域的格式,javascript,html,editor,textarea,Javascript,Html,Editor,Textarea,问题是我有一个文本区，如果文本被复制并粘贴到word文档中，它会释放所有格式（如字体和颜色），只保留纯文本。我早就知道Ckeditor和nicedit，但我正在尝试自己实现这种编辑器。 问题是我的方法应该是什么？ 我应该从哪个方向出发 注意：我使用的是javascript 代码如下 <html> <head> <script src="index.js" type="text/javascript"></script> <link rel="

问题是我有一个文本区，如果文本被复制并粘贴到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>


文本区{
调整大小：无；
宽度：80%；
高度：600px；
}
#码头{
宽度：80%；
高度：61px；
背景：rgb（246242 250）；
-moz盒阴影：2px 0px 4px 0px rgb（128128）；
-webkit盒阴影：2px 0px 4px 0px rgb（128128）；
盒影：2px 0px 4px 0px rgb（128128）；
}
.btn{
边框：1px实心#495267；-webkit边框半径：3px；-moz边框半径：3px；边框半径：3px；字体大小：12px；字体系列：arial，helvetica，无衬线；填充：10px 10px 10px 10px 10px；文本装饰：无；显示：内联块；文本阴影：-1px-1px 0 rgba（0,0,0.3）；字体重量：粗体；颜色：#FFFFFF；
背景颜色：#606c88；背景图像：-webkit渐变（线性、左上、左下、从（#606c88）到（#3f4c6b））；
背景图像：-webkit线性渐变（顶部，#606c88，#3f4c6b）；
背景图像：-moz线性梯度（顶部，#606c88，#3f4c6b）；
背景图像：-ms线性梯度（顶部，#606c88，#3f4c6b）；
背景图像：-o-线性梯度（顶部，#606c88，#3f4c6b）；
背景图像：线性渐变（到底部，#606c88，#3f4c6b）；过滤器：progid:DXImageTransform.Microsoft.gradient（GradientType=0，startColorstr=#606c88，endColorstr=#3f4c6b）；
}
.btn:悬停{
边框：1px实心#363d4c；
背景色：#4b546a；背景图像：-webkit渐变（线性、左上、左下、从（#4b546a）到（354B））；
背景图像：-webkit线性渐变（顶部，#4b546a，354b）；
背景图像：-moz线性梯度（顶部，#4b546a，354b）；
背景图像：-ms线性梯度（顶部，#4b546a，354b）；
背景图像：-o-线性梯度（顶部，#4b546a，354b）；
背景图像：线性渐变（到底部，#4b546a，354b）；过滤器：progid:DXImageTransform.Microsoft.gradient（GradientType=0，startColorstr=#4b546a，endColorstr=Ţ2c354b）；
}
#b1{
浮动：左；
宽度：10px；
高度：25px；

行高：5px；/*使用类似于或的东西。本机
元素无法处理奇特的脚本。问题是，这正是我想知道的，ckeditor或tinymce hanfdles是如何格式化的？他们的方法是什么？这样我就可以自己实现了。您正在谈论一个相当大的操作来重新创建这些东西之一。My com我不确定这是否值得我们花时间。最常见的方法（据我所知）是捕获文本区域的所有更改，并使用iframe显示格式化文本。在对编辑器进行更改时，使用您的控制台并调试编辑器的运行情况会很有帮助。我只是一名学生，这是我的学习阶段，我有一个完整的夏季任务，所以我想将此任务作为一个项目来完成，所以时间不多这不是一个问题。我知道这是重新发明一个轮子，但这只是因为学习而不是为了生产环境。你能更详细地阐述一下你的方法吗