easyEditor编辑器支持插入表情

所属分类:输入-丰富的输入

 3944  18  查看评论 (6)
easyEditor编辑器支持插入表情 ie兼容9

更新时间:2018/5/29 上午9:27:32

更新说明:修改了MD文档,修复了光标获取不正确,考虑了更多用户的操作,新增API(具体请看MD文档)

首先你需要引入

<link rel="stylesheet" href="css/easyEditor.css" />
<script src="js/easyEditor.js"></script>

你只需要一个div

<div id="editor" style="width:500px;height:300px;"></div>

我们需要实例化

editor = easyEditor('editor');
//表情			
var emojiBtn = document.getElementById('emoji_btn');
var emojiBox = document.getElementById('emoji_list');
var emojiList = emojiBox.getElementsByTagName('img');
//揠定事件添加表情
for (var i = 0; i < emojiList.length; i++) {
    addEvent(emojiList[i], 'click', function() {
        var src = this.getAttribute('src');
        editor.insertEmoji({
            src: src,
            remark: '笑脸'
        }); //添加表情
        emojiBox.style.display = 'none';
    });
}

//At人
var atBtn = document.getElementById('atBtn');
addEvent(atBtn, 'click', function() {
    //添加At人
    editor.insertBlock({
        text: '@某某',
        color: '#f00'
    });
});

//?取text
var showBox = document.getElementById('show');
var textBtn = document.getElementById('getTextBtn');
addEvent(textBtn, 'click', function() {
    showBox.innerHTML = htmlEncode(editor.getContent({
        emojiSign: '|', //表情分隔符
        blockSign: '%' //行块分隔符
    }));
});

//聚焦
var focusBtn = document.getElementById('focusBtn');
addEvent(focusBtn, 'click', function() {
    editor.focus();
});

//失焦
var blurBtn = document.getElementById('blurBtn');
addEvent(blurBtn, 'click', function() {
    editor.blur();
});

//光标定位前面
var setPositionStartBtn = document.getElementById('setPositionStartBtn');
addEvent(setPositionStartBtn, 'click', function() {
    editor.setPosition('start');
});

//光标定位后面
var setPositionEndBtn = document.getElementById('setPositionEndBtn');
addEvent(setPositionEndBtn, 'click', function() {
    editor.setPosition('end');
});

//选中所有内容
var selectAllBtn = document.getElementById('selectAllBtn');
addEvent(selectAllBtn, 'click', function() {
    editor.selectAll();
});

//删除选中内容
var clearSelectBtn = document.getElementById('clearSelectBtn');
addEvent(clearSelectBtn, 'click', function() {
    editor.clearSelect();
});

//删除所有内容
var clearAllBtn = document.getElementById('clearAllBtn');
addEvent(clearAllBtn, 'click', function() {
    editor.clearAll();
});

//换行
var changeLineBtn = document.getElementById('changeLineBtn');
addEvent(changeLineBtn, 'click', function() {
    editor.changeLine();
});

//添加placeholder
var placeholderBtn = document.getElementById('placeholderBtn');
addEvent(placeholderBtn, 'click', function() {
    editor.placeholder('我们从这里开始...');
});

更新时间:2017/12/25 下午2:20:05

更新说明:支持IE9,修改了md文档的描述,新增placeholder功能


easyEditor

首先你需要引入css与JS

<link rel="stylesheet" href="css/easyEditor.css" />
<script src="js/easyEditor.js"></script>

html你只需要一个div

<div id="editor" style="width:500px;height:300px;"></div>

我们需要实例化

var editor = new EasyEditor('editor');

插入表情

/**
 * @desc 插入表情方法
 * @param {object} opt 
 * @param {string} opt.src 表情路径 
 * @param {string} opt.remark 表情说明
 * @param {function} opt.afterInsert 插入后的回调函数
 *
 */
editor.insertEmoji({
    src: 'emoji/1.gif',
    remark: '笑脸',
    afterInsert: function() {
        //do something
    }
});

插入行块

/**
 * @desc 插入行块方法
 * @param {object} opt
 * @param {string} opt.text 文字 
 * @param {string} opt.color 文字颜色
 * @param {function} opt.afterInsert 插入后的回调函数
 *
 */

editor.insertBlock({
    text: '@somebody',
    color: '#f00',
    afterInsert: function() {
        //do something
    }
});

获取编辑器里面的html

var myhtml = editor.getContent(false);

获取编辑器里面的text

var mytext = editor.getContent(true);

属性

editor.sel; // selection 对象
editor.ran; // range 对象
editor.obj; // 编辑器对象(即文中id为editor的div);
相关插件-丰富的输入

jQuery H5电子签名

H5电子签名demo,支持移动端
  丰富的输入
 954  23

jquery屏幕键盘插件Virtual Keyboard

一个在浏览器的jQuery屏幕键盘(OSK)插件,。
  丰富的输入
 10942  52

jQuery模拟数字键盘插件mynumkb.js

jQuery pc端使用的数字键盘插件mynumkb.js,兼容ie6
  丰富的输入
 2529  18

仿多说留言、评论框,带微博表情。

仿多说留言、评论框,带微博表情。
  丰富的输入
 24324  263

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    坏小子 0
    2018/3/19 16:38:13
    好像不能粘贴文字了
        Lz70
        2018/4/17 13:45:06
        加我qq742774841
    回复
    Lz7 0
    2017/12/26 9:00:39
    editor.placeholder(string);可插入placeholder功能我的git,欢迎交流https://github.com/lz7git/easyEditor
        ???0
        2018/4/4 16:18:47
        您好,麻烦问下,在移动端出现光标位置定位不准如何解决?
        就是在我添加表情后在输入文字,然后再次添加表情时,表情出现的位置是错误的,不在文字后而在第一个添加的表情前。
        Lz70
        2018/4/17 13:46:10
        您好,呃??铨我看看怎?解?,已?定位?铨了,具篦的??留意我的git
    回复
    三月Kitty 0
    2017/12/25 14:07:25
取消回复