1. 首頁
  2. 問答
  3. QTextEdit插入不一致的HTML（當重複/一致地執行相同的操作時）

QTextEdit插入不一致的HTML（當重複/一致地執行相同的操作時）

2016-04-26 17 views
0

我正在使用QTextEdit小部件向用戶顯示格式良好的聊天窗口。爲了保持基本的測試我使用以下格式爲我的html：QTextEdit插入不一致的HTML（當重複/一致地執行相同的操作時）

QString style = is_message_sent_by_myself ? 
     "background-color:rgb(255,255,255);font-size:14px;color:rgb(10,10,10);" : 
     "background-color:rgb(249,86,79);font-size:14px;color:rgb(255,255,255);"; 

    QString format("<div style='%1'> %2 </div> <div style='font-size:3px;'> &zwnj; </div>"); 
    QString text_to_append = format.arg(style).arg(message.toHtmlEscaped()); 

    QTextEdit->append(text_to_append)

這工作不錯when creating the html myself但通過使用QTextEdit->append(text_to_be_append)與QT 5.6生成它，當我得到一個不同的（甚至是不一致的）結果。

一開始，運行一旦上面的片段時，則產生以下的HTML（與QTextEdit->toHtml()得到它）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> 
<html> 
    <head> 
     <meta name="qrichtext" content="1" /> 
     <style type="text/css"> 
      p, li { white-space: pre-wrap; } 
     </style> 
    </head> 
    <body style=" font-family:'MS Shell Dlg 2'; font-size:8.25pt; font-weight:400; font-style:normal;"> 
     <p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; background-color:#ffffff;"><span style=" font-size:14px; color:#0a0a0a; background-color:#ffffff;">Some message </span></p> 
     <p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:3px;">&zwnj; </span></p> 
    </body> 
</html>

（which looks perfect針對第一消息）

但執行的代碼後再次，不一致時：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> 
<html> 
    <head> 
     <meta name="qrichtext" content="1" /> 
     <style type="text/css"> 
      p, li { white-space: pre-wrap; } 
     </style> 
    </head> 
    <body style=" font-family:'MS Shell Dlg 2'; font-size:8.25pt; font-weight:400; font-style:normal;"> 
     <p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; background-color:#ffffff;"><span style=" font-size:14px; color:#0a0a0a; background-color:#ffffff;">Some message </span></p> 
     <p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:3px;">&zwnj; </span></p> 
     <p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:14px; color:#ffffff; background-color:#f9564f;">Some message </span></p> 
     <p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:3px;">&zwnj; </span></p> 
    </body> 
</html>

（其looks like this，但should look like this）

如您所見，第三個<p>標記中缺少背景顏色屬性。在第一個<p>標籤中存在背景顏色屬性。相同的代碼會一遍又一遍地重複，隨後的調用將繼續生成沒有背景顏色屬性的<p>標籤。

爲什麼會發生這種情況，我該如何解決這個問題？

我在Windows 10 x64上使用QT 5.6與Visual Studio 2015加載項（非官方的）。

這是我如何創建的QTextEdit盒（包括所有其他組件的tabPage）：

PAChatClientUI::PAChatClientUI(QTabWidget* tabs_container, QObject *parent) 
    : QObject(parent), tabs_container_(tabs_container) 
{ 
    QString suffix = QString::number((size_t)this, 16); 

    tab_ = new QWidget(); 
    tab_->setObjectName("tab_" + suffix); 

    tab_grid_layout_ = new QGridLayout(tab_); 
    tab_grid_layout_->setSpacing(6); 
    tab_grid_layout_->setContentsMargins(11, 11, 11, 11); 
    tab_grid_layout_->setObjectName("tab_grid_layout_" + suffix); 

    chat_container_grid_ = new QGridLayout(); 
    chat_container_grid_->setSpacing(6); 
    chat_container_grid_->setObjectName("chat_container_grid_" + suffix); 

    chat_container_button_grid_ = new QHBoxLayout(); 
    chat_container_button_grid_->setSpacing(6); 
    chat_container_button_grid_->setObjectName("chat_container_button_grid_" + suffix); 

    chat_manager_bot_remove_ = new QPushButton(tab_); 
    chat_manager_bot_remove_->setObjectName("chat_manager_bot_remove_" + suffix); 
    chat_manager_bot_remove_->setMinimumSize(QSize(119, 23)); 

    chat_container_button_grid_->addWidget(chat_manager_bot_remove_); 

    chat_manager_keep_chat_ = new QPushButton(tab_); 
    chat_manager_keep_chat_->setObjectName("chat_manager_keep_chat_" + suffix); 
    chat_manager_keep_chat_->setMinimumSize(QSize(119, 23)); 

    chat_container_button_grid_->addWidget(chat_manager_keep_chat_); 

    chat_manager_end_chat_ = new QPushButton(tab_); 
    chat_manager_end_chat_->setObjectName("chat_manager_end_chat_" + suffix); 
    chat_manager_end_chat_->setMinimumSize(QSize(118, 23)); 

    chat_container_button_grid_->addWidget(chat_manager_end_chat_); 

    chat_manager_send_ = new QPushButton(tab_); 
    chat_manager_send_->setObjectName("chat_manager_send_" + suffix); 
    chat_manager_send_->setMinimumSize(QSize(119, 23)); 

    chat_container_button_grid_->addWidget(chat_manager_send_); 

    chat_container_grid_->addLayout(chat_container_button_grid_, 3, 0, 1, 1); 

    chat_box_text_messages_ = 
     //new QPlainTextEdit(tab_); 
     new QTextEdit(tab_); 
    chat_box_text_messages_->setObjectName("chat_box_text_messages_" + suffix); 
    chat_box_text_messages_->setMinimumSize(QSize(495, 178)); 

    chat_container_grid_->addWidget(chat_box_text_messages_, 1, 0, 1, 1); 

    chat_box_text_input_message_ = new QLineEdit(tab_); 
    chat_box_text_input_message_->setObjectName("chat_box_text_input_message_" + suffix); 
    chat_box_text_input_message_->setMinimumSize(QSize(495, 20)); 
    chat_box_text_input_message_->setMaximumSize(QSize(16777215, 16777215)); 

    chat_container_grid_->addWidget(chat_box_text_input_message_, 2, 0, 1, 1); 

    tab_grid_layout_->addLayout(chat_container_grid_, 0, 0, 1, 1); 

    chat_manager_bot_remove_->setText("Remove Bot"); 
    chat_manager_keep_chat_->setText("Keep Chat"); 
    chat_manager_end_chat_->setText("End Chat"); 
    chat_manager_send_->setText("Send"); 

    QPalette p = chat_box_text_messages_->palette(); 

    p.setColor(QPalette::Active, QPalette::Base, Qt::black); 
    p.setColor(QPalette::Inactive, QPalette::Base, Qt::black); 
    chat_box_text_messages_->setPalette(p); 

    chat_box_text_messages_->setWordWrapMode(QTextOption::WordWrap); 
    chat_box_text_messages_->setReadOnly(true); 

    //Add nice html messages: 
    AddMessage(true, "Some message"); 

    AddMessage(false, "Some message"); 

    AddMessage(true, "Some message"); 

    AddMessage(false, "Some message"); 

    tabs_container_->addTab(tab_, " 6"); 
} 

void PAChatClientUI::AddMessage(bool me, const QString& message) 
{ 
    QString style = me ? 
     "background-color:rgb(255,255,255);font-size:14px;color:rgb(10,10,10);" : 
     "background-color:rgb(249,86,79);font-size:14px;color:rgb(255,255,255);"; 

    QString format("<div style='%1'> %2 </div> <div style='font-size:3px;'> &zwnj; </div>"); 
    QString safe_msg = format.arg(style).arg(message.toHtmlEscaped()); 
    qDebug() << "Writing: " << safe_msg; 
    chat_box_text_messages_->append(safe_msg); 
    qDebug() << "HTML: " << chat_box_text_messages_->toHtml(); 
}

編輯：

我試圖根據答案編輯代碼並對我的想法之一，產生代碼的以下兩個結果：

void PAChatClientUI::AddMessage(bool me, const QString& message) 
{ 
    QString style = me ? 
     "background-color:rgb(255,255,255);font-size:14px;color:rgb(10,10,10);" : 
     "background-color:rgb(249,86,79);font-size:14px;color:rgb(255,255,255);"; 

    QString format("<div style='%1'> %2 </div> <div style='font-size:3px;'> &zwnj; </div>"); 
    QString safe_msg = format.arg(style).arg(message.toHtmlEscaped()); 
    qDebug() << "Writing: " << safe_msg; 
    QTextCursor cursor = chat_box_text_messages_->textCursor(); 

    if (!cursor.atStart()) 
     cursor.insertBlock(); 
    cursor.insertHtml(safe_msg); 
    qDebug() << "HTML: " << chat_box_text_messages_->toHtml(); 
}

這正是產生同樣的效果，所以要避免QT「轉換」的HTML，我因子評分我可以只寫什麼QT寫，但完全一樣的問題發生了：

void PAChatClientUI::AddMessage(bool me, const QString& message) 
{ 
    QString bgColor = me ? "ffffff" : "f9564f"; 
    QString txtColor = me ? "0a0a0a" : "ffffff"; 

    QString to_append("\ 
     <p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; background-color:#" + bgColor + ";\"><span style=\" font-size:14px; color:#" + txtColor + "; background-color:#" + bgColor + ";\">" + message.toHtmlEscaped() + " </span></p>\ 
     <p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\"><span style=\" font-size:3px;\">&zwnj; </span></p>\ 
    "); 

    chat_box_text_messages_->append(to_append); 
}

來源

2016-04-26 Gizmo

回答

0

編輯：這個建議不解決問題;它是爲了完整性而留在這裏的。

QTextEdit當追加文本塊時，對底層QTextDocument做了一些RichText魔術。嘗試明確地創建塊，並使用QTextCursor::insertHtml()，而不是QTextEdit::append()：

QTextCursor cursor = m_ui.entryText->textCursor(); 

if(!cursor.atStart()) 
    cursor.insertBlock(); 
cursor.insertHtml(htmlText);

這也應該提高大量文本的性能。

來源

2016-04-26 08:37:29 Murphy

+0

不幸的是產生相同的行爲 – Gizmo

+0

@Gizmo下一步嘗試 - 我看看我自己的代碼並添加了一個例子;然而，這應該解決塊數和性能問題，我不確定它會幫助解決您的問題。 – Murphy

+0

我也試過了，它會產生相同的視覺效果:(QtWebKit對於這樣簡單的東西太過於矯枉過正... offtopic：任何其他的建議，至少使用這種顏色的簡單聊天表示方法嗎？我試過了SyntaxtHighlighter，但是它無法突出顯示一條線的100％寬度 – Gizmo

0

我能夠在將兩個<div>打包到append()的常見調用中時重現此行爲;將它們分成兩個調用會導致預期的外觀（在這裏使用Qt 4.7）。

來源

2016-04-28 12:05:15 Murphy

相關問題

 相關問題