[Qt] 可显示表情的编辑器

iptton

似乎很久没发过新贴了。
在 libfetion-gui 项目里有这样一个任务：信息编辑框表情图片显示。目前的显示方式是直接显示代码，如 :) , :-p 等


实现如下：
fxeditor.h

1. 
   
2. #ifndef FXEDITOR_H
   
3. #define FXEDITOR_H
   
4. 
   
5. #include <QTextEdit>
   
6. typedef QPair<QString,QString> mypair;
   
7. class FxEditor : public QTextEdit
   
8. {
   
9.     Q_OBJECT
   
10. public:
    
11.     FxEditor(QWidget*parent = 0);
    
12.     QString toPlainText () const;
    
13. public slots:
    
14.     void onTextChanged();
    
15. private:
    
16.     // do not use map
    
17.     // because it sort the key by char order
    
18.     QMap<QString,QString> strToHtml;
    
19.     QList<mypair> strToHtmlList;
    
20. };
    
21. 
    
22. #endif // FXEDITOR_H
    
23. 
    

复制代码

fxeditor.cpp

1. 
   
2. #include "fxeditor.h"
   
3. #include <QDebug>
   
4. 
   
5. FxEditor::FxEditor(QWidget*parent):QTextEdit(parent)
   
6. {
   
7.     // setup the list
   
8.     // this list should not be a class alone or a global variable?
   
9.     mypair a("o:)","<img src="./faces/47.gif" />");
   
10.     mypair b(":)","<img src="./faces/1.gif" />");
    
11.     strToHtmlList<<a<<b;
    
12.     strToHtml["&gt;:)"]="<img src="%path%/50.gif" />";
    
13.     strToHtml["o:)"]="<img src="%path%/47.gif" />"; // error :)
    
14.     strToHtml["*-:)"]="<img src="%path%/37.gif" />";
    
15.     strToHtml[":-d"]="<img src="%path%/2.gif" />";
    
16.     strToHtml[":-o"]="<img src="%path%/4.gif" />";
    
17.     strToHtml[":-p"]="<img src="%path%/5.gif" />";
    
18.     strToHtml["(h)"]="<img src="%path%/6.gif" />";
    
19.     strToHtml[":-@"]="<img src="%path%/7.gif" />";
    
20.     strToHtml[":("]="<img src="%path%/8.gif" />";
    
21.     strToHtml[":'("]="<img src="%path%/9.gif" />";
    
22.     strToHtml[":"&gt;"]="<img src="%path%/10.gif" />"; // work delay
    
23.     strToHtml["^o)"]="<img src="%path%/11.gif" />";
    
24.     strToHtml[":&amp;"]="<img src="%path%/12.gif" />";  // work delay
    
25.     strToHtml["8o|"]="<img src="%path%/13.gif" />";
    
26.     strToHtml["|-)"]="<img src="%path%/14.gif" />";
    
27.     strToHtml[":-#"]="<img src="%path%/15.gif" />";
    
28.     strToHtml["8-)"]="<img src="%path%/16.gif" />";
    
29.     strToHtml["(s)"]="<img src="%path%/17.gif" />";
    
30.     strToHtml["(st)"]="<img src="%path%/18.gif" />";
    
31.     strToHtml["(o)"]="<img src="%path%/19.gif" />";
    
32.     strToHtml["(l)"]="<img src="%path%/20.gif" />";
    
33.     strToHtml["(u)"]="<img src="%path%/21.gif" />";
    
34.     strToHtml["(@)"]="<img src="%path%/22.gif" />";
    
35.     strToHtml["(&amp;)"]="<img src="%path%/23.gif" />";  // work delay
    
36.     strToHtml["(sn)"]="<img src="%path%/24.gif" />";
    
37.     strToHtml["(*)"]="<img src="%path%/25.gif" />";
    
38.     strToHtml["(#)"]="<img src="%path%/26.gif" />";
    
39.     strToHtml["(r)"]="<img src="%path%/27.gif" />";
    
40.     strToHtml["(})"]="<img src="%path%/28.gif" />";
    
41.     strToHtml["({)"]="<img src="%path%/29.gif" />";
    
42.     strToHtml["(k)"]="<img src="%path%/30.gif" />";
    
43.     strToHtml["(f)"]="<img src="%path%/31.gif" />";
    
44.     strToHtml["(w)"]="<img src="%path%/32.gif" />";
    
45.     strToHtml["(g)"]="<img src="%path%/33.gif" />";
    
46.     strToHtml["(^)"]="<img src="%path%/34.gif" />";
    
47.     strToHtml["-8"]="<img src="%path%/35.gif" />";
    
48.     strToHtml["(i)"]="<img src="%path%/36.gif" />";
    
49.     strToHtml["(c)"]="<img src="%path%/38.gif" />";
    
50.     strToHtml["(um)"]="<img src="%path%/39.gif" />";
    
51.     strToHtml["(mp)"]="<img src="%path%/40.gif" />";
    
52.     strToHtml["(co)"]="<img src="%path%/41.gif" />";
    
53.     strToHtml[":-|"]="<img src="%path%/42.gif" />";
    
54.     strToHtml[":-/"]="<img src="%path%/43.gif" />";
    
55.     strToHtml[":-s"]="<img src="%path%/44.gif" />";
    
56.     strToHtml[")-|"]="<img src="%path%/45.gif" />";
    
57.     strToHtml["(d)"]="<img src="%path%/46.gif" />";
    
58.     strToHtml[":-?"]="<img src="%path%/48.gif" />";
    
59.     strToHtml["(y)"]="<img src="%path%/49.gif" />";
    
60.     strToHtml[":-b"]="<img src="%path%/51.gif" />";
    
61.     strToHtml["b)"]="<img src="%path%/52.gif" />";
    
62.     strToHtml[";)"]="<img src="%path%/3.gif" />";
    
63.     strToHtml[":)"]="<img src="%path%/1.gif" />";
    
64.     //strToHtml[""]="<img src="%path%/.gif" />";
    
65. 
    
66.     connect(this,SIGNAL(textChanged()),this,SLOT(onTextChanged()));
    
67. }
    
68. QString FxEditor::toPlainText()const
    
69. {
    
70.     QString oristr = toHtml();
    
71.     //qDebug()<<oristr;
    
72.     // replace all <img ..> to str
    
73.     QMap<QString, QString>::const_iterator i = strToHtml.constBegin();
    
74.     while (i != strToHtml.end()) {
    
75.         QString k = i.value();
    
76.         oristr.replace(k.replace("%path%","./faces"),i.key());
    
77.         ++i;
    
78.     }
    
79.     // replace all html tags
    
80.     // remove <!Do..
    
81.     oristr.remove(QRegExp("<!(^>)+>"));
    
82.     // remove stylesheet tag and its content
    
83.     oristr.remove(QRegExp("<[^>]+css">[^<]*</style>"));
    
84.     // remove other tags
    
85.     oristr.remove(QRegExp("<[^>]+>"));
    
86.     oristr.replace("&lt;","<");
    
87.     oristr.replace("&gt;",">");
    
88. 
    
89.     // remove the newline
    
90.     oristr.remove(0,2);
    
91.     //qDebug()<<"\n orient plainText return :"<<QTextEdit::toPlainText()<<"\n";
    
92.     //return QTextEdit::toPlainText();
    
93.     return oristr;
    
94. }
    
95. void FxEditor::onTextChanged()
    
96. {
    
97.     static bool changeByMe = false;
    
98.     if(changeByMe)
    
99.         return;
    
100. 
     
101.     QString oristr = toHtml();
     
102.     QTextDocument *td = this->document();
     
103.     bool changed = false;
     
104. 
     
105.     int newCursorPosition = this->textCursor().position();
     
106.     QMap<QString,QString>::const_iterator i = strToHtml.constBegin();
     
107.     qDebug()<<oristr;
     
108.     //qDebug()<<QString("position:%1").arg(newCursorPosition);
     
109.     while (i != strToHtml.end()) {
     
110.         //计算新位置
     
111.         QTextCursor foundCursor(td);
     
112.         while(!foundCursor.isNull() && !foundCursor.atEnd()){
     
113.             foundCursor = td->find(i.key(),foundCursor);
     
114.             if(!foundCursor.isNull()){
     
115.                 qDebug()<<i.key();
     
116.                 changed=true;
     
117.                 int foundCursorPosition  = foundCursor.position();
     
118.                 if(foundCursorPosition >= newCursorPosition){
     
119.                     //@ TO FIX
     
120.                     //  when & turn to &amp; && > turn to &gt;
     
121.                     //  this doen't work as expect.
     
122.                     newCursorPosition -= i.key().size()-1;
     
123.                 }
     
124.                 //QString str = td->toHtml();
     
125.                 //str.replace(foundCursorPosition,i.key().size(), i.value());
     
126.             }
     
127.         }
     
128.         //切换
     
129.         QString k = i.value();
     
130.         oristr.replace(i.key(),k.replace("%path%","./faces"));
     
131.         ++i;
     
132.     }
     
133.     //qDebug()<<QString("position:%1").arg(newCursorPosition);
     
134.     if(changed){
     
135.         changeByMe = true;
     
136.         setHtml(oristr);
     
137.         QTextCursor c(td);
     
138.         c.setPosition(newCursorPosition);
     
139.         this->setTextCursor(c);
     
140.         changeByMe = false;
     
141.     }
     
142.     qDebug()<<"\n"<<toPlainText()<<"\n";
     
143. }
     
144. 
     

复制代码

表情符对应的图片是硬编码的，这个做法扩展性不好，更好的做法是从外部读取字符和图片对应表。这样就可以方便的支持自定义表情了