安科网

jQuery + Php 实现类似 Medium 的文章页内容批注评论功能

MXstudying

MXstudying

2019-07-01

关注 关注

还没时间做 WordPress 插件…

背景

偶然的机会，在准备做小半谈否 API 的时候，正在寻找用户人群时看到了利器 (liqi.io) 网站

他们使用了一款 2015年(貌似是)由一个国外开发者做的句子标记插件，实现了文章中点击句子即可标记并评论的功能

同样的 Medium 也有句子标记功能，还是蛮有用的

增加了互动，访客也能参与其中…

代码

没有来得及整理，先贴代码

//内容数据都保存在当前文章自定义字段
$stream_ids = get_post_meta($post->ID,'stream_ids',true);
$stream_contents = get_post_meta($post->ID,'stream_contents',true);
$stream_users = get_post_meta($post->ID,'stream_users',true);

$stream_users = explode('######',$stream_users);
$stream_ids = explode('######',$stream_ids);
$stream_contents = explode('######',$stream_contents);

$count1 = count($stream_ids);
$count2 = count($stream_contents);
$count3 = count($stream_users);

↑ 文章页头部获取标记内容

<?php

 if(wp_is_mobile()) {
  $is_wap = 1;
 }
 global $current_user;
 $user_id = $current_user -> ID;
 if(empty($user_id)){
     $login = 0;
 }else{
     $login = 1;
 }

?>
<div class="new-single-comment-fixed" id="comment_fixed" style="<?php if(!empty($stream_contents[0]) && !$is_wap) echo 'display:unset' ?>">
        <?php if($login){ ?>
        <input type="text" name="mark_comment" value="请输入批注，按下Enter发送" id="mark_comment" style="display:none">
        <?php } ?>
        <div style="text-align: right;font-size: 1.4rem;padding-bottom: 10px;padding-right: 15px;display:none;" id="comment_btn">
    <button style="background: #444;color: #fff;padding: 3px 20px;border-radius: 2px;" id="send_comment">确定</button>
    <button style="background: #eee;padding: 3px 20px;border-radius: 2px;margin-left: 10px;" id="cancel_comment">取消</button>
    </div>
    <div class="new-single-comment-div-list" style="<?php if(empty($stream_contents[0])) echo 'display:none' ?>">
 
<?php
    
    if($count1 == $count2 && $count2 == $count3){
        for($i=0;$i<$count3;$i++){ ?>

<div class="new-single-comment-div hover-mark-content" style="<?php if($count3 == 1 && $i == 0) echo 'margin-bottom: 0px;'; else echo 'margin-bottom: 20px;'; ?>" id="<?php echo $stream_ids[$i]; ?>">
        <h4><?php echo get_avatar($stream_users[$i],96,'','user-avatar',array('width'=>120,'height'=>120,'rating'=>'X','class'=>array('new-single-comment-img'),'extra_attr'=>'title="user-avatar"','scheme'=>'https') ); ?><?php echo get_user_by('id',$stream_users[$i])->display_name; ?></h4>
        <span class="new-single-comment-p"><?php echo $stream_contents[$i]; ?></span>
    </div>
    

<?php }} ?>
</div>
    </div>

↑ 文章页展示评论区块

<script>

    $(function(){
        var len = $('.new-single-content-pad p').length; //获取元素个数
        for(var i = 1;i<len;i++){ //顺序操作
            $('.new-single-content-pad p:eq('+i+')').attr('id','stream'+i); //更改id为顺序数字
            $('.new-single-content-pad p:eq('+i+')').attr('onclick','add_comment('+i+');'); //更改id为顺序数字
        }
});

$(".new-single-content-pad p").hover(function(){
    $(this).eq(0).css({'text-decoration':'underline dashed rgb(253, 188, 1)'});
},function(){
    $(this).eq(0).css({'text-decoration':'none'});
});


$(".hover-mark-content").hover(function(){
    var co_id = $(this).eq(0).attr('id');
    $('#stream'+co_id).attr('style','background: rgba(253, 188, 1, 0.18); !important');
    $('#stream'+(co_id - 1))[0].scrollIntoView();
},function(){
    var co_id = $(this).eq(0).attr('id');
    $('#stream'+co_id).attr('style','background: none; !important');
});

$(".new-single-comment-fixed input").focus(function(){
    if($('#mark_comment').val()=='请输入批注，按下Enter发送'){
        $('#mark_comment').val('');
    }
});
$(".new-single-comment-fixed input").blur(function(){
    if($('#mark_comment').val()==''){
        $('#mark_comment').val('请输入批注，按下Enter发送');
    }
});
$(".new-single-comment-fixed input").keydown(function(){
    $('#comment_btn').css('display','block');
});

var last_p_id = 'none';
var add_comment = function(id){
    if(last_p_id !== 'none'){
        if(last_p_id !== id){
            $('#stream'+last_p_id).attr('class','');
            last_p_id = id;
        }
    }else{
        last_p_id = id;
    }
    
    $('#mark_comment').css('display','unset');
    $('#stream'+id).attr('class','new-p-under');
    $('#comment_fixed').css('display','unset');
    $('#mark_comment').css({'border-width':'0px','box-shadow':'inset 0 -55px rgb(253, 188, 1)','color':'rgb(255, 255, 255)','font-weight':'600'});
    setTimeout("$('#mark_comment').css({'border-width':'5px','box-shadow':'inset 0 0px rgb(253, 188, 1)','color':'rgb(102, 102, 102)','font-weight':'400'});",500);
    $('#cancel_comment').attr('onclick','close_mark_comment('+id+');');
    $('#send_comment').attr('onclick','send_mark_comment('+id+');');
}

var close_mark_comment = function(id){
    $('#mark_comment').val('请输入批注，按下Enter发送');
    $('#comment_fixed').css('display','none');
    $('#stream'+id).attr('class','');
    $('#comment_btn').css('display','none');
}
<?php if($login){ ?>
var send_mark_comment = function(id){
    var content = $('#mark_comment').val();
    var post_id = <?php echo $post->ID; ?>;
    var user_id = <?php echo $user_id; ?>;
    var stream_id = id;
    
    if(content.indexOf("######") >= 0 || content == ''){
        alert('批注内容为空');
    }else{
    
    var formdata = new FormData();
        formdata.append('content',content);
        formdata.append('post_id',post_id);
        formdata.append('user_id',user_id);
        formdata.append('stream_id',stream_id);
        
    $.ajax({
        url: '?action=send_post_mark_comment', //此处 action 需在后台注册钩子
        type: "POST",
        data: formdata,
        cache: false,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function(data) {
            if(data.stats == '1'){
                setTimeout('location.reload();',500);
            }else{
                alert('系统错误');
            }
        },
        error: function(data){
            alert('系统错误');
        }
    });
    }
}
<?php } ?>

$("#mark_comment").bind("keydown", function(e) {
        // 兼容FF和IE和Opera    
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13){
            $('#send_comment').click();
        }
    });
</script>

↑ 文章页核心功能 jQuery 代码

<script>
$(function(){
    
<?php
    
    if($count1 == $count2){
        for($i=0;$i<$count1;$i++){ ?>
        
            $('#stream<?php echo $stream_ids[$i]; ?>').attr('class','new-p-undered');
            $('#stream<?php echo $stream_ids[$i]; ?>').html($('#stream<?php echo $stream_ids[$i]; ?>').html()+'<button class="underline-ps" co="<?php echo $stream_ids[$i]; ?>">PS</button>');
            
<?php }} ?>

$(".underline-ps").hover(function(){
    var coo_id = $(this).eq(0).attr('co');
    console.log(coo_id);
    $('#'+coo_id).css({'background':'#f7f8f9','padding':'5px 20px 5px 20px'});
},function(){
    var coo_id = $(this).eq(0).attr('co');
    $('#'+coo_id).css({'background':'#fff','padding':'0px 20px 0px 20px'});
});
    });

</script>

↑ 文章页处理标记内容 jQuery 代码

function send_post_mark_comment() {
 
 if(!empty($_POST['content']) && !empty($_POST['post_id']) && !empty($_POST['user_id']) && !empty($_POST['stream_id'])) {
 $content = addslashes($_POST['content']);
 $post_id = (int)$_POST['post_id'];
 $user_id = (int)$_POST['user_id'];
 $stream_id = (int)$_POST['stream_id'];
 
 if(get_post_status($post_id) !== false){
     $old_ids = get_post_meta($post_id,'stream_ids',true);
     $old_contents = get_post_meta($post_id,'stream_contents',true);
     $old_users = get_post_meta($post_id,'stream_users',true);
     if(!empty($old_ids) && !empty($old_contents)){
        $status = update_post_meta($post_id,'stream_ids',$old_ids.'######'.$stream_id);
        $status = update_post_meta($post_id,'stream_users',$old_users.'######'.$user_id);
        $status = update_post_meta($post_id,'stream_contents',$old_contents.'######'.$content);
     }else{
        $status = update_post_meta($post_id,'stream_ids',$stream_id);
        $status = update_post_meta($post_id,'stream_users',$user_id);
        $status = update_post_meta($post_id,'stream_contents',$content);
     }
     if($status !== false){
         echo json_encode(array('stats'=>'1'));
     }else{
         echo json_encode(array('stats'=>'0'));
     }
 }else{
     echo json_encode(array('stats'=>'0'));
 }
 
 
 die();
 }
}
// 将接口加到 init 中
add_action('init', 'send_post_mark_comment');

↑ 提交评论 action 函数

.new-single-comment-btn{
    float: right !important;
    border: 2px solid #959da5 !important;
    background-color: #fff !important;
    box-shadow: none !important;
    border-radius: 5px !important;
    padding: 12px 12px 11px 15px !important;
    text-align: center !important;
    text-shadow: none !important;
    color: #959da5 !important;
    margin: 0px !important;
    margin-top: -5px !important;
}


.new-single-comment-avatar{
    width: 40px;
    height: 40px;
    margin-left: -2px;
    margin-right: 13px;
    border-radius: 50%;
}

.new-single-div-author{
    position: absolute;
    right: 0px;
    top: -54px;
    padding: 6px 20px;
    font-family: sans-serif;
    font-size: 1.8rem;
    border-radius: 50px;
    box-shadow: 0 0.125rem 0.75rem 0 rgba(0,0,0,.08);
}

.new-p-under{
    text-decoration: underline dashed rgb(253, 188, 1) !important;
}

.new-p-undered{
    text-decoration: underline dashed rgb(253, 188, 1) !important;
}

.new-single-comment-fixed{
    display: none;
    position: fixed;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    border: none;
    transform: translateX(820px);
    margin-top: 22.1vh;
    width: 35vh;
    top: 0px;
    background: rgb(255, 255, 255);
}

.new-single-comment-fixed input{
    border: none;font-size: 1.4rem;font-weight: 400;font-family: sans-serif;color: #666;height: 55px;padding-left: 20px;    border-left: 5px solid rgb(253, 188, 1);
}

.new-single-comment-p{
    font-size: 1.2rem !important;
    margin: 5px 0 !important;
    color: #888;
    text-decoration: none !important;
}

.new-single-comment-img{
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    margin: 0px !important;
    display: inline-block !important;
    border-radius: 50% !important;
    margin-right: 7px !important;
    margin-left: -5px !important;
    margin-top: -4px !important;
}

.underline-ps{
    background: rgb(252, 188, 1);
    color: rgb(255, 255, 255);
    font-style: normal;
    font-size: 1rem;
    padding: 1px 10px;
    font-weight: 600;
    border-radius: 5px;
    margin-left: 5px;
}

.new-single-comment-div{
    padding: 0px 20px 0px 20px;
    border-left: 5px solid rgb(238, 238, 238);
    transition: ease-in-out .2s;
}

.new-single-comment-div h4{
    font-weight: 600;
    font-size: 1.9rem;
    color: #666;
    margin-bottom: 3px;
}


.new-single-comment-div-list{
    padding: 10px 0px;
    padding-left: 0px;
    border-top: 1px solid #eee;
    max-height: 50vh;
    overflow: hidden;
    overflow-y: auto;
    transition: ease-in-out .2s;
}

.new-cap-tags{
    margin-top: -20px;
}

.new-cap-tags a{
    position: relative;
    display: inline-block;
    height: 30px;
    padding: 0 15px;
    font-size: 1.7rem;
    line-height: 30px;
    color: rgb(0, 132, 255) !important;
    vertical-align: top;
    border-radius: 100px;
    background: rgba(0, 132, 255, 0.1);
}

.new-single-comment-fixed-cap{
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    border: none;
    background: rgb(255, 255, 255);
    transform: none !important;
    display: block !important;
    margin-top: 30px !important;
    margin-left: 44px !important;
    width: 100%;
    position: relative;
}

↑ CSS部分

截图

jQuery + Php 实现类似 Medium 的文章页内容批注评论功能

后记

大概还不准备放在 Tony 主题 里 (感觉没啥必要)
之后可能会做成 WordPress 插件2333

php jquery

MXstudying

MXstudying

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

PHP实现倒计时功能

<p>考试结束时间：<?

wqcong 2020-11-16

关于PHP求解三数之和问题详析

给你一个包含 n 个整数的数组 nums，判断 nums 中是否存在三个元素 a，b，c ，使得 a + b + c = 0 ？请你找出所有满足条件且不重复的三元组。给定数组 nums = [-1, 0, 1, 2, -1, -4]，暴力枚举法，三层 fo

zyyjay 2020-11-09

PHP中isset、empty的用法与区别示例详解

在编写程序调用变量时，遇到未定义的变量时，会报错，这是就需要我们对变量先进行判断，再进行相关操作。如果已经使用 unset() 释放了一个变量之后，它将不再是 isset()。若使用 isset() 测试一个被设置成 NULL 的变量，将返回 FALSE。

xuebingnan 2020-11-05

PHP后门隐藏的一些技巧总结

Get-ItemProperty -Path D:\1.dll | Format-list -Property * -Force. powershell.exe -command "ls 'upload\*.*' | foreach-object

samtrue 2020-11-22

PHP 99乘法表的几种实现代码

首先按照规矩，还是先废话一番，对于刚学PHP的新手来讲，用php写九九乘法表无疑是非常经典的一道练习题。但不要小看这道练习题，它对于逻辑的考验还是相当到位的。也许有人会觉得，九九乘法表有什么难的，我两分钟就可以写出来。可是对于新手，却是可以锻炼逻辑思维的。

stefan0 2020-11-22

php7连接MySQL实现简易查询程序的方法

假设我们制作的是分班情况查询程序，将使用PHP7的环境以PDO的方式连接MySQL。通过学号和姓名查询自己所在班级。准备就绪，开始吧，现在！echo "<tr><th>学号</th><th>姓名&l

yifangs 2020-10-13

如何利用PHP实现上传图片功能详解

对于中文网页需要使用<meta charset="utf-8">声明编码，否则会出现乱码。二 、form表单 <form>标签用于为用户输入创建 HTML 表单，表单里包含php文件路径，配置数据传输方式，{ec

songshijiazuaa 2020-09-24

PHP编程一定要改掉的5个不良习惯

测试循环前数组是否为空？foreach循环或数组函数可以处理空数组。这不是特定于PHP的，但我经常看到它。你可以通过提前返回，来减少缩进级别的极简代码！该函数的所有“有用”主体现在处于第一个缩进级别。而且该函数一次可以接受多个参数！最后一个错误我看到的往往

hebiwtc 2020-09-18

goto语法在PHP中的使用教程

在C++、Java及很多语言中，都存在着一个神奇的语法，就是goto。代码运行到 goto 位置时，就跳转到了 a: 所在的代码行并继续执行下去。它们都会报同样的错误，因为作用域的关系无法找到定义的 goto 标签。代码执行到 goto 时，跳回了之前的b

天步 2020-09-17

PHP http请求超时问题解决方案

1，curl进程运行了一个世纪还木结束，curl的时候设置了超时时间 --connect-timeout 1000. 2，operation timed out after 1000 milliseconds with 0 bytes received.

83911535 2020-11-13

PHP dirname简单使用代码实例

给出一个包含有指向一个文件的全路径的字符串，本函数返回去掉文件名后的目录名。在 Windows 中，斜线（/）和反斜线（\）都可以用作目录分隔符。在其它环境下是斜线（/）。否则返回的是把path中结尾的/component去掉之后的字符串。echo &qu

whatsyourname 2020-11-13

基于PHP实现用户在线状态检测

//$sql = ' delete from __TABLE__ where ';login_account')) { // 如果是登录用户

zhouyuqi 2020-11-10

PHP常量DIRECTORY_SEPARATOR原理及用法解析

在 Windows 中，斜线(/)和反斜线(\)都可以用作目录分隔符，在linux上路径的分隔符是"/"。在程序本地运行很正常，上传到服务器后，发现图片没有显示出来，图片链接是绝对路径 var/，而且当中带有 \ 但是我记得这个路径已经

Noneyes 2020-11-10

PhpStorm 2020.3：新增开箱即用的PHP 8属性(推荐)

wzm 2020-10-30

PHP fopen中文文件名乱码问题解决方案

一般在php中会使用fopen进行生成文件，但是当文件名存在中文时保存文件会出现中文乱码。$fileName = __DIR__ . '\测试.txt';所以当要在页面上输出文件名又需要保存文件时，可以先保存原先的中文文件名，再通过文件名编码进行创建文件。

mathchao 2020-10-28

PHP dirname功能及原理实例解析

给出一个包含有指向一个文件的全路径的字符串，本函数返回去掉文件名后的目录名。在 Windows 中，斜线（/）和反斜线（\）都可以用作目录分隔符。在其它环境下是斜线（/）。否则返回的是把path中结尾的/component去掉之后的字符串。echo &qu

王志龙 2020-10-28

PHP dirname(__FILE__)原理及用法解析

即使这个文件被其他文件引用，__file__始终是它所在文件的完整路径，而不是引用它的那个文件完整路径。dirname;得到的是__FILE__所在文件的上一层目录名。_FILE_ 得到的就是完整路径 即 F:\Modoer_2.6_SC_UTF8\upl

wwwsurfphpseocom 2020-10-28

如何运行/调试你的PHP代码

没有任何一名程序员可以一气呵成、完美无缺的在不用调试的情况下完成一个功能或模块。调试实际分很多种情况。本篇文章我分享下自己在实际开发工作中的经验，我个人理解,调试分三种,注意我所讲的是调试并非测试。这种方式简单粗暴,一般PHP程序员都会用，那就是浏览器调试

diskingchuan 2020-10-23

php redis setnx分布式锁简单原理解析

我就废话不多说了，大家还是直接看代码吧~如果一个请求更新缓存的时间比较长，甚至比锁的有效期还要长，导致在缓存更新过程中，锁就失效了，此时另一个请求会获取锁，但前一个请求在缓存更新完毕的时候，如果不加以判断直接删除锁，就会出现误删除其它请求创建的锁的情况，所

savorTheFlavor 2020-10-23

php使用event扩展的io复用测试的示例

//sock_set_option; //复用还处于 TIME_WAIT

Nicolase 2020-10-20
MXstudying

MXstudying

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号