JavaScript
निष्पादित और संतुष्ट

Angular 2 AngularJS ASP.NET CSS HTML jQuery Node.js PHP React Regular Expressions
खोज…


वाक्य - विन्यास

  • बूल समर्थित = document.execCommand (कमांडनेम, showDefaultUI, valueArgument)

पैरामीटर

commandId मूल्य
Line इनलाइन प्रारूपण कमांड
पीछे का रंग रंग मूल्य स्ट्रिंग
साहसिक
CreateLink URL स्ट्रिंग
fontName फ़ॉन्ट परिवार का नाम
फ़ॉन्ट आकार "1", "2", "3", "4", "5", "6", "7"
फ़ोर कलर रंग मूल्य स्ट्रिंग
स्ट्राइकथ्रू
ऊपर की ओर लिखा हुआ
अनलिंक
⋮ ब्लॉक स्वरूपण आदेश
हटाना
formatBlock "पता", "dd", "div", "dt", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre"
forwardDelete
insertHorizontalRule
insertHTML HTML स्ट्रिंग
चित्र डालें URL स्ट्रिंग
insertLineBreak
insertOrderedList
insertParagraph
insertText पाठ की पंक्ति
insertUnorderedList
justifyCenter
justifyFull
justifyLeft
justifyRight
आउटडेंट
Commands क्लिपबोर्ड कमांड
प्रतिलिपि वर्तमान में चयनित स्ट्रिंग
कट गया वर्तमान में चयनित स्ट्रिंग
पेस्ट
⋮ विविध आदेश
defaultParagraphSeparator
फिर से करें
सभी का चयन करे
styleWithCSS
पूर्ववत
useCSS

का प्रारूपण

उपयोगकर्ताओं के लिए स्वरूपण जोड़ सकते हैं contenteditable दस्तावेज या तत्वों स्वरूपण (आदि इटैलिक के लिए बोल्ड, Ctrl-मैं, के लिए Ctrl-बी) के लिए या खींचने और से छवियों, लिंक या मार्कअप छोड़ने के द्वारा इस तरह के सामान्य कीबोर्ड शॉर्टकट के रूप में अपने ब्राउज़र के सुविधाओं का उपयोग करते हुए क्लिपबोर्ड।

इसके अतिरिक्त, डेवलपर्स मौजूदा चयन (हाइलाइट किए गए पाठ) के लिए स्वरूपण लागू करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। 

document.execCommand('bold', false, null); // toggles bold formatting
document.execCommand('italic', false, null); // toggles italic formatting
document.execCommand('underline', false, null); // toggles underline

संतोषी के परिवर्तन को सुनना

घटनाक्रम यह है कि ज्यादातर प्रपत्र तत्वों के साथ काम (जैसे, change , keydown , keyup , keypress ) साथ काम नहीं करते contenteditable ।

इसके बजाय, आप input ईवेंट के साथ contenteditable सामग्री के परिवर्तनों को सुन सकते हैं। मान लिया जाये कि contenteditableHtmlElement है एक जे एस डोम उद्देश्य यह है कि है contenteditable : 

contenteditableHtmlElement.addEventListener("input", function() {
    console.log("contenteditable element changed");
});

शुरू करना

एचटीएमएल विशेषता contenteditable एक उपयोगकर्ता के संपादन योग्य क्षेत्र में एक HTML तत्व चालू करने के लिए एक आसान तरीका प्रदान करता है 

<div contenteditable>You can <b>edit</b> me!</div>

नेटिव रिच-टेक्स्ट एडिटिंग

जावास्क्रिप्ट और का उपयोग करना execCommand W3C आप अतिरिक्त रूप से अधिक संपादन सुविधाओं पारित कर सकते हैं वर्तमान में ध्यान केंद्रित contenteditable तत्व (विशेष रूप से कैरट स्थिति या चयन पर)।

execCommand फ़ंक्शन विधि 3 तर्कों को स्वीकार करती है 

document.execCommand(commandId, showUI, value)
  • commandId स्ट्रिंग। उपलब्ध ** कमांड आई की सूची से ** एस
    (देखें: पैरामीटर्स → कमांडआईड )
  • showUI बुलियन (लागू नहीं किया गया। false उपयोग करें)
  • value स्ट्रिंग यदि कोई कमांड आदेश-संबंधित स्ट्रिंग मूल्य की अपेक्षा करता है, अन्यथा "" ।
    (देखें: पैरामीटर → मान )

"bold" कमांड और "formatBlock" (जहां एक मान अपेक्षित है) का उपयोग करके उदाहरण: 

document.execCommand("bold", false, "");          // Make selected text bold
document.execCommand("formatBlock", false, "H2"); // Make selected text Block-level <h2>

त्वरित प्रारंभ उदाहरण: 

<button data-edit="bold"><b>B</b></button>
<button data-edit="italic"><i>I</i></button>
<button data-edit="formatBlock:p">P</button>
<button data-edit="formatBlock:H1">H1</button>
<button data-edit="insertUnorderedList">UL</button>
<button data-edit="justifyLeft">&#8676;</button>
<button data-edit="justifyRight">&#8677;</button>
<button data-edit="removeFormat">&times;</button>

<div contenteditable><p>Edit me!</p></div>

<script>
[].forEach.call(document.querySelectorAll("[data-edit]"), function(btn) {
  btn.addEventListener("click", edit, false);
});

function edit(event) {
  event.preventDefault();
  var cmd_val = this.dataset.edit.split(":");
  document.execCommand(cmd_val[0], false, cmd_val[1]);
}
<script>

jsFiddle डेमो
बेसिक रिच-टेक्स्ट एडिटर उदाहरण (आधुनिक ब्राउज़र)

अंतिम विचार
यहां तक कि एक लंबे समय (IE6) के लिए प्रस्तुत किया जा रहा है, क्रियान्वयन और क्रियान्वयन के execCommand ब्राउज़र से ब्राउज़र के लिए "पूरी तरह से चित्रित और क्रॉस-ब्राउज़र संगत WYSIWYG संपादक का निर्माण" किसी भी अनुभवी जावास्क्रिप्ट डेवलपर के लिए एक कठिन कार्य है।
यहां तक कि अगर अभी तक पूरी तरह से मानकीकृत नहीं है, तो आप क्रोम, फ़ायरफ़ॉक्स, एज जैसे नए ब्राउज़रों पर बहुत अच्छे परिणाम की उम्मीद कर सकते हैं। यदि आपको अन्य ब्राउज़रों के लिए बेहतर समर्थन और HTMLTable संपादन आदि जैसी विशेषताओं की आवश्यकता है, तो अंगूठे का एक नियम पहले से मौजूद और मजबूत रिच-टेक्स्ट संपादक की तलाश में है।

क्लिपरैड से कॉपीबोर्ड का उपयोग निष्पादित करें ("कॉपी")

उदाहरण: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <textarea id="content"></textarea>
    <input type="button" id="copyID" value="Copy" />
    <script type="text/javascript">
        var button = document.getElementById("copyID"),
            input = document.getElementById("content");

        button.addEventListener("click", function(event) {
            event.preventDefault();
            input.select();
            document.execCommand("copy");
        });
    </script>
</body>
</html>

document.execCommand("copy") क्लिपबोर्ड पर वर्तमान चयन की प्रतिलिपि बनाता है



Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow