0

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);
Community
  • 1
  • 1
Abhishek Singh
  • 415
  • 1
  • 12
  • 24

1 Answers1

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>
arun
  • 1,728
  • 15
  • 15