माध्यम संपादक में लिंक का उपयोग कैसे करें?

मैं उत्कृष्ट Medium Editor का प्रयास कर रहा हूं। मेरी समस्या यह है कि मुझे "काम" के लिंक नहीं मिल रहे हैं।माध्यम संपादक में लिंक का उपयोग कैसे करें?

सरलतम पर, यहाँ कुछ HTML/JS समस्या प्रदर्शित करने के लिए उपयोग करने के लिए है:

HTML:

<html> 
<head> 
    <script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script> 
    <link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8"> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/medium-editor/latest/css/themes/beagle.min.css" type="text/css"> 
</head> 
<body> 
    <div class='editable'> 
    Hello world. <a href="http://www.google.com">link</a> 
    </div> 
</body> 
</html>

जावास्क्रिप्ट:

var editor = new MediumEditor('.editable');

यह fiddle समस्या (का उपयोग कर प्रदर्शित करता है उपरोक्त कोड)।

यदि आप लिंक पर होवर करते हैं, तो एक पॉपअप प्रकट होता है।
यदि आप लिंक पर क्लिक करते हैं, तो कुछ भी नहीं होता है।
यदि आप पॉपअप पर क्लिक करते हैं, तो एक प्रपत्र दिखाई देता है जहां आप लिंक संपादित कर सकते हैं।

ऐसा लगता है कि लिंक पर क्लिक करना मुझे लिंक लेना चाहिए जहां लिंक href लक्ष्यीकरण कर रहा है। लिंक का उपयोग करने का एकमात्र तरीका राइट क्लिक करना है और या तो एक नए टैब या नई विंडो में खुलना है - जिसे मैं अपने उपयोगकर्ताओं से नहीं करना चाहता हूं।

मुझे लगता है कि मुझे कॉन्फ़िगरेशन में कुछ आसान होना चाहिए (या तो Anchor Preview Options या Anchor Form Options)। दुर्भाग्य से, मैं इसे नहीं देख रहा हूँ।

^{अपने वास्तविक आवेदन में, मैं कर रहा हूँ नहींjQuery का उपयोग कर, लेकिन मैं angularjs उपयोग कर रहा हूँ। यदि सख्ती से मध्यम संपादक का उत्तर मौजूद नहीं है, तो मैं मूल जेएस या एंजुलरजेस द्वारा प्रदान की जाने वाली किसी भी चीज़ का उपयोग करने के लिए वापस आ सकता हूं।}

var iElement = angular.element(mediumEditorElement); 

iElement.on('click', function(event) { 
    if (
     event.target && event.target.tagName == 'A' && 
     event.target.href && !event.defaultPrevented) { 
    $window.open(event.target.href, '_blank'); 
    } 
});

मुझे लगता है कि महत्वपूर्ण यह है कि जाहिरा तौर पर संपादक को घटना का प्रचार करने देता है:

स्रोत

2015-12-08 mgilson

क्षमा दोस्त। ऐसा लगता है कि जब तक आप एंकर पूर्वावलोकन अक्षम नहीं करते हैं तब तक उस लिंक को खोलने के लिए उस लिंक को खोलने का कोई तरीका नहीं है। हालांकि आप अपने रेपो में कोई समस्या खोल सकते हैं। – Louy

इस डेमो [https://yabwe.github.io/medium-editor/demo.html](https://yabwe.github.io/medium-editor/demo.html) एक ही बात है। – Valijon

@Louy - हाँ, मुझे लगता है कि शायद इसलिए है कि मुझे क्या करना होगा - हालांकि अगर किसी को अगले 7 दिनों में समस्या ठीक होती है, मैं खुशी से इनाम उन्हें ;-) – mgilson

जब मैं प्रश्न पूछता था तो मैं वास्तव में क्या चाहता था, जब "संपादन" मोड (as described by Nate Mielnik) में Google डॉक्स के समान व्यवहार था। मैंने issue on the Medium Editor tracker खोला और उन्होंने कोर माध्यम संपादक के हिस्से के रूप में इसे लागू नहीं करने का फैसला किया, लेकिन उन्होंने ध्यान दिया कि वे किसी को कार्यक्षमता के रूप में उस कार्यक्षमता को जोड़ने में प्रसन्न होंगे।

तो, मैंने सुझाव दिया कि उस कार्यक्षमता को एक विस्तार के रूप में लागू करने का निर्णय लिया गया है। इसे MediumTools के हिस्से के रूप में पाया जा सकता है। परियोजना अभी भी शुरुआती चरणों में है (उदा।मैंने स्टाइल को बेहतर बनाने के लिए कुछ भी नहीं किया है, या बेहतर खनन प्रथाओं का उपयोग करने के लिए कुछ भी नहीं किया है, लेकिन हम इसके लिए पुल अनुरोधों को खुशी से स्वीकार करेंगे)।

इस तरह कोड देखो की हिम्मत:

var ClassName = { 
    INNER: 'medium-editor-toolbar-anchor-preview-inner', 
    INNER_CHANGE: 'medium-editor-toolbar-anchor-preview-inner-change', 
    INNER_REMOVE: 'medium-editor-toolbar-anchor-preview-inner-remove' 
} 

var AnchorPreview = MediumEditor.extensions.anchorPreview; 
GdocMediumAnchorPreview = MediumEditor.Extension.extend.call(
    AnchorPreview, { 

    /** @override */ 
    getTemplate: function() { 
     return '<div class="medium-editor-toolbar-anchor-preview">' + 
     ' <a class="' + ClassName.INNER + '"></a>' + 
     ' -' + 
     ' <a class="' + ClassName.INNER_CHANGE + '">Change</a>' + 
     ' |' + 
     ' <a class="' + ClassName.INNER_REMOVE + '">Remove</a>' + 
     '</div>'; 
    }, 

    /** @override */ 
    createPreview: function() { 
     var el = this.document.createElement('div'); 

     el.id = 'medium-editor-anchor-preview-' + this.getEditorId(); 
     el.className = 'medium-editor-anchor-preview'; 
     el.innerHTML = this.getTemplate(); 

     var targetBlank = 
      this.getEditorOption('targetBlank') || 
      this.getEditorOption('gdocAnchorTargetBlank'); 
     if (targetBlank) { 
     el.querySelector('.' + ClassName.INNER).target = '_blank'; 
     } 

     var changeEl = el.querySelector('.' + ClassName.INNER_CHANGE); 
     this.on(changeEl, 'click', this.handleClick.bind(this)); 

     var unlinkEl = el.querySelector('.' + ClassName.INNER_REMOVE); 
     this.on(unlinkEl, 'click', this.handleUnlink.bind(this)); 

     return el; 
    }, 

    /** Unlink the currently active anchor. */ 
    handleUnlink: function() { 
     var activeAnchor = this.activeAnchor; 
     if (activeAnchor) { 
     this.activeAnchor.outerHTML = this.activeAnchor.innerHTML; 
     this.hidePreview(); 
     } 
    } 
    });

एक विवरण के रूप में, मैं सिर्फ प्रोटोटाइप विरासत का माध्यम के स्वाद का उपयोग करें "उपवर्ग" करने के लिए मूल/builtin AnchorPreview विस्तार। मैं मार्कअप में अतिरिक्त लिंक जोड़ने के लिए getTemplate विधि को ओवरराइड करता हूं। तब मैंने getPreview के मूल कार्यान्वयन से बहुत कुछ उधार लिया, लेकिन मैंने उचित रूप से प्रत्येक लिंक में नए कार्यों को बाध्य किया। आखिरकार, मुझे "निकालें" पर क्लिक करने के लिए लिंक को "अनलिंक करने" की आवश्यकता होती है, इसलिए मैंने इसके लिए एक विधि जोड़ा। अनलिंक विधि संभवतः संतोषजनक जादू का उपयोग करके थोड़ा बेहतर किया जा सकता है (यह सुनिश्चित करने के लिए कि यह ब्राउज़र के पूर्ववत स्टैक का हिस्सा है), लेकिन मैंने इसे समझने के लिए समय नहीं लगाया (हालांकि यह एक अच्छा पुल अनुरोध करेगा किसी को दिलचस्पी है :-)।

^{वर्तमान में, यह ही हिस्सा है, लेकिन मुझे उम्मीद है कि कुछ बिंदु पर बदल देंगे। । ।}

स्रोत

2016-01-29 01:45:18 mgilson

टिप्पणी में @Valijon से कुछ विचारों से दूर काम करते हुए, मैं निम्नलिखित कोड का उपयोग कर काम करने के लिए इसे पाने के लिए कर रहा था पूर्वजों के तत्व, इसलिए मैं शीर्ष स्तर संपादक संपादक पर क्लिक के लिए बस सुनने में सक्षम था।

^{यहाँ, $window के कोणीय $window सेवा है - आप angularjs, window उपयोग कर रहे हैं नहीं चाल करना होगा और मैं angular.element इस्तेमाल किया घटना श्रोता रजिस्ट्री कम करने के लिए, लेकिन आप इसे पुराने तरीके से कर सकता है (या अपनी पसंद के जेएस ढांचे का उपयोग कर)।}

स्रोत

2015-12-29 20:44:19 mgilson

अच्छा, यह काम करेगा, लेकिन शायद हम एक साधारण विकल्प जोड़ सकते हैं। तब आपके उपयोगकर्ता एक लिंक कैसे संपादित करेंगे? – j0k

@ j0k - लिंक यदि आप इसे हॉवर और फिर पॉपअप (मूल रूप से, यह एक ही तरीका है कि लिंक आम तौर पर मध्यम संपादक में संपादित किए जाने योग्य संपादन योग्य है) में क्लिक करें संपादन योग्य है। लिंक पर क्लिक करने से आपको सीधे साइट पर ले जाता है। – mgilson

मुझे पता चला कि घटना को कैसे बाध्य किया जाए।

यहाँ पूर्ण घटना की सूची https://github.com/yabwe/medium-editor/blob/master/CUSTOM-EVENTS.md

कोशिश

var editor = new MediumEditor('.editable') 
    .subscribe("editableClick", function(e){if (e.target.href) {window.open(e.target.href)}})

https://jsfiddle.net/fhr18gm1/

स्रोत

2015-12-29 20:46:21 Valijon

अच्छा। यह संभवतः मैं कोणीय के साथ क्या करने की कोशिश कर रहा था उससे बेहतर है। – mgilson

मैं आधिकारिक समाधान के लिए इंतजार करेंगे, यह सभी ब्राउज़रों/उपकरणों/आदि ... – Valijon

@mgilson धन्यवाद में परीक्षण नहीं कर रहा है। गितूब में अपना खोला मुद्दा पढ़ने के बाद, मुझे लगता है कि वे लिंक के लिए Google डॉक्स में एक सुविधा को लागू करने के लिए चर्चा करेंगे। – Valijon

तो मध्यम संपादक contenteditable तत्वों के लिए निर्मित ब्राउज़र समर्थन के शीर्ष पर बनाया गया है करने के लिए अपने कोड बदलने के लिए है ।जब आप मध्यम-संपादक को तुरंत चालू करते हैं, तो यह आपके द्वारा प्रदत्त किसी भी तत्व (ओं) को contenteditable=true विशेषता जोड़ देगा।

डिफ़ॉल्ट रूप से, चूंकि पाठ अब संपादन योग्य है (contenteditable विशेषता ब्राउज़र को इसे वाई वाईएसआईवाईजी पाठ के रूप में मानती है) ब्राउज़र अब नेविगेट करने के लिंक पर क्लिक करने का समर्थन नहीं करता है। इसलिए, मध्यम संपादक इन लिंक क्लिकों को होने से अवरुद्ध नहीं कर रहा है, ब्राउज़र पाठ को संपादन योग्य बनाने के हिस्से के रूप में स्वाभाविक रूप से करते हैं।

लंगर विस्तार
- जोड़ने/हटाने के लिंक
लंगर-पूर्वावलोकन विस्तार
- के लिए अनुमति देता है:
  
  मध्यम संपादक लिंक के साथ बातचीत के लिए एक्सटेंशन में निर्माण किया है एक लिंक
- जब टूलटिप क्लिक किया जाता है, लिंक के href संपादन लंगर विस्तार

मुझे लगता है कि संपादक का मूल लक्ष्य गलतफहमी यहाँ है के माध्यम से के लिए अनुमति देता है। संपादक टेक्स्ट संपादित करने की अनुमति देता है, और लिंक जोड़ने/निकालने/अपडेट करने के लिए, आपको स्वचालित रूप से नेविगेट किए बिना इसमें क्लिक करने में सक्षम होना चाहिए। यही वह है जिसे मैं 'संपादन' मोड के रूप में सोचता हूं।

हालांकि, संपादन के परिणामस्वरूप उत्पन्न एचटीएमएल वैध एचटीएमएल है, और यदि आप उस एचटीएमएल को लेते हैं और इसे उस तत्व के अंदर डालते हैं जिसमें contenteditable=true विशेषता नहीं है, तो सब कुछ अपेक्षित काम करेगा। मैं इसे 'प्रकाशित मोड' के रूप में सोचता हूं

मैं शब्द या Google डॉक्स जैसे संपादकों को देखता हूं, और आप एक समान प्रकार के व्यवहार को देखते हैं, जहां आप दस्तावेज़ संपादित करते हैं, लिंक जब आप क्लिक करते हैं तो बस नेविगेट नहीं करते हैं उन्हें, लिंक पर क्लिक करने के बाद, आपको वास्तव में उन्हें एक अलग कार्रवाई के माध्यम से नेविगेट करना होगा। हालांकि, दस्तावेज़ के 'प्रकाशित' संस्करण पर, लिंक पर क्लिक करने से वास्तव में एक ब्राउज़र विंडो खुल जाएगी और वहां नेविगेट होगा।

मुझे लगता है कि यह मौजूदा एंकर-पूर्वावलोकन एक्सटेंशन में वृद्धि के रूप में एक अच्छा सुझाव देता है। शायद टूलटिप जो किसी लिंक को घुमाने पर प्रकट होता है, इसमें कई विकल्प हो सकते हैं (यानी लिंक संपादित करें | लिंक निकालें | यूआरएल पर नेविगेट करें)।

tldr;

लिंक अंतर्निहित WYSIWYG समर्थन (contenteditable) के माध्यम से ब्राउज़र में 'संपादन' टेक्स्ट के दौरान क्लिक पर नेविगेट करने योग्य नहीं हैं। जब 'संपादन' मोड में नहीं होता है, तो लिंक अपेक्षा के अनुसार काम करेंगे। यह माध्यम-संपादक एंकर-पूर्वावलोकन एक्सटेंशन में एक अच्छा वृद्धि के लिए बना सकता है।

स्रोत

2015-12-31 19:31:29

माध्यम संपादक में लिंक का उपयोग कैसे करें?

उत्तर

संबंधित मुद्दे