CSS样式在Android的富文本编辑器不工作 [英] CSS styles in Android Rich Text Editor not working

问题描述

我一直在努力使用Docx4j库时转换DOCX内容为HTML和通过的WebView读读书docx文件。然而，同样的html code，当我试图在 Android的富文本编辑器我没有得到文字和图像的任何格式。我发现CSS样式进行了评论，所以我删除了，以及使用HTML字符串使用下面code：

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("-->", "");

这也没有解决我的问题，我收到相同的纯文本格式没有。然而，HTML以及包含定义的CSS code。快照

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

我已经检查HTML确实在RTEditor工作：

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();
}

更新：
我想编辑器不支持的东西。我想简单的HTML code是如下：

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>

它不显示任何样式是它内嵌或外部。现在唯一的办法就是通过字符读取DOCX文件字符和检查每个字体，并将其添加适当的RTEditor。

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.

推荐答案

的富文本编辑器支持在readme.md提到的格式。从和HTML转换很简单，就是能够保存和加载编辑的文本，但并不是一个普遍的HTML转换器，支持所有的属性。该组件可以使用任何格式保存文本（RTF，降价，自己的格式你的名字）。如果你想从一个的docx文件导入文本你必须编写自己的导入/导出转换器，它是可能的。如果要导入特定HTML格式可以增强现有的HTML转换器（例如，以支持从样式表彩色文本）。您可以导入/转换一切的富文本编辑器的支持，但有在尝试导入例如，没有点因为这些表不被编辑（没有跨区当量为表）的支持。

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 (e.g. 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 e.g. tables since those aren't supported by the editor (there's no spanned equivalent for tables).

这篇关于CSS样式在Android的富文本编辑器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！