मैं वेब विकास में एक नौसिखिया हूं इसलिए कृपया मुझे क्षमा करें यदि मेरा प्रश्न मूर्खतापूर्ण है। मूल रूप से मैं textEditor को webView में दिखाने के लिए एक html+css+js स्क्रिप्ट का उपयोग कर रहा हूं जो बिना किसी समस्या के दिखाया गया है लेकिन अब समस्या यह है कि मैं विशेष रूप से आईडी "myEditor" की सामग्री कैसे प्राप्त कर सकता हूं ? क्या कोई कृपया इस मुद्दे को ठीक करने में मेरी मदद कर सकता है?

HTML कोड:

  <html>

<head>

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
 awesome/4.7.0/css/font-awesome.css">
</head>

 <body>
  <style>
    #editorContainer {
        max-width: 600px;
        margin: auto;
    }

    #myEditor {
        border: 1px solid #000;
        padding: 20px;
    }

    #toolbar {
        padding: 10px 20px;
        border: 1px solid #d9d9d9;
        background-color: #d9d9d9;
    }

    #toolbar button {
        border: 1px solid transparent;
        font-size: 18px;
        cursor: pointer;
        padding: 5px 10px;
        background-color: transparent;
    }

    #toolbar button:hover {
        border: 1px solid #2e2e2e;
    }
</style>
<div id="editorContainer">
    <div id="toolbar">
        <button onclick="document.execCommand('bold',true,'' )"><i class="fa fa-bold" aria-hidden="true"></i></button>
        <button onclick="document.execCommand('italic', true, '')"><i class="fa fa-italic" aria-hidden="true"></i></button>
        <button onclick="document.execCommand('underline', true, '')"><i class="fa fa-underline" aria-hidden="true"></i></button>
        <button onclick="document.execCommand('strikethrough', true, '')"><i class="fa fa-strikethrough" aria-hidden="true"></i></button>

    </div>
    <div id="myEditor" contenteditable="true">
        <h1>Simple Text Editor</h1>
        <p>This is a very simple text editor. I will add other features and design elements to it as time goes along.</p>
    </div>
</div>

<!-- Based on Codeburst.io Tutorial: https://codeburst.io/how-to-build-your-own-wysiwyg-editor-6002fa3f5ea8 -->

<!--
              Features to add:
              - Save command state
              -->
<script>
    var onclick = function() {
        var cmd = this.getAttribute('data-role');
        switch (cmd) {
            case 'h1':
            case 'h2':
            case 'p':
                document.execCommand('formatBlock', false, '<' + cmd + '>');
                break;
            default:
                document.execCommand(cmd, false, null);
                break;
        }
    };

    var els = document.querySelectorAll('#editControls a');

    Array.prototype.forEach.call(els, function(el) {
        el.addEventListener('click', onclick);
    });
</script>

अब निम्नलिखित कोड webView की पूरी स्क्रिप्ट लौटा रहा है, लेकिन मुझे आश्चर्य है कि केवल वांछित परिणाम प्राप्त करने के लिए इसे कैसे संपादित किया जाए।

जावा कोड:

webView.evaluateJavascript(
                    "(function() { return ('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>'); })();",
                    new ValueCallback<String>() {
                        @Override
                        public void onReceiveValue(String html) {

                        }
                    });
0
anonymous 21 अगस्त 2018, 21:46

2 जवाब

Jsoup लाइब्रेरी का उपयोग करना: https://github.com/jhy/jsoup

Document document = Jsoup.parse(html);
Element sampleDiv = document.getElementById("sampleDiv");

उदाहरण:

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class JsoupTester {
   public static void main(String[] args) {

      String html = "<html><head><title>Sample Title</title></head>"
         + "<body>"
         + "<p>Sample Content</p>"
         + "<div id='sampleDiv'><a href='www.google.com'>Google</a>"
         + "<h3><a>Sample</a><h3>"
         +"</div>"
         + "<div id='imageDiv' class='header'><img name='google' src='google.png' />"
         + "<img name='yahoo' src='yahoo.jpg' />"
         +"</div>"
         +"</body></html>";
      Document document = Jsoup.parse(html);

      //a with href
      Elements links = document.select("a[href]");

      for (Element link : links) {
         System.out.println("Href: " + link.attr("href"));
         System.out.println("Text: " + link.text());
      }

      // img with src ending .png
      Elements pngs = document.select("img[src$=.png]");

      for (Element png : pngs) {
         System.out.println("Name: " + png.attr("name"));
      }

      // div with class=header
      Element headerDiv = document.select("div.header").first();
      System.out.println("Id: " + headerDiv.id());

      // direct a after h3
      Elements sampleLinks = document.select("h3 > a"); 

      for (Element link : sampleLinks) {
         System.out.println("Text: " + link.text());
      }
   }
}

परिणाम:

Href: www.google.com
Text: Google
Name: google
Id: imageDiv
Text: Sample
0
Badran 21 अगस्त 2018, 22:01

आपके Javascript में, document.getElementsByTagName('html')[0].innerHTML एक <html> टैग का पहला उदाहरण ढूंढता है, फिर उसके अंदर HTML को पुनः प्राप्त करता है। चूंकि <html> टैग हमारी संपूर्ण HTML फ़ाइल को संलग्न करता है, यह संपूर्ण फ़ाइल लौटाता है।

myEditor की आईडी के साथ किसी विशेष तत्व का HTML प्राप्त करने के लिए, document.getElementById('myEditor').innerHTML का उपयोग करने का प्रयास करें, जो मिलान आईडी विशेषता वाले तत्व का पहला उदाहरण ढूंढता है और अपना आंतरिक HTML देता है।

0
jackaloops 21 अगस्त 2018, 22:22
आपके उत्तर के लिए धन्यवाद सर, लेकिन यह मेरी समस्या का समाधान नहीं कर सका
 – 
anonymous
22 अगस्त 2018, 18:15