Web アプリケーションで jquery、php、および html を使用しています。ユーザーがテキストを選択して「ハイライト」ボタンを押すことでテキストをハイライトできるようにするハイライト機能を追加したい..どうすればいいですか?
<span id="text">
highlighted text
</span>
<button type="submit" name="highlight"></button>
ユーザーがこのボタンを押すと、選択されたテキストが強調表示され、ユーザーのテキストの変更が保存されます。また、ユーザーがハイライトの色を選択できるようにしたいと思います。
これは長いテキストです。おそらくあなたの答えですが、これはコメント ゾーンに収まりませんでした。
最初に、何を開発する必要があるか、どのテクノロジを使用するかを決定するのに役立ついくつかの議論があります。
jQuery または JavaScript ?
JavaScript。jQuery を使用する場合、ハイライトしたい Web サイトに jQuery がない可能性があるためです。
jQuery があったとしても、それは別のバージョンである可能性があり、あなたと Web サイトにとって混乱が生じます。
JavaScrpt は共通言語であり、Singleton の概念を使用できます。
ブックマークレットまたは拡張機能 ?
ブックマークレットは、DOM にデータを挿入するのが非常に簡単なためです。
拡張機能を開発する場合、それは大変な作業です。Chrome、Mozilla、Internet Exploder (エクスプローラー)、Safari などの拡張機能を開発する必要があります。これは大変な作業です。
各ブラウザには独自のバグ、拡張機能が関与する場合の方法があるため、ブックマークレットを使用してください。
あなたのアプリはシンプルですが、多くのコードが含まれています。
まず、ブックマークレットは単純なボタンなので、表示されます:))
このボタンをクリックすると、データが DOM に挿入されます。
ここからアプリが始まります。
アプリは、表示中の Web ページ内で 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();