php - 如何在我的 Web 应用程序中制作高亮功能？

Question

我在我的 Web 应用程序中使用 jquery、php 和 html。我想添加一个突出显示功能，允许用户通过选择文本然后按“突出显示”按钮来突出显示任何文本。我该怎么做？

<span id="text">
highlighted text
</span>
<button type="submit" name="highlight"></button>

当用户按下此按钮时，我想突出显示任何已选择的文本，然后为任何用户保存对文本的更改。我还希望用户能够选择突出显示颜色。

Answer 1

这是一篇很长的文字，也许是你的答案，但这不适合评论区；

首先，一些论据，以帮助您决定应该开发什么，使用什么技术；

jQuery 还是 JavaScript？

JavaScript，因为如果您使用 jQuery，您要突出显示的网站可能没有 jQuery；

即使有 jQuery，它也可能是另一个版本，对于您和网站来说，事情会变得一团糟；

JavaScrpt 是一种通用语言，可以使用 Singleton 概念；

书签或扩展？

Bookmarklet，因为很容易在 DOM 中注入数据。

如果你开发一个扩展，那就是很多工作；您将不得不为 Chrome、Mozilla、Internet Exploder 开发扩展程序，我称之为（资源管理器）、safari ......而且工作量很大；

每个浏览器都有自己的bug，涉及扩展时的方法，所以使用书签；

您的应用程序很简单，但涉及大量代码；

首先，Bookmarklet 它是一个简单的按钮，所以它出现了 :))

这个按钮，当被点击时，它会将数据注入到 DOM 中；

这就是应用程序开始的地方；

您的应用程序将通过 javascript 请求与您正在查看的网页中的服务器进行通信；

此外，您必须附加/分离事件侦听器，例如鼠标按下；

此外，所有这些荧光笔过程都需要启动；这里可能涉及一些参数，以便通过使用唯一 ID 知道在表单中设置数据的位置；

这顶帽子是你想要的吗？

如果是，我会尽快发布代码；

我有没有提到你在使用 GEt 方法时有大约 2096 个字符的限制？

在将数据从 javascript 传递到服务器时，您还必须使用 JSON.stringify 方法；

这是一个使用 javascript 的典型书签按钮：

javascript:(function(){cas=document.createElement('SCRIPT');cas.type='text/javascript';cas.src=(window.location.protocol)+'<?= str_replace('http:', '', Yii::app()->createAbsoluteUrl('/api/v1/GetBookmarklet', array(), 'http')); ?>?version=<?= Yii::app()->getModule('api')->params['button_version']; ?>&url='+encodeURIComponent(location.href)+'&userAgent='+(JSON.stringify(navigator.userAgent))+((document.doctype)?('&doctype='+(document.doctype.name)):'')+'&x='+(Math.random());document.getElementsByTagName('head')[0].appendChild(cas);})();

我使用 Yii MCV 生成这个按钮，所以忽略 Yii 的东西......

我的书签代码很大，但这是一个简短的短版本： ps：此代码不起作用，因为它是部分的，它只是让您看到您想要做什么，以及它是如何完成的；这只是 js 部分，php 部分，您在其中捕获和处理数据，由您决定

<?php if (false) { ?><script><?php } ?>
    var Bookmarklet = Bookmarklet ? Bookmarklet : function(){

        var assetsURL = 'images and others url/ 3rd party url';
    var apiURL = 'server url';

    var imgsList = new Array();
    var ImgsListImgID = 0;
    //all the images found on the webpage
    var images = 0;
    var imgsListHeightWidth = [];
        var isHighlighting = false;

    var versionStatus;

        var flag1 = false;
        var flag2 = false;

        var precedentObj = null;

        var overlay,
        current,
        handler;

        var extractHL;
        var name=false,price=false,image=false;

    //do we save logs ?
    var consoleLog = true;

    var version_popup;

        var f  = function ()
        {

            var script = document.createElement("script");
            script.type = 'text/javascript';
            script.src = assetsURL+'/sizzle.js';
            var header = document.getElementsByTagName("head");
            header[0].appendChild(script);

            var popupdividreset = "reset";
            var DOCreset = document.getElementById(popupdividreset);

            if(DOCreset != null){
                return false;
            }

            var popupdivid = "details";
            var DOC = document.getElementById(popupdivid);

            if(DOC != null){
                return false;
            }

            //load css file, force a reload/recache
            addCSS(assetsURL+'/style.css?x=<?= $this->module->params['interface_version']; ?>');

            var divreset = document.createElement("div");
            divreset.id = popupdividreset;

            var div = document.createElement("div");
            div.id = popupdivid;

            //this will highlight the DOM element that you are hovering
            var divhighlight = document.createElement("div");
            divhighlight.id = "overlayhighlight";

            var divOutside = document.createElement("div");
            divOutside.id = "Overlay";

            var str = '<div id="divempty"></div>';

            str += divForm( 'none', div.id, images );              
            str += divLogin( 'none', div.id);            
            str += divDetails( 'none', div.id);
            str += divSuccess( 'none', div.id);
            str += divBroken( 'none', div.id);

            div.innerHTML = str;
            divreset.appendChild(div);
            document.body.insertBefore(divreset, document.body.firstChild);

            divOutside.innerHTML = "";
            document.body.insertBefore(divOutside, document.body.firstChild);

            //inserting the DOM div blank element imediatly after body tag
            divhighlight.innerHTML = "";
            document.body.insertBefore(divhighlight, document.body.firstChild);


            };

            function addCSS(url){
                var headID = document.getElementsByTagName("head")[0];
                var cssNode = document.createElement('link');
                cssNode.type = 'text/css';
                cssNode.rel = 'stylesheet';
                cssNode.href = url;
                cssNode.media = 'screen';
                headID.appendChild(cssNode);
            };





            function divForm( displayTarget, div_id, images )
            {

                return '<?php $this->renderHTMLtoJS('form', array('js' => array('displayTarget', 'div_id', 'images', 'assetsURL'), 'product' => $product, 'follower' => $follower)); ?>';

            };

            function createElementScript(src)
            {

                var script = document.createElement("script");
                script.type = 'text/javascript';
                script.src = src;
                //console.log("SRC: "+src);
                var header = document.getElementsByTagName("head");
                header[0].appendChild(script);

            };

            function hideAllDivs() {
                var a = ['ParrentLogin','ParrentDetails','ParrentForm'];
                for (x in a) {
                    var d=document.getElementById(a[x]);
                    if (d) {
                        d.style.display='none';
                    }
                }
            };

            function divGallery( displayTarget, div_id )
            {
                return '<?php $this->renderHTMLtoJS('gallery', array('js' => array('displayTarget', 'div_id', 'assetsURL'))); ?>';

            };

            f.prototype = {



                init : function() {
                            this.showDiv('ParrentForm');
                },

                showDiv: function(divId) {
                    var d=document.getElementById(divId);
                    if (d) {
                        hideAllDivs();
                        d.style.display=document.getElementById("divempty").style.display;
                    }
                },

                actionSubmit : function(formID,e)
                {
                    //alert(formID+'click');
                    if( formID == 1 )Bookmarklet.outBound("login");
                    if( formID == 2 )Bookmarklet.outBound("follow");
                    e.preventDefault();
                },
                toggleItem : function(id){
                    var item = document.getElementById(id);
                    if(item){
                        var parent = item.parentNode;
                        parent.removeChild(item);
                    }
                },
                hideDivs : function(){
                    hideAllDivs();
                },
                //all the data that has been send from the server to the bookmarlet passed thru this method
                //inBound has 2 parameters, because we need to know the action and the result value
                inBound : function(action,data)
                {

                    try {
                        //console.log(data);
                        if (parseInt(data.code) <0 ) {
                            //system error
                            alert('Internal error!');
                            return;
                        }
                        switch(action)
                        {
                            case 'bookmarklet':
                                alert('Bookmarklet error');
                                break;
                            case 'follow':
                                if(data.code!=0)
                                {
                                    document.getElementById('form_error').innerHTML = data.message;
                                }
                                else
                                {
                                    this.showDiv('ParrentSuccess');
                                }
                                break;
                            default:
                                alert('Unknown inBound action: '+action);
                                break;
                        }
                    } catch (err) {
                        if (consoleLog) {
                            //console.log(err.toString());
                        }
                        alert('Something went wrong, server returned invalid message!');
                    }
                },//end f inBound()
                //method used to transfer the data from the bookmarklet to the server
                //outBound needs to know only the action, the parameters will be contructed, ex. : ?action=x&...
                outBound : function(action)
                {
                    try {
                        switch(action)
                        {//start switch
                            case 'follow':
                                    createElementScript(apiURL+"/Follow?input="+encodeURIComponent(s));
                                break;
                            default:
                                alert('Unknown outBound action: '+action);
                                break;
                        }//end switch
                    }
                    catch (err) {
                        if (consoleLog) {
                            //console.log(err.toString());
                        }
                        alert('Something went wrong, couldn\'t prepare data!');
                    }


                }//end f outBound()
            }
            return f;
        }();
        var Bookmarklet = new Bookmarklet();    
        Bookmarklet.init();