get html string from Webview and store as html file

Question

I am trying to load an html string in webview i.e. not from URL or some html file in sdcard. Now the html string has text area. User can edit it. Now I want to save the changes as an html file in internal storage. How do I do it. I have checked other SO questions and all use the same method i.e. using URL or use some javascript method which don't work in my case.

I have tried how to get html content from a webview? but it didn't help me. I think that actually opens popup showing code and doesn't even allow the user to edit which is not my case.

Code (Here the text area is provided by TinyMCE editor):

    try {
        InputStream input = getApplicationContext().getAssets().open("sample.html");
        //Reader is = new BufferedReader( new InputStreamReader(input, "windows-1252"));

        StringBuilder contentBuilder = new StringBuilder();
        try {
            BufferedReader in = new BufferedReader( new InputStreamReader(input, "windows-1252"));
            String str;
            while ((str = in.readLine()) != null) {
                contentBuilder.append(str);
            }
            in.close();
        } catch (IOException e) {
        }
        content = contentBuilder.toString();

        content=content.replace("This is some content that will be editable with TinyMCE.", html);

        view.getSettings().setJavaScriptEnabled(true);
        view.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        view.getSettings().setPluginState(WebSettings.PluginState.ON);
        view.addJavascriptInterface(new WebAppInterface(this), "Android");

        view.addJavascriptInterface(new MyJavaScriptInterface(this), "HtmlViewer");



        view.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                view.loadUrl("javascript:window.HtmlViewer.showHTML" +
                        "('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>');");
            }
        });


        view.loadDataWithBaseURL("file:///android_asset/", content, "text/html",
                "UTF-8", null);

@arun where is code for getting html after edits and saving it with android button click in internal storage. — Abhishek Singh
– Abhishek Singh, Commented Aug 26, 2015 at 12:06
@arun can you write the code for the above code to save on Button click after user has edited the editor contents. Its easy to say question is same when its not. — Abhishek Singh
– Abhishek Singh, Commented Aug 26, 2015 at 12:10

arun · Accepted Answer · 2015-08-26 13:51:44Z

2

Here is the sample code now user can edit from previous detail(on html load the details are loaded) in webview after click showmessage it will trigger the java method.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_testing);

    WebView webView = (WebView)findViewById(R.id.webView1);


    webView.getSettings().setJavaScriptEnabled(true);
    webView.addJavascriptInterface(new WebViewJavaScriptInterface(this), "Android");
    webView.addJavascriptInterface(new userDetail("arun",24), "HtmlViewer");
    webView.loadUrl("file:///android_asset/yourhtml.html");
}

public class WebViewJavaScriptInterface{

    private Context context;


    public WebViewJavaScriptInterface(Context context){
        this.context = context;
    }

    @JavascriptInterface
    public void showMessage(String message){
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
    }
}

Here is the html file

<!DOCTYPE html>
<html>
<head>
    <title>User Detail</title>

    <script type="text/javascript">

        function showMessage(){
            var uname = document.getElementById("name").value;
            var age = document.getElementById("age").value;

            Android.showMessage(uname+age);
            return false;
        }
    function loadFunction(){
    document.getElementById("name").value = window.HtmlViewer.getName();
    document.getElementById("age").value = window.HtmlViewer.getAge();
  };
    </script>
</head>

<body onload="loadFunction()">

<form id="form">
    Name: <input id="name" name="name" type="text"/><br />
    Age : <input id="age" name="age" type="text"/><br />

    <input type="button" onClick="showMessage()" value="Show Message">
</form>

</body>
</html>

edited Aug 26, 2015 at 13:51

answered Aug 26, 2015 at 13:31

arun

1,75815 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abhishek Singh Over a year ago

Perfect answer buddy! :)

Abhishek Singh Over a year ago

Bro thanks but I am not seeing the edits being saved. The original html is only saved/toasted.

arun Over a year ago

hi you need to store after the showMessage() method(i.e. SharedPreference or database). and retrieve each time the activity oncreate.

Collectives™ on Stack Overflow

get html string from Webview and store as html file

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related