评论框图片表情输入工具分享

本贴最后更新于 2781 天前,其中的信息可能已经东海扬尘

分享一个个人觉得比较好用的图片表情输入工具,用于在评论框中输入颜文字、图片表情或 Emoji。前段时间发现于博客 AnotherHome

原项目地址:https://github.com/DIYgod/OwO
预览:http://diygod.github.io/OwO/demo/

由于原项目输入的图片是标签模式的,而 Solo 提交评论后会过滤掉 HTML 标签,所以我修改成了可以通过参数配置是使用 Markdown 格式还是默认的 HTML 标签模式。

修改版地址:https://github.com/iTanken/FrontProjects/tree/master/OwO
预览:http://git.itanken.cn/OwO/

一、功能预览

切换 Tab 选择输入颜文字、Emoji、图片表情等,内容可自定义。

OwO Preview

二、使用方法

  1. 导入样式表
  2. 在页面评论框附近添加一个 div
  3. 导入 JavaScript
  4. 初始化
<link rel="stylesheet" href="OwO.min.css">
<div class="OwO"><div>
<script src="OwO.min.js"></script>
<script>
var OwO_demo = new OwO({
	  logo: 'OωO表情', // 按钮内容
	  container: document.getElementsByClassName('OwO')[0], // 按钮div元素
	  target: document.getElementsByClassName('OwO-textarea')[0], // 评论框
	  api: './OwO.json', // 表情数据
	  position: 'down', // 输入层相对于按钮的方向,可选 up/down
	  width: '100%', // 输入层宽度
	  maxHeight: '250px' // 输入层最大高度
});
</script>

三、实际应用

如需查看具体使用情况,请移步至个人博客

Revised OwO Preview

四、修改内容

新增了几个初始化 OwO 对象时的参数,其次是修改了表情数据,表情图片全部请求阿里云 OSS。

默认参数值:

	const defaultOption = {
		logo: 'OωO表情',
		container: document.getElementsByClassName('OwO')[0],
		target: document.getElementsByTagName('textarea')[0],
		position: 'down',
		width: '100%',
		maxHeight: '250px',
		useMarkdown: false, // 是否使用 Markdown 图片格式
		appendContent: '', // 按钮后面的提示内容
		usedSize: 'h_200' // 表情图片样式参数,详见阿里云 OSS。"h_200" 表示高度统一为 200 
	};

五、修改版初始化参数

	var OwO_demo = new OwO({
		logo: 'OωO表情',
		container: document.getElementsByClassName('OwO')[0],
		target: document.getElementsByClassName('OwO-textarea')[0],
		api: '/js/lib/OwO/OwO.js',
		position: 'up',
		width: '100%',
		maxHeight: '250px',
		useMarkdown: true,
		appendContent:'<code> 推荐使用OωO表情来更生动形象的表达自己的感情!</code>',
		usedSize: 'h_150'
	});

数据文件:http://itanken.oss-cn-hangzhou.aliyuncs.com/images/emimg/OwO.json

  • 分享

    有什么新发现就分享给大家吧!

    247 引用 • 1792 回帖 • 7 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    285 引用 • 728 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 88250

    等研究下,看看社区能不能集成进来,谢谢分享!

  • someone

    就是感觉挺好用的,要是能集成进来那就最好不过了 ٩(๑>◡<๑)۶
    淫荡的笑了

  • someone

    [][][][][][][][][][][][][][][][][][][]

  • someone

    [][][][][][][em01][][]

  • djzhao

    哇哦,不错

    1 回复
  • someone

    测试

  • someone

    [em01][em02]

  • someone

    Test疲惫不堪

  • someone

    Tests[em04]

  • iTanken

    萌萌哒
    😁 😁

  • someone

    ─=≡Σ(((つ•̀ω•́)つ
    微笑

  • someone

    萌萌哒 :grin: :grin:

请输入回帖内容 ...