CSS styles in Android Rich Text Editor not working

Question

I had been working on reading Docx files using Docx4j library when converted docx content to html and read it through webview. However, the same html code when I tried loading in Android Rich Text Editor I did not get any format of text nor the images. I found The css styles were commented so I removed that as well using string html using below code:

html = html.replace("<!--", "");
html = html.replace("-->", "");

This also did not fix my issue and I receive the same plain text without format. html however contains well defined css code. A snapshot

I have checked html does work in RTEditor:

Code:

String subject = "";Spanned description = null;
    String message = null;
    String signature = null;String withCharacters;
    String tsx="";String html = null;
    if (savedInstanceState == null) {
        Intent intent = getIntent();
        subject = getIntent().getStringExtra("textReportFileName");
        message = getStringExtra(intent, "message");
        signature = getStringExtra(intent, "signature");
        mUseDarkTheme = intent.getBooleanExtra("mUseDarkTheme", false);
        mSplitToolbar = intent.getBooleanExtra("mSplitToolbar", false);
    } else {
        subject = savedInstanceState.getString("subject", "");
        mUseDarkTheme = savedInstanceState.getBoolean("mUseDarkTheme", false);
        mSplitToolbar = savedInstanceState.getBoolean("mSplitToolbar", false);
    }

    final long startTime = System.currentTimeMillis();
    final long endTime;
    try {
        final LoadFromZipNG loader = new LoadFromZipNG();
        WordprocessingMLPackage wordMLPackage = (WordprocessingMLPackage)loader.get(new FileInputStream(new File(Environment.getExternalStorageDirectory()+"/"+getIntent().getStringExtra("textReportFileName"))));
        //getIntent().getStringExtra("textReportFileName")
        String IMAGE_DIR_NAME = "images";

        String baseURL = this.getDir(IMAGE_DIR_NAME, Context.MODE_WORLD_READABLE).toURL().toString();
        System.out.println(baseURL); // file:/data/data/com.example.HelloAndroid/app_images/

        // Uncomment this to write image files to file system
        ConversionImageHandler conversionImageHandler = new AndroidFileConversionImageHandler( IMAGE_DIR_NAME, // <-- don't use a path separator here
                baseURL, false, this);

        // Uncomment to use a base 64 encoded data URI for each image
        // ConversionImageHandler conversionImageHandler = new AndroidDataUriImageHandler();

        HtmlExporterNonXSLT withoutXSLT = new HtmlExporterNonXSLT(wordMLPackage, conversionImageHandler);

        html = XmlUtils.w3CDomNodeToString(withoutXSLT.export());
        html = html.replace("<!--", "");
        html = html.replace("-->", "");
        withCharacters = StringEscapeUtils.unescapeHtml(html);
        description = Html.fromHtml(withCharacters);

        //WebView webview = (WebView)this.findViewById(R.id.webpage);
        //webview.loadDataWithBaseURL(baseURL, html , "text/html", null, null);


        // TabHost mTabHost = getTabHost();
        // mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("Web Page").setContent(R.id.webpage));
        // mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("View Source").setContent(tv.getId()));
        // mTabHost.setCurrentTab(0);

    } catch (Exception e) {
        e.printStackTrace();
        Toast.makeText(getApplicationContext(),"Invalid Format Exception",Toast.LENGTH_SHORT).show();
    } finally {
        endTime = System.currentTimeMillis();
    }
    final long duration = endTime - startTime;
    System.err.println("Total time: " + duration + "ms");


    message = String.valueOf(description);

    Toast.makeText(getApplicationContext(),message,Toast.LENGTH_SHORT).show();

    // set theme
    setTheme(mUseDarkTheme ? R.style.ThemeDark : R.style.ThemeLight);

    super.onCreate(savedInstanceState);

    // set layout
    setContentView(mSplitToolbar ? R.layout.rte_demo_2 : R.layout.rte_demo_1);

    // initialize rich text manager
    RTApi rtApi = new RTApi(this, new RTProxyImpl(this), new RTMediaFactoryImpl(this, true));
    mRTManager = new RTManager(rtApi, savedInstanceState);

    ViewGroup toolbarContainer = (ViewGroup) findViewById(R.id.rte_toolbar_container);

    // register toolbar 0 (if it exists)
    HorizontalRTToolbar rtToolbar0 = (HorizontalRTToolbar) findViewById(R.id.rte_toolbar);
    if (rtToolbar0 != null) {
        mRTManager.registerToolbar(toolbarContainer, rtToolbar0);
    }

    // register toolbar 1 (if it exists)
    HorizontalRTToolbar rtToolbar1 = (HorizontalRTToolbar) findViewById(R.id.rte_toolbar_character);
    if (rtToolbar1 != null) {
        mRTManager.registerToolbar(toolbarContainer, rtToolbar1);
    }

    // register toolbar 2 (if it exists)
    HorizontalRTToolbar rtToolbar2 = (HorizontalRTToolbar) findViewById(R.id.rte_toolbar_paragraph);
    if (rtToolbar2 != null) {
        mRTManager.registerToolbar(toolbarContainer, rtToolbar2);
    }

    // set subject
    mSubjectField = (EditText) findViewById(R.id.subject);
    mSubjectField.setText(subject);

    // register message editor
    mRTMessageField = (RTEditText) findViewById(R.id.rtEditText_1);
    mRTManager.registerEditor(mRTMessageField, true);
    if (message != null) {
        mRTMessageField.setRichTextEditing(true, message);
    }

    // register signature editor
    mRTSignatureField = (RTEditText) findViewById(R.id.rtEditText_2);
    mRTManager.registerEditor(mRTSignatureField, true);
    if (signature != null) {
        mRTSignatureField.setRichTextEditing(true, signature);
    }

    mRTMessageField.requestFocus();
}

Update: I think the editor doesn't support stuff. I tried simple html code which is below:

<html><head><style>div{background-color: blue}</style></head>   <body>Hello <h1>How are you?</h1> <p>My name is <b> Abhishek</b></p><div>Whats up?</div>

It doesn't show any styles be it inline or external. Now only way is to read the docx file character by character and check font of each and add it suitably in RTEditor.

Answer 1

The rich text editor supports the formatting mentioned in the readme.md. The conversion from and to html is simply to be able to save and load the edited text but is not a universal html converter supporting every attribute. The component could use any format to save the text (rtf, markdown, your own format you name it). If you want to import text from a docx file you'd have to write your own import/export converter which is possible. If you want to import specific html formatting you can enhance the existing html converter (eg to support colored text from a style sheet). You can import / convert everything the rich text editor supports but there's no point in trying to import eg tables since those aren't supported by the editor (there's no spanned equivalent for tables).