付琦的博客

为什么会有这个需求呢。。。。说实话，我们网站的用户年龄端都比较大，使用者有很多都是电脑初级水平，他们设置只会用鼠标，不会用Ctrl+v来粘贴，所以只能给他们一个点击的按钮了。

前提：您需要了解如何在百度编辑器【uEditor】中添加一个新的功能按钮，详细方法: http://ueditor.baidu.com/website/document.html 这个地址中的二次开发会教你如何添加。

这里我重点描述一下实现功能的思路：

首先，我们需要获取剪切板的HTML代码，获取的方法有：clipboardData.getData("text") 和 document.execCommand('paste') 。 这两个方法的详细参数大家搜索一下吧，这里不细说了。关键是这里两个方法直接console.log或者直接innerHTML出来的都是不带HTML文本内容，这里要注意，我们需要将它们的值直接放在拥有contentEditable属性的iframe或者其他节点中，推荐用iframe，因为IE6认识他，这样IE就可以得到完整的剪切板中HTML代码了，这些方法非IE不支持，他们安全级别太高，搜索到的资料暂时突破不了；

IE获取剪切板内同的不同：ie6可以直接获取，IE7及以上需要授权提示，这样就会产生没有授权的状态；

针对非IE和IE没有授权进行处理，这两者可视为一个状态，我们只能让用户使用邮件或者快捷键来实现，这是我们弹出一个拥有contentEditable属性的节点，让用户可以用右键或者快捷键将内容放进节点内，得到内容后交给编辑器，大功告成。

以上思路是CKEditor的做法，本人只是参考模仿。

下面这些代码是自定义扩展功能的JS文件 custompaste.js 的源码

///commandsTitle Paste

UE.plugins['custompaste'] = function () {

var me = this;

if ( !document.getElementById("custompasteIframe") && UE.browser.ie ) {

custompasteIframe = document.createElement("iframe");

custompasteIframe.id = "custompasteIframe";

custompasteIframe.style.position = "absolute";

custompasteIframe.style.top = "-99999px";

custompasteIframe.style.left = "-99999px";

document.getElementsByTagName("body")[0].appendChild(custompasteIframe);

};

me.commands['custompaste'] = {

execCommand : function(){

var text,

textbox,

flag,

that = this,

custompasteIframe,

pasteplain = me.commands['pasteplain'].queryCommandState();

if ( UE.browser.ie ) {

iePaste();

} else {

dialogPaste();

};

function iePaste () {

textbox = document.getElementById("custompasteIframe").contentWindow;

textbox.document.body.contentEditable = true;

textbox.focus();

flag = textbox.clipboardData.getData("text");

textbox.document.body.innerHTML = "";

textbox.document.execCommand('paste');

if ( flag || flag == null ) {

if ( !pasteplain ) {

that.execCommand('insertHtml', textbox.document.body.innerHTML);

} else {

that.execCommand('insertHtml', textbox.clipboardData.getData("text"));

}

} else {

dialogPaste();

}

};

function dialogPaste () {

var msg = '<div class="pasteDialogBox">';

msg += '<p>';

msg += '因为你的浏览器的安全设置原因, 本编辑器不能直接访问你的剪贴板内容, 你需要在本窗口重新粘贴一次</p><p>请使用键盘快捷键(Ctrl/Cmd+V)把内容粘贴到下面的方框里，再按 <strong>确定</strong>';

msg += '</p>';

if ( !pasteplain ) {

msg += '<iframe id="custompasteIframe" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" onload="this.contentWindow.document.body.contentEditable = true; this.contentWindow.document.body.focus(); this.contentWindow.document.body.style.background=\'#f6f6f6\'; this.contentWindow.document.body.style.height=\'100%\'; this.contentWindow.document.body.style.padding = \'4px\'"></iframe>';

} else {

msg += '<textarea name="custompasteTextarea" id="custompasteTextarea"></textarea>';

};

msg += '<div class="D_button">';

msg += '<input type="button" class="D_yes" value="确定" />';

msg += '<input type="button" class="D_no" value="取消" />';

msg += '</div>';

msg += '</div>';

Dialog({

"id":"custompasteDialog",

"msg":msg,

"title":"粘贴",

"style":"editorDialog",

"lock":true,

"lockColor":"#ccc",

"lockOpacity":"30",

"openFn":function () {

var elem = document.getElementById("custompasteDialog");

elem.style.zIndex = "1008";

elem.parentNode.getElementsByTagName("div")[0].style.zIndex = "1007";

if ( document.getElementById("custompasteTextarea") ) { setTimeout( function(){document.getElementById("custompasteTextarea").focus();}, 10) };

},

"yesFn":function () {

if ( !pasteplain ) {// 兼容IE必须如下方式获取iframe

that.execCommand('insertHtml', document.getElementById("custompasteDialog").getElementsByTagName("iframe")[0].contentWindow.document.getElementsByTagName("body")[0].innerHTML);

} else {

that.execCommand('insertHtml', document.getElementById("custompasteTextarea").value);

};

}

});

};

},

queryCommandState:function(){

return 0;

}

};

};

粗略的说下添加方法：

开发调试版增加功能：

增加参数的：

editor_congfig.js

toolbars:[

[..., 'searchreplace','help','showmsg']

],

labelMap:{

…,

'help':'帮助',

'showmsg':'显示提示消息'

}

注意：1.2.3之后增加了语言包，labelMap方法的修改变为如下：

lang\en\en.js 增加：'custompaste':'Paste'

lang\zh-cn\zh-cn.js 增加：'custompaste':'粘贴'

调试时需要修改:ueditor\_examples\editor_api.js 中的路径

baseURL = 'ueditor/_src/';

和 添加JS引用 'ueditor/_src/plugins/custompaste.js',

_src/ui/editorui.js文件中的btnCmds数组 参数增加 ,'custompaste'

增加CSS：

ueditor/themes/default/ueditor.css

.edui-for-custompaste .edui-icon {

background-position: -560px 0;

}

以及 Dialog 的CSS

右键菜单：

ueditor\_src\plugins\contextmenu.js

修改：{label:'粘贴(ctrl+v)', cmdName:'custompaste'}

1.2.3版 改为 {label:lang['paste'], cmdName:'custompaste'}

取消复制按钮代码

发布版增加功能：

增加参数的：

editor_congfig.js

toolbars:[

[..., 'searchreplace','help','showmsg']

],

labelMap:{

…,

'help':'帮助',

'showmsg':'显示提示消息'

}

注意：1.2.3之后增加了语言包，labelMap方法的修改变为如下：

lang\en\en.js 增加：'custompaste':'Paste'

lang\zh-cn\zh-cn.js 增加：'custompaste':'粘贴'

editor_all.js 中 btnCmds 参数增加 ,'custompaste'

自己创建的粘贴JS，应该是跟editor_all.js合并

ueditor\_src\plugins\custompaste.js

增加CSS：

ueditor/themes/default/ueditor.css

.edui-for-custompaste .edui-icon {

background-position: -560px 0;

}

以及 Dialog 的CSS

右键菜单：

editor_all.js 文件

修改：{label:'粘贴(ctrl+v)', cmdName:'custompaste'}

1.2.3版 改为 {label:lang['paste'], cmdName:'custompaste'}

取消复制按钮代码

特别注明：以上代码中使用了自己的的Dialog组件【因为百度的Dialog不会用，见笑了。。。】，请有意向使用的同学换成自己的Dialog组件或直接使用百度的Dialog，如果你会，请教教我怎么用百度的Dialog。

This entry was posted on 星期一, 九月 3rd, 2012 at 11:19 上午 and is filed under 前端技术, 我的作品. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.