SCLUB免費論壇申請-使用者論壇 - Powered by Discuz! Board

繁體 | 簡體

Sclub交友聊天~加入聊天室當版主

(檢舉)

新浪微博

QQ空间

Facebook

Google+

Plurk

Twitter

Line

標題: [教學] 自定表情 [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.先把以下語法插入 "全局"--> "站點信息" --> "網站第三方統計代碼"

<script>
function AddsmileText(id,val){
document.getElementById('e_textarea').value+="["+val+"]"+id+"[/"+val+"] ";
}
</script>

複製代碼

2.到 "界面" --> "編輯器設置" --> "Discuz! 代碼" 新增標籤
標籤是自定的(但請不要跟現有的同樣名稱,本例使用smile614,圖標則是準備圖檔之第2點)

3.新增後點詳情
在替換內容加入

<img src="http://你存放表情之空間網址/{1}.jpg">

複製代碼

其中{1}位置是用來取代圖檔之名稱(1.jpg,2.jpg),後面的jpg可自行更改,但所有檔案必須有一致的副檔名.
如你的圖檔位置是 http://img.yahoo.com/3.jpg , 就應如以下的設定(注意所有圖檔必須放於同一空間中,即紅字那個是固定的)

<img src="http://img.yahoo.com/{1}.jpg">

複製代碼

例子及解釋自填...不詳解了
參數提示語則加入HTML語法..排版可自行修改,本人只簡單的用表格每行三個這樣顯示

<table border="0" align="center">
<tr>
<td align="center">
<a href="#link"><img src="http://圖檔網址/1.jpg" onclick="AddsmileText('1','smile614');hideMenu();"></a>
</td>
<td align="center">
<a href="#link"><img src="http://圖檔網址/2.jpg" onclick="AddsmileText('2','smile614');hideMenu();"></a>
</td>
<td align="center">
<a href="#link"><img src="http://圖檔網址/3.jpg" onclick="AddsmileText('3','smile614');hideMenu();"></a>
</td>
</tr>
<tr>
<td align="center">
<a href="#link"><img src="http://圖檔網址/4.jpg" onclick="AddsmileText('4','smile614');hideMenu();"></a>
</td>
<td align="center">
<a href="#link"><img src="http://圖檔網址/5.jpg" onclick="AddsmileText('5','smile614');hideMenu();"></a>
</td>
<td align="center">
<a href="#link"><img src="http://圖檔網址/6.jpg" onclick="AddsmileText('6','smile614');hideMenu();"></a></td>
</tr>
</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^:::

下面是我改的語法

<script>
function AddsmileText(id){
document.getElementById('e_textarea').value+="[smile]"+id+"[/smile] ";
}
</script>

複製代碼

<img src="http://s785.photobucket.com/albums/yy139/fairytail_dz/biao%20qing/{1}.jpg">

複製代碼

<table border="0" align="center">
<tr>
<td align="center">
<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>
</td>
<td align="center">
<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>
</td>
<td align="center">
<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>
</td>
</tr>
<tr>
<td align="center">
<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>
</td>
<td align="center">
<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>
</td>
<td align="center">
<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>
</td>
<td align="center">
<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>
</td>
<td align="center">
<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>
</td>
<td align="center">
<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>
</td>
<td align="center">
<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>
</td>
</tr>
</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://six168.com/discuz/)