for - javascript কি



কোনও সম্পাদনযোগ্য উপাদানের বিষয়বস্তু সংশোধন করার কি নমনীয় উপায় আছে? (1)

আপনার সমস্যায় দুটি সাব-সমস্যা রয়েছে:

  1. প্রসঙ্গমেনু ক্রিয়াটির লক্ষ্য উপাদানটি সনাক্ত করুন।
  2. ক্যারেটে একটি কাস্টম পাঠ্য খণ্ডন .োকান (কোনও নির্বাচন উপস্থিত থাকলে তা সরান)।

সাবপ্রব্লেম 1: লক্ষ্য উপাদান সনাক্তকরণ

  • যদি crbug.com/39507 সমাধান করা হয়, তবে উপাদান পাওয়া সহজ। এই বৈশিষ্ট্যটির অনুরোধটি কোনও অগ্রগতি ছাড়াই প্রায় 5 বছরের পুরানো, সুতরাং আপনার আশাটি এই বিষয়ে উচ্চতর করবেন না। বিকল্প পদ্ধতিগুলির জন্য আপনাকে আরও দুটি সাব-প্রবলেমে 1 টি ভাঙতে হবে: লক্ষ্য ফ্রেমটি সনাক্তকরণ এবং তারপরে লক্ষ্যবস্তু ডিওএম উপাদান নির্বাচন করুন।

বেশ কয়েকটি এপিআই রয়েছে যা ফ্রেম সনাক্তকরণে সহায়তা করে (সেগুলির সংমিশ্রণটি ব্যবহার করুন, আপনার পরিস্থিতিতে যে কোনও সংমিশ্রণটি সবচেয়ে ভাল ফিট করে তা চয়ন করুন):

  • contextMenus.onClicked ইভেন্টটি পৃথক বস্তুতে tabs.Tab একটি দৃষ্টান্তে সম্পত্তি হিসাবে ট্যাবের আইডি ( tab.id ) সরবরাহ করে। ট্যাব এবং ফ্রেমের ইউআরএল ( frameUrl ) object
  • chrome.tabs.executeScript পদ্ধতি সরাসরি কোনও ফ্রেমে স্ক্রিপ্ট চালাতে পারে।
    (বর্তমানে কেবলমাত্র শীর্ষ স্তরের ফ্রেম বা সমস্ত ফ্রেম, নির্দিষ্ট ফ্রেমকে লক্ষ্য করে কাজ চলছে - crbug.com/63979 , ক্রোম 42 এর জন্য পরিকল্পনা করা হয়েছে)।
    নির্দিষ্ট ফ্রেমকে লক্ষ্যবস্তু প্রয়োগ না করা পর্যন্ত আপনি প্রতিটি ফ্রেমে কন্টেন্ট স্ক্রিপ্ট সন্নিবেশ করতে এবং frameUrl (বা পরবর্তী পদ্ধতির সংমিশ্রণ ব্যবহার) এর সাথে ইউআরএল তুলনা করতে পারেন।
  • ধরে chrome.runtime.onMessage যে আপনি ইতিমধ্যে chrome.runtime.onMessage শ্রোতার সাথে একটি সামগ্রী স্ক্রিপ্ট প্রবেশ chrome.runtime.onMessage , frameId দ্বারা চিহ্নিত একটি নির্দিষ্ট ফ্রেমে একটি বার্তা প্রেরণের জন্য frameId (ক্রোম 41)।
  • প্রদত্ত tabId জন্য কোনও ট্যাবে সমস্ত ফ্রেমের তালিকা পেতে chrome.webNavigation.getAllFrames পদ্ধতিটি ব্যবহার করুন, তারপরে একটি পরিচিত frameUrl দ্বারা ফ্রেমের তালিকা ফিল্টার করে লক্ষ্য ফ্রেমের frameUrl
  • (ভবিষ্যতে (ক্রোম 42?), contextMenus.onClicked করে frameId )

ঠিক আছে, ধরে নিচ্ছেন যে আপনার সঠিক ফ্রেম রয়েছে, আপনি লক্ষ্য উপাদানটি পেতে কেবল document.activeElement ব্যবহার করতে পারেন কারণ ইনপুট উপাদানগুলি ক্লিকের দিকে মনোনিবেশ করে।

সাবপ্রব্লেম 2: ক্যারেটে একটি পাঠ্য খণ্ড .োকানো

যদি লক্ষ্য উপাদানটি <textarea> a <textarea> বা <input> তবে আপনি কেবল ব্যবহার করতে পারেন

// Assume: elem is an input or textarea element.
var YOURSTRING = 'whatever';
var start = elem.selectionStart;
var end = elem.selectionEnd;
elem.value = elem.value.slice(0, start) + YOURSTRING + elem.value.substr(end);
// Set cursor after selected text
elem.selectionStart = start + YOURSTRING.length;
elem.selectionEnd = elem.selectionStart;

অন্যথায়, আপনাকে কোনও সামগ্রী সম্পাদনাযোগ্য উপাদান আছে কিনা তা জানতে হবে এবং যদি তা থাকে তবে বিদ্যমান থাকা কোনও নির্বাচন অপসারণ করুন এবং অবশেষে আপনার পছন্দসই পাঠ্যটি সেখানে রেখে দিন।

var elem = document.activeElement;
if (elem && elem.isContentEditable) {
    // YOURSTRING as defined before
    var newNode = document.createTextNode(YOURSTRING);

    var sel = window.getSelection();
    // Remove previous selection, if any.
    sel.deleteFromDocument();
    // If there is no range in the selection, add a new one, with the
    // caret set to the end of the input element to avoid the next error:
    //"Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index."
    if (sel.rangeCount === 0) {
        sel.addRange(document.createRange());
        sel.getRangeAt(0).collapse(elem, 1);
    }
    // Insert new text
    var range = sel.getRangeAt(0);
    range.insertNode(newNode);
    // Now, set the cursor to the end of your text node
    sel.collapse(newNode, 1);
}

শেষ উদাহরণে ব্যবহৃত ওয়েব প্ল্যাটফর্ম এপিআইয়ের জন্য প্রাসঙ্গিক ডকুমেন্টেশন:

বিষয়:

আমি একটি গুগল ক্রোম এক্সটেনশন তৈরি করছি যা কোনও সামগ্রী স্ক্রিপ্ট এবং ইভেন্ট পৃষ্ঠার মাধ্যমে ওয়েব পৃষ্ঠাগুলির সাথে ইন্টারেক্ট করে।

আমার কাছে প্রসঙ্গ মেনু অপশন রয়েছে যা ব্যবহারকারীর chrome.contextMenus API দ্বারা editable হিসাবে শ্রেণিবদ্ধ করা এমন কোনও উপাদানটিতে ক্লিক করে।

বিকল্পগুলি সাধারণত প্রবেশ করানো পাঠ্যের শর্টকাটের মতো কাজ করে। যখন ব্যবহারকারী কোনও বিকল্প ক্লিক করে, কিছু পাঠ্য কার্সরের অবস্থানে উপাদানটির ভিতরে স্থাপন করা হয়। ব্যবহারকারীর যদি পাঠ্যকে হাইলাইট করা থাকে তবে তা মুছে ফেলা হবে।

সমস্যা:

সমস্ত সম্পাদনযোগ্য উপাদান একইভাবে সংশোধন করা যায় না।

উপাদানটি যদি একটি সাধারণ textarea তবে এই সমাধানটি কার্যকর করে কাঙ্ক্ষিত ফলাফল অর্জন করা যেতে পারে:

তবে, আমি ধরে নিতে পারি না যে আমি একটি সাধারণ textarea সাথে ইন্টারেক্ট করছি।

সম্ভাব্য সংক্ষিপ্তসারগুলির মধ্যে রয়েছে:

  • পাঠ্য অঞ্চলটি একটি Iframe অভ্যন্তরে লুকানো রয়েছে যা উপাদানটির সাথে ইন্টারঅ্যাক্ট করার জন্য প্রক্রিয়াটি জটিল করে Iframe ( document.activeElement এলিমেন্টটি আসলে পাঠ্য উপাদানটি বাদ দিয়ে Iframe ফিরে আসতে পারে)।

  • <textarea> মোটেও <textarea> / / <input> নয়, বরং একটি contentEditable <div> এই ক্ষেত্রে। .value হবে না।

সুতরাং আমি এটি করার একটি নমনীয় উপায় অনুসন্ধান করছি যা সমস্ত প্রান্তের কেস সুন্দরভাবে পরিচালনা করতে পারে।

কিছু সমাধান আমি চেষ্টা করেছি:

  • বিকল্প 1 :
    আমি প্রথমে সিস্টেম ক্লিপবোর্ডে মান সংরক্ষণ করার পরিকল্পনা করেছিলাম। তারপরে, আমি উপাদানটি সংশোধন করার জন্য কেবলমাত্র document.execCommand('paste') ব্যবহার করতে পারি। তবে, চেষ্টা করার পরে, এই পদ্ধতির আমার প্রাথমিক পদ্ধতির মতো একই ত্রুটি রয়েছে বলে মনে হচ্ছে। ( এই প্রশ্নটি দেখুন)

    অতিরিক্তভাবে, এই পদ্ধতিটি ক্লিপবোর্ডে যা ছিল তা অপারেশনের আগে মুছে ফেলবে। এটি অনাকাঙ্ক্ষিত এবং যে কোনও সমাধান যা এই পদ্ধতির ব্যবহার করে তা অবশ্যই একটি কাজ প্রদান করবে।

  • বিকল্প 2:
    অন্য একটি বিকল্প যা আমি বিবেচনা করেছি তা হ'ল স্ট্রিংয়ের প্রতিটি অক্ষরের জন্য কীবোর্ড ইভেন্টগুলি প্রেরণ করা। যাইহোক, এই সমাধানের সাহায্যে আপনি এখনও Iframe সমস্যাটি নিয়ে Iframe এবং এটি আপনাকে বিশেষ ইউনিকোড অক্ষর ব্যবহার করতে দেয় না। ┻━┻ ︵ ヽ (`Д´) ノ ︵ ┻━┻




google-chrome-extension