写在前面
 
今天想借鉴一下网络上文章，摘录（copy）一部分内容，结果竟然弹出收费窗口，这我哪里答应！下面，就把一个生活小妙招交给大家！
 
问题解决
 
打开网页编辑器（ctrl + shift + i）
 
点击右上方的设置按钮
 
找到Disable JavaScript，并勾选上
此时再复制文本，复制成功！

网页中插入文本编辑器 
 http://kindeditor.net/demo.php 
 效果： 
 
 
编辑器使用方法： 
 1. 下载编辑器
 
下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。
 
下载页面: http://www.kindsoft.net/down.php
 
2.部署编辑器
 
解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/
 
Note 
 您可以根据需求删除以下目录后上传到服务器。
 
asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件
 
3.修改HTML页面
 
在需要显示编辑器的位置添加textarea输入框。
 
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>
 
Note
 
id在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用 编辑器初始化参数 设置。
 
在该HTML页面添加以下脚本:
 
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });
</script>
 
Note
 
第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 。
 
var options = {
        cssPath : '/css/index.css',
        filterMode : true
};
var editor = K.create('textarea[name="content"]', options);
 
获取HTML数据
 
// 取得HTML内容
html = editor.html();

// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery

// 设置HTML内容
editor.html('HTML内容');
 
Note
 
KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要执行
sync() 将HTML数据设置到原来的textarea,KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加sync函数，所以用form方式提交数据，不需要手动执行sync()函数。
KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode
 
// 关闭过滤模式，保留所有标签
KindEditor.options.filterMode = false;

KindEditor.ready(function(K)) {
        K.create('#editor_id');
}
 
其他参考：http://blog.csdn.net/u014695532/article/details/51452841

文本编辑器应用总结
 
 
一． lhgeditor文本编辑器
 lhgeditor组件文件结构：
 1. lhgeditor.js： 组件的核心JS文件
 2. lhgeditor.css：组件的样式表文件
 3. images：组件所需的图片都在此文件夹中
 以上三个文件为组件所必须的三个文件，组件包中其它以“_”开头的文件为示例的演示文件，实际使用中不需要这些文件。当然框架核心文件lhgcore.js是每个组件都必须用到的文件，记得加载组件前先要加载此文件。
 lhgeditor组件使用说明：
 1. 在调用组件的页面加载lhgcore.js和lhgeditor.js两个文件。
 2. 在window.onload函数里加入J.editor.add(编辑器的id).init();例：
 
 
 
<script type="text/javascript">
window.onload = function()
{
    J.editor.add('elm1').init();
}
</script>
<form action="_postdate.asp" method="post" target="_blank">
<div>
<textarea name="elm1" id="elm style="width:600px;height:300px;"> 
lhgeditor小型在线编辑器</textarea>
</div>
<input type="submit" value="Submit" />
</form>

 
 

 
 

 
 

 
 

 
 
 
 
 
  
 
 
 
 二． nicEdit文本编辑器
 
 <script type="text/javascript">
 
 bkLib.onDomLoaded(function() {
 
 new nicEditor().panelInstance('area1');
 
 new nicEditor({fullPanel : true}).panelInstance('area2');
 
 new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');
 
 new nicEditor({buttonList :['fontSize','bold','italic','underline','strikeThrough','subscript',
 
 ' superscript','html','image']}).panelInstance('area4');
 
 new nicEditor({maxHeight : 100}).panelInstance('area5');
 
 });
 
 </script>
 
 //默认模式
 
 //new nicEditor().panelInstance('area1');
 
 <textarea cols="50" id="area1"></textarea>
 
 
 //All Available Buttons
 
 //new nicEditor({fullPanel : true}).panelInstance('area2');
 
 <textarea cols="60" id="area2">Some Initial Content was in this textarea</textarea>
 
 
 
  
 
 //new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');
 
 <textarea cols="50" id="area3"></textarea>
 
 
 
 
 //自定义按钮
 
 //new nicEditor({buttonList :['fontSize','bold','italic','underline','strikeThrough','subscript',
 
 'superscript','html','image']}).panelInstance('area4');
 
 <textarea cols="50" id="area4">HTML <b>content</b> <i>default</i> in textarea</textarea>
 
 
 
 
 
 //设置文本编辑器的最大高度
 
 //new nicEditor({maxHeight : 100}).panelInstance('area5');
 
 <textarea style="height: 100px;" cols="50" id="area5">
 
          HTML <b>content</b>  <i>default</i> in textarea
 
 </textarea>
 
 
 
 
 
 三． kindeditor文本编辑器
 
 (1) 支持多种语言php、asp
 
 (2) 功能强大
 
 默认模式
 
 <script charset="utf-8" src="../kindeditor-min.js"></script>
 
 <script charset="utf-8" src="../lang/zh_CN.js"></script>
 
 <script>
 
 var editor;
 
 KindEditor.ready(function(K) {
 
 editor = K.create('textarea[name="content"]', {
 
 resizeType : 1,
 
 allowPreviewEmoticons : false,
 
 allowImageUpload : false,
 
 items : ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic','underline','removeformat', '|', 'justifyleft','justifycenter',       'justifyright', 'insertorderedlist','insertunorderedlist', '|',  'emoticons', 'image', 'link']
 
 });
 
 });
 
 </script>
 
 <textarea  name="content"  style="width:700px;height:200px;visibility:hidden;">
 
      KindEditor
 
 </textarea>
 
 
 
 
 
 Multi Language Examples(多语言)
 
 <script charset="utf-8" src="../kindeditor-min.js"></script>
 
 <script>
 
 var editor;
 
 KindEditor.ready(function(K) {
 
 K('select[name=lang]').change(function() {
 
 if (editor) {
 
 editor.remove();
 
 editor = null;
 
 }
 
 editor = K.create('textarea[name="content"]', {
 
 langType : this.value
 
 });
 
 });
 
 K('select[name=lang]').change();
 
 });
 
 </script>
 
 <form>
 
 <p>
 
 <select name="lang">
 
 <option value="en">English</option>
 
 <option value="zh_CN">简体中文</option>
 
 <option value="zh_TW">繁體中文</option>
 
 <option value="ar">Arabic</option>
 
 </select>
 
 </p>
 
   <textarea name="content" style="width:800px;height:200px;"></textarea>
 
 </form>
 
 
 
 
 
 粘贴设置：
 
 <script charset="utf-8" src="../kindeditor-min.js"></script>
 
 <script charset="utf-8" src="../lang/zh_CN.js"></script>
 
 <script>
 
 KindEditor.ready(function(K) {
 
 K.create('#content1', {
 
 pasteType : 0
 
 });
 
 K.create('#content2', {
 
 pasteType : 1
 
 });
 
 K.create('#content3', {
 
 pasteType : 2
 
 });
 
 });
 
 </script>
 
    禁止粘贴
 
 <textarea  id="content1" name="content" style="width:700px;height:200px;  
 
 visibility:hidden;">
 
 </textarea>
 
 
 
 
 
        纯文本粘贴
 
         <textarea  id="content2" name="content" style="width:700px;height:200px;  
 
   visibility:hidden;">
 
 </textarea>
 
 
 
 
 
 HTML粘贴
 
 <textarea  id="content3" name="content"  style="width:700px;height:200px;  
 
 visibility:hidden;"></textarea>
 
 
 
 
 
 自定义插件
 
 <script charset="utf-8" src="../kindeditor-min.js"></script>
 
 <script charset="utf-8" src="../lang/zh_CN.js"></script>
 
 <script>
 
 // 自定义插件 #1
 
 KindEditor.lang({
 
 example1 : '插入HTML'
 
 });
 
 KindEditor.plugin('example1', function(K) {
 
 var self = this, name = 'example1';
 
 self.clickToolbar(name, function() {
 
 self.insertHtml('<strong>测试内容</strong>');
 
 });
 
 });
 
 // 自定义插件 #2
 
 KindEditor.lang({
 
 example2 : 'CLASS样式'
 
 });
 
 KindEditor.plugin('example2', function(K) {
 
 var self = this, name = 'example2';
 
 function click(value) {
 
 var cmd = self.cmd;
 
 if (value === 'adv_strikethrough') {
 
 cmd.wrap('<span style="background-color:#e53333;
 
 text-decoration:line-through;"></span>');
 
 } else {
 
 cmd.wrap('<span class="' + value + '"></span>');
 
 }
 
 cmd.select();
 
 self.hideMenu();
 
 }
 
 self.clickToolbar(name, function() {
 
 var menu = self.createMenu({
 
 name : name,
 
 width : 150
 
 });
 
 menu.addItem({
 
 title : '红底白字',
 
 click : function() {
 
 click('red');
 
 }
 
 });
 
 menu.addItem({
 
 title : '绿底白字',
 
 click : function() {
 
 click('green');
 
 }
 
 });
 
 menu.addItem({
 
 title : '黄底白字',
 
 click : function() {
 
 click('yellow');
 
 }
 
 });
 
 menu.addItem({
 
 title : '自定义删除线',
 
 click : function() {
 
 click('adv_strikethrough');
 
 }
 
 });
 
 });
 
 });
 
 KindEditor.ready(function(K) {
 
 K.create('#content1', {
 
 cssPath : ['../plugins/code/prettify.css', 'index.css'],
 
 items : ['source', 'removeformat', 'example1', 'example2',  'code']
 
 });
 
 });
 
 </script>
 
 <textarea id="content1" name="content" style="width:700px;height:200px;  visibility:hidden;"></textarea>
 
 
 
 
 单独调用组件
 
 上传图片弹出框
 
 <script src="../kindeditor.js"></script>
 
 <script src="../lang/zh_CN.js"></script>
 
 <script>
 
 KindEditor.ready(function(K) {
 
 var editor = K.editor({
 
 allowFileManager : true
 
 });
 
 K('#image').click(function() {
 
 editor.loadPlugin('image', function() {
 
 editor.plugin.imageDialog({
 
 imageUrl : K('#url').val(),
 
 clickFn : function(url, title, width, height, border, align) {
 
 K('#url').val(url);
 
 editor.hideDialog();
 
 }
 
 });
 
 });
 
 });
 
 });
 
 </script>
 
 <input type="text" id="url" value="" /> <input type="button" id="image" value="选择 图片" />
 
 
 
 
 
 取色器
 
 <script src="../kindeditor-min.js"></script>
 
 <script>
 
 KindEditor.ready(function(K) {
 
 var colorpicker;
 
 K('#colorpicker').bind('click', function(e) {
 
 if (colorpicker) {
 
 colorpicker.remove();
 
 colorpicker = null;
 
 }
 
 var colorpickerPos = K('#colorpicker').pos();
 
 colorpicker = K.colorpicker({
 
 x : colorpickerPos.x,
 
 y : colorpickerPos.y + K('#colorpicker').height(),
 
 z : 19811214,
 
 selectedColor : 'default',
 
 noColor : '无颜色',
 
 click : function(color) {
 
 K('#color').val(color);
 
 colorpicker.remove();
 
 colorpicker = null;
 
 }
 
 });
 
 });
 
 });
 
 </script>
 
 <input type="text" id="color" value="" /> <input type="button" id="colorpicker" value="打开取色器" />
 
 
 
 
 
  
 
 四． jsp基本编辑器
 
 使用步骤：
 
 1.把edit.htm 修改为 edit.jsp
 
 2.把想要使用的地方包含edit.jsp就行了
 
   代码：
 
 <!--富文本编辑器-->
 
    <%@ include file="edit.jsp"%>  
 
 注意事项：
 
 在需要引入编辑器的页面中的onload事件，要结合edit.jsp中的事件
 
 五． Xheditor
 
 (1) 解压压缩文件，将其中的xheditor-zh-cn.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹上传到网站相应目录
 
 注：如果您网站中没有使用jQuery框架，也请一并上传jquery文件夹中的jquery-1.4.4.min.js
 
  
 
 (2) 在相应html文件的</head>之前添加
 
 <script type="text/javascript" src="http://static.xxx.com/js/jquery.js"></script>
 
 <script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script>
 
 注：如果jQuery之前已经在项目页面中使用，请勿重复添加引用代码
 
 (3). 
 
 方法1：在textarea上添加属性： class="xheditor"
 
 例如：<textarea name="content" class="xheditor">test</textarea>
 
 方法2：在您的页面初始JS代码里加上： $('#elm1').xheditor();
 
 $('#elm1').xheditor()；
 
 例如：
 
 $({
 
 $('#elm1').xheditor()；
 
 });
 
 相应的卸载编辑器的代码为
 
 $('#elm1').xheditor(false)；
 
 例：
 
  
 
 自定义按钮
 
 <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>
 
 <script type="text/javascript" src="../xheditor-1.1.12-zh-cn.min.js"></script>
 
 <script type="text/javascript">
 
 $(pageInit);
 
 function pageInit()
 
 {
 
 $.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});
 
 $('#elm1').xheditor({tools:'full'});
 
 $('#elm2').xheditor({tools:'mfull'});
 
 $('#elm3').xheditor({tools:'simple'});
 
 $('#elm4').xheditor({tools:'mini'});
 
 $('#elm5').xheditor({tools:'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About'});
 
 $('#elm6').xheditor({tools:'Cut,Copy,Paste,Pastetext,/,Source,Fullscreen,About'});
 
 }
 
 function submitForm(){$('#frmDemo').submit();}
 
 </script>
 
 1,full(完全):<br />
 
 <textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">
 
    当前实例调用的Javascript源代码为：
 
 </textarea>
 
 
 
 
 
 2,mfull(多行完全):<br />
 
 <textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">
 
    当前实例调用的Javascript源代码为：
 
 </textarea>
 
 
 
 
 
 3,simple(简单):<br />
 
 <textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">
 
    当前实例调用的Javascript源代码为：
 
 </textarea>
 
 
 
 
 
 4,mini(迷你):<br />
 
 <textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">
 
    当前实例调用的Javascript源代码为：
 
 </textarea>
 
 
 
 
 
  5,custom(自定义):<br />
 
 <textarea id="elm5" name="elm5" rows="8" cols="80" style="width: 40%">
 
    当前实例调用的Javascript源代码为：
 
 </textarea>
 
 
 
 
 
 6,自定义多行模式:<br />
 
    <textarea id="elm6" name="elm6" rows="8" cols="80" style="width: 40%">
 
        当前实例调用的Javascript源代码为
 
    </textarea>
 
 
 
 
 
 皮肤选择
 
 注：为了保持项目精简，同一个页面只能调用一个皮肤，当同一界面同时调用多个 皮肤时，最后一个皮肤的按钮面板样式会影响之前的
 
 <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>
 
 <script type="text/javascript" src="../xheditor-1.1.12-zh-cn.min.js"></script>
 
 <script type="text/javascript">
 
 $(pageInit);
 
 function pageInit()
 
 {
 
 $.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});
 
 $('#elm1').xheditor({skin:'default'});
 
 $('#elm2').xheditor({skin:'o2007blue'});
 
 $('#elm3').xheditor({skin:'o2007silver'});
 
 $('#elm4').xheditor({skin:'vista'});
 
 $('#elm5').xheditor({skin:'nostyle'});
 
 }
 
 function submitForm(){$('#frmDemo').submit();}
 
 </script>
 
 1,默认皮肤:<br/>
 
 <textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">
 
    当前实例调用的Javascript源代码为：
 
 </textarea>
 
 
 
 
 
 2,Office 2007 蓝色:<br />
 
 <textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">
 
     当前实例调用的Javascript源代码为：
 
 </textarea>
 
 
 
 
 
 3,Office 2007 银白色:<br />
 
 <textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">
 
    当前实例调用的Javascript源代码为
 
 </textarea>
 
 
 
 
 
 4,Vista:<br />
 
 <textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">
 
    当前实例调用的Javascript源代码为
 
 </textarea>
 
 
 
 
 
 5,NoStyle:<br />
 
 <textarea id="elm5" name="elm5" rows="8" cols="80" style="width: 40%">
 
     当前实例调用的Javascript源代码为
 
 </textarea>
 
 
 
 
 
  
 
 六． Tinymce
 
 使用：
 
 tinyMCE.init({
 
 mode : "textareas",
 
 theme : "simple" //模式
 
 skin : "o2k7",//word
 
 });
 
 默认模式
 
 <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
 
 <script type="text/javascript">
 
 tinyMCE.init({
 
 mode : "textareas",
 
 theme : "simple"
 
 });
 
 </script>
 
 <textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">
 
    This is some example text that you can edit inside the <strong>TinyMCE  editor
 
 </textarea>
 
 
 
 
 
 皮肤设置
 
 <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
 
 <script type="text/javascript">
 
 tinyMCE.init({
 
 // General options
 
 mode : "exact",
 
 elements : "elm1",
 
 theme : "advanced",
 
 plugins :"autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,
 
 advlink,emotions,iespell,insertdatetime,preview,media,searchreple,print,contextmenu,paste,directionality,fullscreen,noneditable,
 
 visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosa",
 
  
 
 // Theme options
 
      theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,
 
       justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,
 
       fontselect,fontsizeselect",
 
     theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,
 
 numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,prevw,|,forecolor,backcolor",
 
 theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,
 
 charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",
 
 theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,
 
 styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,no,
 
 template,pagebreak,restoredraft",
 
     theme_advanced_toolbar_location : "top",//工具栏位置
 
     theme_advanced_toolbar_align : "left",//工具栏对齐方式
 
     theme_advanced_statusbar_location : "bottom",//状态显示栏的位置
 
 theme_advanced_resizing : true,
 
 // Example content CSS (should be your site CSS)
 
 content_css : "css/content.css",
 
 // Drop lists for link/image/media/template dialogs
 
    template_external_list_url : "lists/template_list.js",
 
    external_link_list_url : "lists/link_list.js",
 
    external_image_list_url : "lists/image_list.js",
 
    media_external_list_url : "lists/media_list.js",
 
 // Replace values for the template plugin
 
 template_replace_values : {
 
 username : "Some User",
 
 staffid : "991234"
 
 }
 
 });
 
 </scritp>
 
 <textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">
 
 
 
 
 
 <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
 
 <script type="text/javascript">
 
 // O2k7 skin
 
 tinyMCE.init({
 
 // General options
 
 mode : "exact",
 
 elements : "elm2",
 
 theme : "advanced",
 
 skin : "o2k7",
 
 plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,
 
 emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreg,xhtmlxtras,template,inlinepopups,autosave",
 
  
 
 // Theme options
 
 theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,
 
 justifyleft,justifycenter,justifyright,justifyfull,styleselect,
 
 formatselect,fontselect,fontsizeselect",
 
 theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,
 
 bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
 
 theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,
 
 charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",
 
 theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,
 
 styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,
 
 nonbreaking,template,pagebreak,restoredraft",
 
 theme_advanced_toolbar_location : "top",
 
 theme_advanced_toolbar_align : "left",
 
 theme_advanced_statusbar_location : "bottom",
 
 theme_advanced_resizing : true,
 
  
 
 // Example content CSS (should be your site CSS)
 
 content_css : "css/content.css",
 
 // Drop lists for link/image/media/template dialogs
 
 template_external_list_url : "lists/template_list.js",
 
 external_link_list_url : "lists/link_list.js",
 
 external_image_list_url : "lists/image_list.js",
 
 media_external_list_url : "lists/media_list.js",
 
 // Replace values for the template plugin
 
 template_replace_values : {
 
 username : "Some User",
 
 staffid : "991234"
 
 }
 
 });
 
 </script>
 
 <textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">
 
      This is some example text that you can edit inside the <strong>TinyMCE  editor;.
 
 </textarea>
 
 
 
 
 
 <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
 
 <script type="text/javascript">
 
 // O2k7 skin (silver)
 
 tinyMCE.init({
 
 // General options
 
 mode : "exact",
 
 elements : "elm3",
 
 theme : "advanced",
 
 skin : "o2k7",
 
 skin_variant : "silver",
 
 plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,
 
 iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,
 
 paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,
 
 xhtmlxtras,template,inlinepopups,autosave",
 
  
 
 // Theme options
 
 theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough
 
 ,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
 
 theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,
 
 bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,
 
 inserttime,preview,|,forecolor,backcolor",
 
 theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,
 
 sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
 
 theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,
 
 styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchas,nonbreaking,template,pagebreak,restoredraft",
 
 theme_advanced_toolbar_location : "top",
 
 theme_advanced_toolbar_align : "left",
 
 theme_advanced_statusbar_location : "bottom",
 
 theme_advanced_resizing : true,
 
  
 
 // Example content CSS (should be your site CSS)
 
 content_css : "css/content.css",
 
 // Drop lists for link/image/media/template dialogs
 
 template_external_list_url : "lists/template_list.js",
 
 external_link_list_url : "lists/link_list.js",
 
 external_image_list_url : "lists/image_list.js",
 
 media_external_list_url : "lists/media_list.js",
 
 // Replace values for the template plugin
 
 template_replace_values : {
 
 username : "Some User",
 
 staffid : "991234"
 
 }
 
 });
 
 </script>
 
 <textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">
 
     This is some example text that you can edit inside the <strong>TinyMCE 
 
 </textarea>
 
 
 
 
 
 <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
 
 <script type="text/javascript">
 
 // O2k7 skin (silver)
 
 tinyMCE.init({
 
 // General options
 
 mode : "exact",
 
 elements : "elm4",
 
 theme : "advanced",
 
 skin : "o2k7",
 
 skin_variant : "black",
 
 plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,
 
 iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,
 
 paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,
 
 xhtmlxtras,template,inlinepopups,autosave",
 
  
 
 // Theme options
 
 theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough
 
 ,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
 
 theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace
 
 ,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,
 
 redo,|,link,unlink,anchor,image,cleanup,help,code,|,
 
 insertdate,inserttime,preview,|,forecolor,backcolor",
 
 theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,
 
 sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
 
 theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute
 
 ,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
 
 theme_advanced_toolbar_location : "top",
 
 theme_advanced_toolbar_align : "left",
 
 theme_advanced_statusbar_location : "bottom",
 
 theme_advanced_resizing : true,
 
 // Example content CSS (should be your site CSS)
 
 content_css : "css/content.css",
 
 // Drop lists for link/image/media/template dialogs
 
 template_external_list_url : "lists/template_list.js",
 
 external_link_list_url : "lists/link_list.js",
 
 external_image_list_url : "lists/image_list.js",
 
 media_external_list_url : "lists/media_list.js",
 
 // Replace values for the template plugin
 
 template_replace_values : {
 
 username : "Some User",
 
 staffid : "991234"
 
 }
 
 });
 
 </script>
 
 <textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">
 
     This is some example text that you can edit inside the ;
 
 </textarea>
 
 
 
 
 
 七． ueditor1
 
 1.避免了重复加载源码高亮的核心代码
 
 2.修复了word粘贴table过滤出错问题
 
 3.修复插入地图会出现style="undefined"的问题
 
 4.优化了list，多个相邻的属性一直的list会合并
 
 5.可以在列表中的一行里产生多行的效果（通过回车再回退操作），类似office的效果
 
 6.添加自定义样式功能
 
 7.修了在chrome下右键删除td里的图片会把整个td删除的问题
 
 8.改进了不同的页面调用一个editor，URL问题
 
 9.增加了颜色选择器的颜色
 
 10.改进了提供的后台程序的安全性
 
 11.代码高亮支持折行
 
 12.改进了源码编辑模式下的性能(ie下),并且支持自动换行
 
 13.修改了在destroy之后会在ie下报错的问题
 
 14.给初始化容器name值，那么在后台取值的键值就是name给定的值，方便多实例在一个form下提交
 
 15.支持插入script/style这样的标签
 
 16.修复了列表里插入浮动图片，图片不占位问题
 
 17.源码模式下,去掉了pre中的 
 
 18.完善了_example下的demo例子
 
 19.base64的图片被过滤掉了
 
  使用方法：var editorOption = {
 
             //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
 
             toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
 
             //focus时自动清空初始化时的内容
 
             autoClearinitialContent:true,
 
             //关闭字数统计
 
             wordCount:false,
 
             //关闭elementPath
 
             elementPathEnabled:false
 
             //更多其他参数，请参考editor_config.js中的配置项
 
         };
 
         var editor_a = new baidu.editor.ui.Editor(editorOption);
 
         editor_a.render( ' textarea的Id ' );
 
 例：
 
 简单应用
 
 <script type="text/javascript">
 
         var UEDITOR_HOME_URL = "../";   //指向dialogs，themes等目录的父目 录，推荐使用/开头的绝对路径
 
  </script>
 
   <script type="text/javascript" charset="utf-8" src="../editor_config.js"></script>
 
     <!--使用版-->
 
     <!--<script type="text/javascript" charset="utf-8" src="../editor_all.js"></script>-->
 
     <!--开发版-->
 
  <script type="text/javascript" charset="utf-8" src="editor_api.js">
 
         paths = [
 
             'editor.js',
 
             'core/browser.js',
 
             'core/utils.js',
 
             'core/EventBase.js',
 
             'core/dom/dom.js',
 
             'core/dom/dtd.js',
 
             'core/dom/domUtils.js',
 
             'core/dom/Range.js',
 
             'core/dom/Selection.js',
 
             'core/Editor.js',
 
             'commands/inserthtml.js',
 
             'commands/image.js',
 
             'commands/justify.js',
 
             'commands/font.js',
 
             'commands/link.js',
 
             'commands/map.js',
 
             'commands/iframe.js',
 
             'commands/removeformat.js',
 
             'commands/blockquote.js',
 
             'commands/indent.js',
 
             'commands/print.js',
 
             'commands/preview.js',
 
             'commands/spechars.js',
 
             'commands/emotion.js',
 
             'commands/selectall.js',
 
             'commands/paragraph.js',
 
             'commands/directionality.js',
 
             'commands/horizontal.js',
 
             'commands/time.js',
 
             'commands/rowspacing.js',
 
             'commands/lineheight.js',
 
             'commands/cleardoc.js',
 
             'commands/anchor.js',
 
             'commands/delete.js',
 
             'commands/wordcount.js',
 
             'plugins/pagebreak/pagebreak.js',
 
             'plugins/checkimage/checkimage.js',
 
             'plugins/undo/undo.js',
 
             'plugins/paste/paste.js', //粘贴时候的提示依赖了UI
 
             'plugins/list/list.js',
 
             'plugins/source/source.js',
 
             'plugins/shortcutkeys/shortcutkeys.js',
 
             'plugins/enterkey/enterkey.js',
 
             'plugins/keystrokes/keystrokes.js',
 
             'plugins/fiximgclick/fiximgclick.js',
 
             'plugins/autolink/autolink.js',
 
             'plugins/autoheight/autoheight.js',
 
             'plugins/autofloat/autofloat.js', //依赖UEditor UI,在IE6中，会覆盖掉body的背景图属性
 
             'plugins/highlight/highlight.js',
 
             'plugins/serialize/serialize.js',
 
             'plugins/video/video.js',
 
             'plugins/table/table.js',
 
             'plugins/contextmenu/contextmenu.js',
 
             'plugins/pagebreak/pagebreak.js',
 
             'plugins/basestyle/basestyle.js',
 
             'plugins/elementpath/elementpath.js',
 
             'plugins/formatmatch/formatmatch.js',
 
             'plugins/searchreplace/searchreplace.js',
 
             'plugins/customstyle/customstyle.js',
 
             'ui/ui.js',
 
             'ui/uiutils.js',
 
             'ui/uibase.js',
 
             'ui/separator.js',
 
             'ui/mask.js',
 
             'ui/popup.js',
 
             'ui/colorpicker.js',
 
             'ui/tablepicker.js',
 
             'ui/stateful.js',
 
             'ui/button.js',
 
             'ui/splitbutton.js',
 
             'ui/colorbutton.js',
 
             'ui/tablebutton.js',
 
             'ui/toolbar.js',
 
             'ui/menu.js',
 
             'ui/combox.js',
 
             'ui/dialog.js',
 
             'ui/menubutton.js',
 
             'ui/datebutton.js',
 
             'ui/editorui.js',
 
             'ui/editor.js',
 
             'ui/multiMenu.js'
 
         ];
 
     </script>
 
 <script type="text/javascript">
 
 // 自定义的编辑器配置项,此处定义的配置项将覆盖editor_config.js中的同名配置
 
         var editorOption = {
 
             //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
 
             toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
 
             //focus时自动清空初始化时的内容
 
             autoClearinitialContent:true,
 
             //关闭字数统计
 
             wordCount:false,
 
             //关闭elementPath
 
             elementPathEnabled:false
 
             //更多其他参数，请参考editor_config.js中的配置项
 
         };
 
         var editor_a = new baidu.editor.ui.Editor(editorOption);
 
         editor_a.render( 'myEditor' );
 
  </script>
 
 <script type="text/plain" id="myEditor" style="width:500px">
 
         <p>这里我可以写一些输入提示</p>
 
     </script>
 
 
 
 
 
 
 
 原文出处：http://blog.sina.com.cn/s/blog_9433c40401010p5t.html
 

富文本编辑器是我们常用到的编辑器,也有很多功能完备且强大的编辑器，比如Quill Rich Text Editor、ueditor等，都是很优秀的富文本编辑器。在我们写网页的时候也会用到它,通常省事的方法就是-------引用插件,但是有些插件的样式不是需求的样式,要修改插件的样式就比较麻烦,所以尝试自己写了一个。
 
主要利用的是document.execCommand。
 
先来看一下document.execCommand的介绍:当一个HTML文档切换到设计模式 designMode时，文档对象暴露 execCommand 方法，该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择（粗体，斜体等），而其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素。
 
简单来说就是可以利用document.execCommand的属性和contentEditable就可以做我们想要的效果
 
布局部分的代码(注意输入区域的div要设置contentEditable哦):
 
<div id="wrapper">
	<div id="control_area"></div>

	<div id="text_area" contenteditable></div>
</div>
 
布局好了,分为控制区和输入区,接下来要对两部分分别进行操作，在控制区域，就是可以设置样式的各种按钮。参考document.execCommand的语法：
 
 
 主要控制到样式的有两个：aCommandName和aValueArgument。因此我们需要在每个按钮上传递两个变量。第一个是必填项aCommandName，第二个是选填项aValueArgument。我们考虑采用HTML5的新属性data-*传递这两个参数:
 
<a href="#" data-command='italic' onclick="changeStyle(this.dataset)">斜体</a>
<a href="#" data-command='fontSize' data-value="1" onclick="changeStyle(this.dataset)">1号</a>
 
最后我们控制部分的按钮布局为:
 
<div id="control-area">
	<!--调整为斜体-->
	<a href="#" data-command='italic' onclick="changeStyle(this.dataset)">斜体</a>
	<!--调整字号为1号-->
	<a href="#" data-command='fontSize' data-value="1" onclick="changeStyle(this.dataset)">1号</a>
	<!-- 调整字体颜色为红色 -->
	<a href="#" data-command='foreColor' data-value="red" onclick="changeStyle(this.dataset)">红色</a>
	<!-- 调整字体为楷体 -->
	<a href="#" class='btn middle blue' data-command='fontName' data-value="KaiTi" onclick="changeStyle(this.dataset)">楷</a>
	<!-- 添加删除线 -->
	<a href="#" class='btn right grey' data-command='strikeThrough' onclick="changeStyle(this.dataset)">删除线</a>
	<!-- 调整字体颜色为黑色 -->
	<a href="#" class='btn middle' data-command='foreColor' data-value="black" onclick="changeStyle(this.dataset)">黑</a>
</div>
 
 重点贴上JS代码,朋友们
 
 
<script type="text/javascript">
		const changeStyle = (data) => {
		    data.value? document.execCommand(data.command, false, data.value):document.execCommand(data.command, false, null)
		}
</script>
 
 这样一个轻量级的富文本编辑器就出来啦,样式我就不贴了,如果有更好的方法希望大家可以提出来,另贴上document.execCommand的其他方法,这里就不一一调例了:
 
backColor
 
修改文档的背景颜色。在styleWithCss模式下，则只影响容器元素的背景颜色。这需要一个<color> 类型的字符串值作为参数传入。注意，IE浏览器用这个设置文字的背景颜色。
 
bold
 
开启或关闭选中文字或插入点的粗体字效果。IE浏览器使用 <strong>标签，而不是<b>标签。
 
contentReadOnly
 
通过传入一个布尔类型的参数来使能文档内容的可编辑性。(IE浏览器不支持)
 
copy
 
拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
 
createLink
 
将选中内容创建为一个锚链接。这个命令需要一个HREF URI字符串作为参数值传入。URI必须包含至少一个字符，例如一个空格。（浏览器会创建一个空链接）
 
cut
 
 剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
 
decreaseFontSize
 
 给选中文字加上 <small> 标签，或在选中点插入该标签。(IE浏览器不支持)
 
delete
 
删除选中部分.
 
enableInlineTableEditing
 
启用或禁用表格行和列插入和删除控件。(IE浏览器不支持)
 
enableObjectResizing
 
启用或禁用图像和其他对象的大小可调整大小手柄。(IE浏览器不支持)
 
fontName
 
在插入点或者选中文字部分修改字体名称. 需要提供一个字体名称字符串 (例如："Arial")作为参数。
 
fontSize
 
在插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数。
 
foreColor
 
在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。
 
formatBlock
 
添加一个HTML块式标签在包含当前选择的行, 如果已经存在了，更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含标签分隔符 < >, 例如 "<H1>".)
 
forwardDelete
 
删除光标所在位置的字符。 和按下删除键一样。
 
heading
 
添加一个标题标签在光标处或者所选文字上。 需要提供标签名称字符串作为参数 (例如. "H1", "H6"). (IE 和 Safari不支持)
 
hiliteColor
 
更改选择或插入点的背景颜色。需要一个颜色值字符串作为值参数传递。 UseCSS 必须开启此功能。(IE浏览器不支持)
 
increaseFontSize
 
在选择或插入点周围添加一个BIG标签。(IE浏览器不支持)
 
indent
 
缩进选择或插入点所在的行， 在 Firefox 中, 如果选择多行，但是这些行存在不同级别的缩进, 只有缩进最少的行被缩进。
 
insertBrOnReturn
 
控制当按下Enter键时，是插入 br 标签还是把当前块元素变成两个。(IE浏览器不支持)
 
insertHorizontalRule
 
在插入点插入一个水平线（删除选中的部分）
 
insertHTML
 
在插入点插入一个HTML字符串（删除选中的部分）。需要一个个HTML字符串作为参数。(IE浏览器不支持)
 
insertImage
 
在插入点插入一张图片（删除选中的部分）。需要一个image SRC URI作为参数。这个URI至少包含一个字符。空白字符也可以（IE会创建一个链接其值为null）
 
insertOrderedList
 
在插入点或者选中文字上创建一个有序列表
 
insertUnorderedList
 
在插入点或者选中文字上创建一个无序列表。
 
insertParagraph
 
在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.)
 
insertText
 
在光标插入位置插入文本内容或者覆盖所选的文本内容。
 
italic
 
在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签，而不是 I )
 
justifyCenter
 
对光标插入位置或者所选内容进行文字居中。
 
justifyFull
 
对光标插入位置或者所选内容进行文本对齐。
 
justifyLeft
 
对光标插入位置或者所选内容进行左对齐。
 
justifyRight
 
对光标插入位置或者所选内容进行右对齐。
 
outdent
 
对光标插入行或者所选行内容减少缩进量。
 
paste
 
在光标位置粘贴剪贴板的内容，如果有被选中的内容，会被替换。剪贴板功能必须在 user.js 配置文件中启用。参阅 [1].
 
redo
 
重做被撤销的操作。
 
removeFormat
 
对所选内容去除所有格式
 
selectAll
 
选中编辑区里的全部内容。
 
strikeThrough
 
在光标插入点开启或关闭删除线。
 
subscript
 
在光标插入点开启或关闭下角标。
 
superscript
 
在光标插入点开启或关闭上角标。
 
underline
 
在光标插入点开启或关闭下划线。
 
undo
 
撤销最近执行的命令。
 
unlink
 
去除所选的锚链接的<a>标签
 
useCSS 
 
切换使用 HTML tags 还是 CSS 来生成标记. 要求一个布尔值 true/false 作为参数。注: 这个属性是逻辑上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持)
 该属性已经废弃，使用 styleWithCSS 代替。
 
styleWithCSS
 
用这个取代 useCSS 命令。 参数如预期的那样工作, i.e. true modifies/generates 风格的标记属性, false 生成格式化元素。
 
如还有其他疑问可以参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand