<script>
//系统表情配置
var sys = {
//按钮设置
faceBtn: {
value: "系统表情",
id: "add_faces",//唯一ID
},
//表情包
faceList:[
["不高兴","https://hu60.net/tpl/classic/img/face/e4b88de9ab98e585b4.gif"],
["乖","https://hu60.net/tpl/classic/img/face/e4b996.gif"],
["冷","https://hu60.net/tpl/classic/img/face/e586b7.gif"],
["勉强","https://hu60.net/tpl/classic/img/face/e58b89e5bcba.gif"],
["吐舌","https://hu60.net/tpl/classic/img/face/e59090e8888c.gif"],
["吐","https://hu60.net/tpl/classic/img/face/e59090.gif"],
["呵呵","https://hu60.net/tpl/classic/img/face/e591b5e591b5.gif"],
["呼","https://hu60.net/tpl/classic/img/face/e591bc.gif"],
["咦","https://hu60.net/tpl/classic/img/face/e592a6.gif"],
["哈哈","https://hu60.net/tpl/classic/img/face/e59388e59388.gif"],
["啊","https://hu60.net/tpl/classic/img/face/e5958a.gif"],
["喷","https://hu60.net/tpl/classic/img/face/e596b7.gif"],
["太开心","https://hu60.net/tpl/classic/img/face/e5a4aae5bc80e5bf83.gif"],
["委屈","https://hu60.net/tpl/classic/img/face/e5a794e5b188.gif"],
["开心","https://hu60.net/tpl/classic/img/face/e5bc80e5bf83.gif"],
["怒","https://hu60.net/tpl/classic/img/face/e68092.gif"],
["惊哭","https://hu60.net/tpl/classic/img/face/e6838ae593ad.gif"],
["惊讶","https://hu60.net/tpl/classic/img/face/e6838ae8aeb6.gif"],
["汗","https://hu60.net/tpl/classic/img/face/e6b197.gif"],
["泪","https://hu60.net/tpl/classic/img/face/e6b3aa.gif"],
["滑稽","https://hu60.net/tpl/classic/img/face/e6bb91e7a8bd.gif"],
["狂汗","https://hu60.net/tpl/classic/img/face/e78b82e6b197.gif"],
["疑问","https://hu60.net/tpl/classic/img/face/e79691e997ae.gif"],
["真棒","https://hu60.net/tpl/classic/img/face/e79c9fe6a392.gif"],
["睡觉","https://hu60.net/tpl/classic/img/face/e79da1e8a789.gif"],
["笑眼","https://hu60.net/tpl/classic/img/face/e7ac91e79cbc.gif"],
["花心","https://hu60.net/tpl/classic/img/face/e88ab1e5bf83.gif"],
["鄙视","https://hu60.net/tpl/classic/img/face/e98499e8a786.gif"],
["酷","https://hu60.net/tpl/classic/img/face/e985b7.gif"],
["钱","https://hu60.net/tpl/classic/img/face/e992b1.gif"],
["阴险","https://hu60.net/tpl/classic/img/face/e998b4e999a9.gif"],
["黑线","https://hu60.net/tpl/classic/img/face/e9bb91e7babf.gif"],
],
//表情面板的样式
faceDomStyle:{
boxShadow: '0 0 10px #999999',
backgroundColor: 'white',
marginRight: '10rem',
// width: "50%",/*如果面板太宽可开启此项*/
padding: '10px',
borderRadius: '5px',
maxHeight: '500px',
overflow: 'auto',
},
//表情点击事件和追加UBB
faceClick: function (obj){
var str = $("#content").val();
var faceUBB = "{"+$(obj).attr('title')+"}";//UBB
$("#content").val(str+faceUBB);//追加UBB
},
}
//自定义表情配置
var custom = {
faceBtn: {
value: "我的表情",
id: "add_custumfaces",//唯一ID
},
faceList:[
["虎头虎脑","http://ci.baidu.com/more?mm=MdhrhGJ7w5"],//表情列表，格式["表情名称","表情的url"]
],
faceDomStyle:{
boxShadow: '0 0 10px #999999',
backgroundColor: 'white',
marginRight: '10rem',
// width: "50%",/*如果面板太宽可开启此项*/
padding: '10px',
borderRadius: '5px',
maxHeight: '500px',
overflow: 'auto',
},
faceClick: function (obj){
var str = $("#content").val();
if(!$(obj).attr('title')){
var faceUBB = "[img]"+$(obj).attr('src')+"[/img]";//UBB
}else{
var faceUBB = "[img="+$(obj).attr('src')+"]"+$(obj).attr('title')+"[/img]";//UBB
}
$("#content").val(str+faceUBB);//追加UBB
},
//鼠标移动事件
faceMove: function (obj,event){
var y = event.pageY-5;
var x = event.pageX+5;
var h = $(obj).innerHeight();
var w = $(obj).innerWidth();
$(".preview").remove();
var $dom = $('<div class="preview"></div>');
var top = (y-h-8)<0?0:(y-h-8);
$dom.css({
position: "absolute",
top: top+"px",
left: x+"px",
zIndex: "99",
boxShadow: "0 0 5px #999999",
padding: "4px",
backgroundColor: "white",
});
var src = $(obj).attr('src');
var $img = $('<img>');
$img.css({
position: 'relative',
width: "100%",
height: "auto",
});
$img.attr({
'src':src,
});
$dom.append($img);
$('body').append($dom);
$(obj).on('mouseout',function(){
$dom.remove();
});
},
}
$(document).ready(function(){
FacePlug.FaceCtrl(sys);
FacePlug.FaceCtrl(custom);
});
var FacePlug = {};
FacePlug.addBtn = function(elem) {
// 添加按钮
var $fileBtn = $('#add_files');
$fileBtn.after(elem);
}
FacePlug.FaceCtrl = function(option)
{
// 系统表情
if(!option)
{
return false;
} else if(typeof option.faceList == 'undefined')
{
return false;
}else if(!option.faceBtn){
return false
}
var $btn = $('<input />');
option.faceBtn.type = "button";
$btn.attr(option.faceBtn);
this.addBtn($btn);
var faceDom = '<div class="face-panel"></div>';//构建表情面板DOM
var $faceBtn = $("#"+option.faceBtn.id);//获得按钮对象
if(!$faceBtn[0])
{
return false;
}
var $faceDom = $(faceDom);
option.faceDomStyle.position = 'absolute';
$faceDom.appendTo('body');
for(ooo in option.faceList)
{
var $imgContainer = $('<span class="img"></span>');
$imgContainer.css({
display: "inline-block",
});
var $imgD = $('<img />');//图片Dom
if(option.faceList[ooo].length<2){
$imgD.attr('src',option.faceList[ooo][0]);
}else{
$imgD.attr('title',option.faceList[ooo][0]);
$imgD.attr('src',option.faceList[ooo][1]);
}
$imgD.css({
maxWidth: "80px",
maxHeight: "80px",
margin:"2px",
cursor:"pointer",
position: "relative",
display: "inline-block",
});
$imgD.on('click',function(){
if(typeof option.faceClick == 'function'){
option.faceClick(this);
}
});
$imgD.on('mouseover',function(){
if(typeof option.faceOver == 'function'){
option.faceOver(this,event);
}
});
$imgD.on('mousemove',function(){
if(typeof option.faceMove == 'function'){
option.faceMove(this,event);
}
});
$imgContainer.append($imgD);
$faceDom.append($imgContainer);
}
$faceDom.hide();
$faceBtn.on('click',function(){
$('.face-panel').not($faceDom).hide();
var h = parseInt($(this).offset().top)+30;
var w = parseInt($(this).offset().left)+5;
option.faceDomStyle.top = h+'px';
option.faceDomStyle.left = w+'px';
$faceDom.css(option.faceDomStyle);
$faceDom.toggle(200);
});
}
</script>
富文本的编辑框在不做成app的情况下在手机上非常难用，并且有大量的手机浏览器兼容性问题。
知乎拥有出色的富文本编辑器，但是在它还允许手机网页端编辑的时候，它在手机版也是只显示textarea。现在它更是赤果果的只让我们通过app编辑了。但是就算在知乎app里，“把图片移到一个新位置”这样简单的操作还是根本没有办法完成（拖不动，剪切再粘贴后只有文字保留，图片消失，单纯选中图片没有剪切操作）。
想象一下你要用单手触控的方式把一个图片从一个地方拖动到另一个地方，但是又不能触发滚屏，你就知道在手机上用富文本编辑器有多么不靠谱了。（安卓的剪切板放不进图片，双手操作会触发缩放，长按会触发上下文菜单）
此外在某些浏览器内，选中富文本编辑框内的一段文字进行复制或剪切都非常困难。并且通常在富文本编辑框内，输入法虚拟键盘上的光标移动按键是失灵的，选择和全选按键当然也是失灵的。
@拒绝柳岩99次，因为大家都在用插件，所以我就不需要加这个功能了，否则和你的插件冲突了你还需要用js关掉不是
我一直在用这个插件 https://hu60.net/q.php/bbs.topic.83135.html