读取包含文本和图像的xml文件，并将其显示在QtextEdit中

Question

i'm trying to develop at application window that contain a widget and two buttons Open and Save. As an input I have an xml file which contains text plus an image. I want to display both text and image in the same widget, apply modification and save it finally. My xml file look like this:

<?xml version="1.0" encoding="UTF-8"?>
<Stage>
<Item id = "1" Name = "Ensure span is erected">
    <image id = "1" src = "im.png"/>
</Item>
</Stage> 

What kind of widget can display both text and image and what to do to display them?

I could display only image in a Qlabel

QPixmap logo;
QByteArray ba;
QFile file("img.txt");
if(file.open(QIODevice::ReadOnly)) {
ba = file.readAll();
}
logo.loadFromData(QByteArray::fromBase64(ba));
ui->label->setPixmap(logo.scaled(ui->label->width(),ui->label->height(),Qt::KeepAspectRatioByExpanding));

Any idea please! Your help is highly appreciated.

Answer 1

Here is a small example. I ignore ids in my case. Convert your xml to html:

QString MainWindow::HtmlFromXml(const QString &xmlFileName)
{
    QFile file(xmlFileName);
    if (!file.open(QIODevice::ReadOnly)) {
        qDebug() << "Cant open file: " << file.errorString();
        return "";
    }

    QDomDocument htmlDoc;
    QDomElement htmlRoot = htmlDoc.createElement("html");

    QDomDocument xmlDoc;
    xmlDoc.setContent(&file);
    QDomElement xmlRoot = xmlDoc.documentElement();
    QDomElement xmlItem = xmlRoot.firstChild().toElement();

    while(!xmlItem.isNull())
    {
        //read xml
        int itemId = xmlItem.attribute("id", "0").toInt();
        QString itemName = xmlItem.attribute("Name", "");

        QDomElement xmlImg = xmlItem.firstChild().toElement();
        QString imgSrc;
        int imgId = 0;
        if (!xmlImg.isNull()) {
            imgSrc = xmlImg.attribute("src", "");
            imgId = xmlImg.attribute("id", "0").toInt();
        }

        //create html
        QDomElement htmlItem = htmlDoc.createElement("p");

        QDomElement htmlImg = htmlDoc.createElement("img");
        htmlImg.setAttribute("src", imgSrc);

        QDomElement htmlText = htmlDoc.createElement("p");
        QDomText textName = htmlDoc.createTextNode(itemName);
        htmlText.appendChild(textName);

        htmlItem.appendChild(htmlImg);
        htmlItem.appendChild(htmlText);
        htmlRoot.appendChild(htmlItem);

        //next
        xmlItem = xmlItem.nextSibling().toElement();
    }

    htmlDoc.appendChild(htmlRoot);

    return htmlDoc.toString();
}

Then set html you got to QTextEdit

QString strHtml = HtmlFromXml(fileName);
ui->textEdit->setHtml(strHtml);

Now you can edit in QTextEdit . Before saving you need to get html from QTextEdit

QString strHtml = ui->textEdit->toHtml();
QString strXml = XmlFromHtml(strHtml);

And convert this html into xml

QString MainWindow::XmlFromHtml(const QString &strHtml)
{
    QDomDocument xmlDoc;
    QDomElement xmlRoot = xmlDoc.createElement("Stage");

    QDomDocument htmlDoc;
    htmlDoc.setContent(strHtml);
    QDomElement htmlRoot = htmlDoc.documentElement();
    QDomElement htmlHead = htmlRoot.firstChild().toElement();
    QDomElement htmlBody = htmlHead.nextSibling().toElement();

    int dummyId = 1;
    QDomElement htmlItem = htmlBody.firstChild().toElement();
    while (!htmlItem.isNull())
    {
        //<p><img/></p><p>text</p>
        QDomElement htmlImg = htmlItem.firstChild().toElement();
        QString imgSrc = htmlImg.attribute("src", "");

        htmlItem = htmlItem.nextSibling().toElement(); //move to <p> with text
        QDomText itemText = htmlItem.firstChild().toText();

        //create xml elements
        QDomElement xmlItem = xmlDoc.createElement("Item");
        xmlItem.setAttribute("id", dummyId);
        xmlItem.setAttribute("Name", itemText.data());

        QDomElement xmlImg = xmlDoc.createElement("image");
        xmlImg.setAttribute("src", imgSrc);
        xmlImg.setAttribute("id", dummyId);

        xmlItem.appendChild(xmlImg);
        xmlRoot.appendChild(xmlItem);

        //next
        htmlItem = htmlItem.nextSibling().toElement();
        dummyId++;
    }

    xmlDoc.appendChild(xmlRoot);
    return xmlDoc.toString();
}

And then save into text file.

Note: QTextEdit allow you to edit text, but have some troubles with images. You can remove or copy/paste images inside QTextEdit but you can not paste images from outside clipboard. It's because QTextEdit operates with <img/> text tag not with image. To edit your images inside QTextEdit you need to edit text html of your QTextEdit instance.