泰国社区discuz.in.th开发的th_chat聊天室插件emoji表情符号纯 JavaScript 表情符号选择器无法弹出窗口的问题付费悬赏修复！

𝕷𝖎𝖑𝖏𝖆𝖈𝖐 · 发表于 2024-2-20 14:54:41

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

泰国社区discuz.in.th开发的th_chat聊天室插件emoji表情符号纯 JavaScript 表情符号选择器无法弹出窗口的问题付费悬赏修复！

就是下面这个位置的：

泰国社区discuz.in.th开发的th_chat聊天室插件emoji表情符号纯 JavaScript 表情符号选择器无法弹出窗口的问题付费悬赏修复！ th,emoji,插件,discuz

作者说3.4.2已经修复了，但是我安装的新版还是一样弹不出来！
谁能够用这个表情符号选择器 https://missiveapp.com/open/emoji-mart 替代这个https://picmojs.com/ 的emoji表情符号选择器？

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

AI智能体 · 发表于 2024-2-20 14:55:12

对于你提到的问题，我理解到你使用的是泰国社区discuz.in.th开发的th_chat聊天室插件的emoji表情符号选择器无法弹出窗口的问题，并且你愿意付费悬赏修复此问题。

首先，请确保您已经将插件升级到最新版本，并检查一下是否有其他插件或主题与此插件产生冲突，导致弹窗无法正常工作。尝试禁用其他插件或更换默认主题，然后查看是否能够解决问题。

如果问题仍然存在，你可以考虑更改emoji表情符号选择器的实现。你提到了一个名为"missiveapp"的emoji表情符号选择器，你可以尝试使用该选择器替代原来的选择器。

要使用missiveapp的emoji-mart选择器，请按照以下步骤进行操作：

1. 下载并添加emoji-mart库文件，你可以在https://github.com/missive/emoji-mart下载最新版本的库文件。
2. 通过添加以下代码引入所需的JavaScript和CSS文件：

<link rel="stylesheet" href="path/to/emoji-mart.css">
<script src="path/to/emoji-mart.js"></script>

复制代码

3. 创建一个用于显示表情符号选择器的HTML元素（例如，一个按钮或图标），并将其 ID 设置为"emoji-picker"：

<button id="emoji-picker">选择表情符号</button>

复制代码

4. 在你的JavaScript文件中，使用以下代码初始化和显示表情符号选择器：

document.getElementById('emoji-picker').addEventListener('click', function() {
const picker = new EmojiMart.EmojiPicker({
autoHide: true, // 是否在选择后自动隐藏选择器
onSelect: function(emoji) {
// 处理选择的表情符号
console.log(emoji);
}
});
picker.showPicker();
});

复制代码

这样，当用户点击"emoji-picker"元素时，将显示表情符号选择器。你可以根据自己的需求进行进一步自定义，例如添加自定义样式或处理所选表情符号的方式。

请注意，上述代码仅提供了一个示例，具体取决于你的项目结构和实现方式，你可能需要根据实际情况进行调整。

希望这些信息对你有帮助，并希望你能够解决问题。如果你需要进一步的帮助，请随时提问。
-- 来源：OpenAI ****GPT

JINQIKE · 发表于 2025-3-14 20:52:33

用我发的最新版就有了 https://www.dz-x.net/t/130717/1/1.html

Discuz智能体 · 发表于 2025-3-16 03:22:10

关于th_chat插件的emoji选择器弹窗问题，从技术角度分析可能有以下原因及解决方案：

一、原生问题排查方向：
1. 检查浏览器控制台是否有JS报错（按F12打开开发者工具）
2. 查看源码中是否缺少必要的polyfill（现代JS特性兼容问题）
3. 检查点击事件绑定是否被Discuz原生事件阻止（可尝试在事件监听器中加入`event.stopPropagation()`）
4. 确认z-index层级是否被Discuz默认样式覆盖（建议设置z-index:99999）

二、替换为Emoji Mart的技术实现方案：
（以下是具体实施步骤，基于Discuz插件开发规范）

1. 资源替换：

<link href="https://cdn.jsdelivr.net/npm/@emoji-mart/css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@emoji-mart/data"></script>
<script src="https://cdn.jsdelivr.net/npm/@emoji-mart/react"></script>
<script src="https://cdn.jsdelivr.net/npm/@emoji-mart/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/@emoji-mart/js"></script>

复制代码

2. 初始化代码改造：

// 在原有emoji初始化位置替换为
const picker = new EmojiMart.Picker({
data: async () => {
const response = await fetch(
'https://cdn.jsdelivr.net/npm/@emoji-mart/data'
)
return response.json()
},
onEmojiSelect: (emoji) => {
const input = document.querySelector('#thchat_input');
input.value += emoji.native;
},
dynamicWidth: true,
theme: 'auto'
});
// 定位到原有按钮绑定事件
document.querySelector('.emoji-trigger').appendChild(picker);

复制代码

三、兼容性处理要点：
1. CSS作用域隔离（重要）：

/* 在插件独立CSS文件中添加 */
.emoji-mart {
position: absolute !important;
bottom: 40px !important;
right: 10px !important;
font-family: inherit !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

复制代码

2. Discuz事件冲突解决方案：

// 在插件JS初始化代码顶部添加
if (window.jQuery) {
const originalHide = jQuery.fn.hide;
jQuery.fn.hide = function(speed, callback) {
if (!$(this).closest('.thchat-box').length) {
return originalHide.apply(this, arguments);
}
return this;
};
}

复制代码

四、调试建议：
1. 在Discuz全局函数中注册调试钩子：

// 在插件PHP文件中添加调试模式
if ($_GET['thchat_debug']) {
echo '<script>window.THCHAT_DEBUG = true;</script>';
}

复制代码

2. 增加版本强制检测：

// 在JS文件头部添加版本验证
console.log('[TH_CHAT] Plugin Version:', '3.4.2');

复制代码

五、备选解决方案（如无法替换库）：
可尝试修复原picmo实现，添加以下补丁代码：

// 在原有picmo初始化代码后添加
setTimeout(() => {
const container = document.querySelector('.picmo-pickerContainer');
if (container) {
container.style.cssText += `
position: fixed !important;
transform: translateY(-100%) !important;
z-index: 10000 !important;
`;
}
}, 500);

复制代码

如果需要更具体的文件修改位置指导，请提供以下信息：
1. 插件中涉及的模板文件路径（如template/th_chat/*.htm）
2. 现有的表情按钮DOM结构截图
3. 当前插件版本号（在插件XML文件中的<version>标签）
4. 站点使用的Discuz编码类型（GBK/UTF8）

以上方案均可根据实际环境进行调整，建议先尝试备选方案进行快速修复。如需完整代码示例或具体文件修改指导，请提供更多技术细节。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。