免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [教學] 自定表情 [updated] [打印本頁]
作者: you1b231    時間: 2010-4-30 01:29     標題: 自定表情 [updated]

本帖最後由 you1b231 於 2010-11-26 01:54 編輯

本教學是教如何利用自定之Discuz! 代碼插入表情

所有設定請在後台設置

先要準備:
1. 表情圖檔(圖名最好以數字或易明的英數,不要輸入符號),例子: 1.jpg , 2.jpg
2. icon(用來代表於工具列出現的圖檔) --> 大小約 20 x 20
3. 設定用戶組 --> 允許使用自定義 Discuz! 代碼

之後開始工作
1.先把以下語法插入 "全局"--> "站點信息" --> "網站第三方統計代碼"
  1. <script>
  2. function AddsmileText(id,val){
  3. document.getElementById('e_textarea').value+="["+val+"]"+id+"[/"+val+"] ";
  4. }
  5. </script>
複製代碼
2.到 "界面" --> "編輯器設置" --> "Discuz! 代碼" 新增標籤
標籤是自定的(但請不要跟現有的同樣名稱,本例使用smile614,圖標則是準備圖檔之第2點)

3.新增後點詳情
在替換內容加入
  1. <img src="http://你存放表情之空間網址/{1}.jpg">
複製代碼
其中{1}位置是用來取代圖檔之名稱(1.jpg,2.jpg),後面的jpg可自行更改,但所有檔案必須有一致的副檔名.
如你的圖檔位置是 http://img.yahoo.com/3.jpg , 就應如以下的設定(注意所有圖檔必須放於同一空間中,即紅字那個是固定的)
  1. <img src="http://img.yahoo.com/{1}.jpg">
複製代碼
例子及解釋自填...不詳解了
參數提示語則加入HTML語法..排版可自行修改,本人只簡單的用表格每行三個這樣顯示
  1. <table border="0" align="center">
  2. <tr>
  3. <td align="center">
  4. <a href="#link"><img src="http://圖檔網址/1.jpg" onclick="AddsmileText('1','smile614');hideMenu();"></a>
  5. </td>
  6. <td align="center">
  7. <a href="#link"><img src="http://圖檔網址/2.jpg" onclick="AddsmileText('2','smile614');hideMenu();"></a>
  8. </td>
  9. <td align="center">
  10. <a href="#link"><img src="http://圖檔網址/3.jpg" onclick="AddsmileText('3','smile614');hideMenu();"></a>
  11. </td>
  12. </tr>
  13. <tr>
  14. <td align="center">
  15. <a href="#link"><img src="http://圖檔網址/4.jpg" onclick="AddsmileText('4','smile614');hideMenu();"></a>
  16. </td>
  17. <td align="center">
  18. <a href="#link"><img src="http://圖檔網址/5.jpg" onclick="AddsmileText('5','smile614');hideMenu();"></a>
  19. </td>
  20. <td align="center">
  21. <a href="#link"><img src="http://圖檔網址/6.jpg" onclick="AddsmileText('6','smile614');hideMenu();"></a></td>
  22. </tr>
  23. </table>
複製代碼
以上部份,http://圖檔網址/1.jpg 跟 AddsmileText('1','smile614');紅色部份必須一致
而smile614則改為你自定的Discuz標籤名稱.
!重要! = 以上之table代碼不能斷(換)行!!!否則無法顯示!!!(這裡是要讓大家易明才斷(換)行喔~)

插入時可於table結束後加入<noscript>來防止輸入框出現,但此語法屬錯誤使用,請自行考慮再加入~

最後提交及設定可用及顯示即可
作者: 阿依    時間: 2010-5-1 18:08

嗯~試著用了
可是設置可用之後我想在文章貼上表情是要怎麼用?
按標籤出現的是方框要輸入數值耶?
作者: you1b231    時間: 2010-5-2 01:23

嗯~試著用了
可是設置可用之後我想在文章貼上表情是要怎麼用?
按標籤出現的是方框要輸入數值耶?
阿依 發表於 2010-5-1 18:08


按標籤後會出現圖示,直接按圖示就可插入文章中...不用輸入任何東西~
作者: ex142586    時間: 2010-5-2 14:32

本帖最後由 ex142586 於 2010-5-2 14:37 編輯
按標籤後會出現圖示,直接按圖示就可插入文章中...不用輸入任何東西~
you1b231 發表於 2010-5-2 01:23



請問""記得table後面加上noscript,否則會出現輸入方格""

這是加在哪?
看語法裡面本身最下面就有</table><noscript>
是加在哪邊呢@@?
作者: 阿依    時間: 2010-5-3 10:48

那我真的不知道我是哪裡弄錯耶
他真的顯示方框救命!!:::^q^:::

下面是我改的語法
  1. <script>
  2. function AddsmileText(id){
  3. document.getElementById('e_textarea').value+="[smile]"+id+"[/smile] ";
  4. }
  5. </script>
複製代碼
  1. <img src="http://s785.photobucket.com/albums/yy139/fairytail_dz/biao%20qing/{1}.jpg">
複製代碼
  1. <table border="0" align="center">
  2. <tr>
  3. <td align="center">
  4. <a href="#link"><img src="http://http://i785.photobucket.com/albums/yy139/fairytail_dz/biao%20qing/huffy.gif/1.jpg" onclick="AddsmileText('1');hideMenu();"></a>
  5. </td>
  6. <td align="center">
  7. <a href="#link"><img src="http://http://i785.photobucket.com/albums/yy139/fairytail_dz/biao%20qing/huffy2.gif/2.jpg" onclick="AddsmileText('2');hideMenu();"></a>
  8. </td>
  9. <td align="center">
  10. <a href="#link"><img src="http://http://i785.photobucket.com/albums/yy139/fairytail_dz/biao%20qing/hug.gif/3.jpg" onclick="AddsmileText('3');hideMenu();"></a>
  11. </td>
  12. </tr>
  13. <tr>
  14. <td align="center">
  15. <a href="#link"><img src="http://http://i785.photobucket.com/albums/yy139/fairytail_dz/biao%20qing/lol.gif/4.jpg" onclick="AddsmileText('4');hideMenu();"></a>
  16. </td>
  17. <td align="center">
  18. <a href="#link"><img src="http://http://i785.photobucket.com/albums/yy139/fairytail_dz/biao%20qing/loveliness.gif/5.jpg" onclick="AddsmileText('5');hideMenu();"></a>
  19. </td>
  20. <td align="center">
  21. <a href="#link"><img src="http://http://i785.photobucket.com/albums/yy139/fairytail_dz/biao%20qing/mad.gif/6.jpg" onclick="AddsmileText('6');hideMenu();"></a>
  22. </td>
  23. <td align="center">
  24. <a href="#link"><img src="http://http://i785.photobucket.com/albums/yy139/fairytail_dz/biao%20qing/mad2.gif/7.jpg" onclick="AddsmileText('7');hideMenu();"></a>
  25. </td>
  26. <td align="center">
  27. <a href="#link"><img src="http://http://i785.photobucket.com/albums/yy139/fairytail_dz/biao%20qing/sad.gif/8.jpg" onclick="AddsmileText('8');hideMenu();"></a>
  28. </td>
  29. <td align="center">
  30. <a href="#link"><img src="http://http://i785.photobucket.com/albums/yy139/fairytail_dz/biao%20qing/shocked.gif/9.jpg" onclick="AddsmileText('9');hideMenu();"></a>
  31. </td>
  32. <td align="center">
  33. <a href="#link"><img src="http://http://i785.photobucket.com/albums/yy139/fairytail_dz/biao%20qing/shy.gif/10.jpg" onclick="AddsmileText('10');hideMenu();"></a>
  34. </td>
  35. </tr>
  36. </table><noscript>
複製代碼
作者: you1b231    時間: 2010-5-4 04:11

那我真的不知道我是哪裡弄錯耶
他真的顯示方框救命!!:::^q^:::

下面是我改的語法
function AddsmileText(id){
document.getElementById('e_textarea').value+="[smile]"+id+"[/smile] ";
}
阿依 發表於 2010-5-3 10:48

你的圖片路徑錯了...
怎會有兩個http://.....
另外這個碼有BUG...我找天修一修^_^
作者: 阿依    時間: 2010-5-4 15:00

阿真的耶...我是白痴(噴)
不過改了還是一樣救命啊.......OTZ||||

你是好人!!!萬事拜託了!!!:::^q^:::
作者: Sky99    時間: 2010-5-7 20:54

哇靠，谢谢楼主分享
加油咯~
作者: JS21    時間: 2010-5-14 12:55

我的也是一樣顯示方框。。
到底哪里出問題了？！

還有這個>> "記得table後面加上noscript,否則會出現輸入方格"
樓主給的語法裡面本身最下面就已經有</table><noscript>
還要加載哪里？
作者: popmax    時間: 2010-5-17 09:32

{:4_99:}不能嗎........
作者: FT2010    時間: 2010-6-3 06:13

{:4_89:}不能
作者: 煙強    時間: 2010-6-7 15:51

感謝版大的分享~{:4_83:}

想請問一下版大~

哪邊有可以存放表情圖片的空間呢QQ?

小妹不知道哪邊可以存放圖片>"<

希望版大可以解答~謝謝>_<
作者: qqq11107    時間: 2010-6-8 16:01

感謝版大的分享~{:4_83:}

想請問一下版大~

哪邊有可以存放表情圖片的空間呢QQ?

小妹不知道哪邊可以存放圖片>"<

希望版大可以解答~謝謝>_
煙強 發表於 2010-6-7 15:51



圖片空間(穩定又快速):  http://www.flickr.com/
圖文教學 : http://xdxdxdxdxd.guitim.tw/view ... &extra=page%3D1
作者: 煙強    時間: 2010-6-8 18:12

圖片空間(穩定又快速):  http://www.flickr.com/
圖文教學 : http://xdxdxdxdxd.guitim.tw/view ... &extra=page%3D1
qqq11107 發表於 2010-6-8 16:01


感謝大大~

不過我現在也跑出顯示方框...= ="

檢查過了~都沒錯啊QQ"

還是noscript還要加在別的地方@_@?
作者: s51507    時間: 2010-6-18 20:45

請問一下...

你說按標籤會出現圖片

但我卻只有框框輸入數值@@

還有提交、取消按鈕而乙...

我只有把jpg改gif(裡面有的都改)

因為我是用gif

這樣應該對代碼沒影響吧..

但為何按標籤沒圖片呢?

(不過輸入數值按提交一樣可以)
作者: LOVEB    時間: 2010-7-4 12:15

代碼標籤為空或包含非法字符，請返回修改。
作者: astest    時間: 2010-7-26 11:59

改成這樣會出現要輸入提交,但是這樣表情出的來!!
</noscript>
...
...
</table><noscript>

改成下面這樣不會出現要輸入,但是這樣表情出不來!!
<noscript>
...
...
</table></noscript>
請問有人用成功的嗎!!管理員救救我們
作者: 比勒    時間: 2010-8-8 22:22

就是用不出來，請問你有圖片，可以給我們看看？


試過了很多種方法，全部都是無解。
作者: weloveato    時間: 2010-10-3 17:57

我試了一個下午
也問了很多人
就是不行!!!
這個好像有bug

哀~
作者: 史迪奇    時間: 2010-11-21 23:54

好方便 一定要學起來：）
作者: kenix    時間: 2010-11-24 09:56

這套真的無法成功，
感謝樓主分享，
希望可以早日研究出真的能成功的方式...
作者: you1b231    時間: 2010-11-26 01:55

這套真的無法成功，
感謝樓主分享，
希望可以早日研究出真的能成功的方式...
kenix 發表於 2010-11-24 09:56


有空來更新了
其實是在於你有沒有換行...
"!重要! = 以上之table代碼不能斷(換)行!!!否則無法顯示!!!"
作者: skyelf0603    時間: 2010-12-8 08:37

謝謝樓主分享唷！！！
按照樓主指是不斷行之後，
我有成功了唷！！！
這是很棒的教學～^^
作者: qz04    時間: 2010-12-9 21:36

23# skyelf0603

看来有亲成功了呢
不知道好不好用
先留下脚印
方便以后回来 呵呵
作者: tyrantsparta    時間: 2011-1-18 22:12

請問圖檔過多，但框框太小怎麼調大? 不然出現的圖檔都只有前面幾個
作者: 鋼鍊中毒    時間: 2011-3-19 11:39

真的不錯的文章，不過是有點煩
作者: eugene7033    時間: 2011-4-29 14:14

來試看看
作者: 朴小葵    時間: 2011-6-20 12:06

不行耶TAT
她就只有按鈕和一個小小的框框卻看不到表情TAT
該怎麼辦呢??
作者: Seohyun    時間: 2011-9-23 15:10

23# skyelf0603

真的耶 我沒斷行就成功了
各位 就是 <><>的中間不要有空格跟斷行的意思
作者: 小米    時間: 2011-10-21 13:31

不成功 /.\不知道为什么，就只出现框框 /.\
作者: chuyinchu    時間: 2011-11-3 23:09

謝謝~~~~~~~~~~~~~~~~~~~~~~~~
作者: 0857    時間: 2012-4-22 20:14

謝謝樓主分享!!
作者: altaria9111991    時間: 2012-5-10 22:56

我不明白呀...
作者: xph166    時間: 2012-5-11 09:53

http://m3guo.66rt.com
作者: 阿貓    時間: 2012-5-13 15:14

弄是弄OK啦!
但不是非常理想(倒不如不要用),這手法只是多加一個插件，讓回覆欄變成兩套表情圖案!
無法整合! 真的不好用!

既然無意提供FTP資料，還是請官方或管理員能由后台提供插件選項!  加入兔斯基與洋蔥頭...!
整合成一欄內!
TKS!!
作者: evachan1    時間: 2012-7-18 12:35

感謝樓主的分享
作者: fwiflof    時間: 2012-8-3 22:50

謝謝大大分享~~~
作者: sojh    時間: 2012-8-22 15:31

{:12_568:}真是个好帖子
作者: hico    時間: 2012-9-25 12:48

謝謝分享^___^
趕快來試試看
作者: yupp    時間: 2012-11-1 18:24

謝分享 試用下!
作者: 有机兔子    時間: 2014-1-21 12:38

感谢分享_(:з」∠
作者: GomPaw    時間: 2014-2-26 00:45

其实显示不出来真的是因为空格的关系==

我图片太大张了！
后面稍微加了这个
<img src="http://i1144.photobucket.com/albums/o484/FyeeDc/nylonemo/1.gif" width="50" height="50" border="0">

不过点击图案
不会自动跳出来@.@
作者: rabbit    時間: 2014-5-25 19:45

先馬克了！！！
作者: b0412850678    時間: 2014-5-31 15:48

原來也有這招 學習下
作者: 玥燁醬    時間: 2014-7-11 09:54

感谢分享
作者: 神秘先生    時間: 2014-8-22 16:00

感谢分享
作者: 小兔兔    時間: 2014-12-4 18:21

覺得還不錯
作者: 青青    時間: 2014-12-5 01:26

谢谢教程  辛苦了
作者: 4rphotoclub    時間: 2014-12-5 10:31

好的教學一定耍好好收下來~
作者: 2TTW    時間: 2016-1-29 22:59

謝謝分享
作者: 2TTW    時間: 2016-1-31 19:35

圖片用了很多可是只出現5個....
作者: slovedm    時間: 2016-5-11 05:00

這個很實用~~還是菜鳥新手~還得研究研究~謝謝分享~~
作者: 网雨霏霏    時間: 2016-6-9 21:16

这个 貌似不用ftp上传 就可以实现？我试试看 多谢教程
作者: 2TTW    時間: 2016-12-16 19:28

謝謝分享
作者: xpstone    時間: 2017-3-31 20:16

十分感谢
作者: 皓皓    時間: 2017-10-2 18:40

{:4_99:}不能嗎......
作者: 始作俑者    時間: 2017-10-3 01:00

好像很不錯的教學
作者: YoTHc閻羅    時間: 2020-5-22 15:17

感謝分享



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://hotbbs.info/discuz/) Powered by Discuz! 7.2