Vine

原文參考自：Example YUI Image upload with YUI 2.6.0

今天簡單用了一下YUI的Uploader跟Rich Text Editor發現真的很方便!

不過後來發現Rich Text Editor的照片只能貼網路上的圖片連結

所以想要做個合併囉! 上網一查發現已經有人做好啦~XD

其實用法很簡單,先來一個快速上手的教學吧!

Include file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/skin.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/logger/logger-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/editor/editor-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="yui-image-uploader26.js"></script>

這邊比較特別的就是yui-image-uploader26.js,這個檔案是由allmybrain.com所撰寫的,網站中還有舊版本的可以使用:)

HTML:

<form method="POST" action="#">
<textarea name="editor" id="editor"></textarea>
</form>


Javascript:

(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var myConfig = { //設定Rich Text Editor
height: '300px',
width: '800px',
dompath: true,
focusAtStart: true
};
myEditor = new YAHOO.widget.Editor('editor', myConfig);
yuiImgUploader(myEditor, 'editor', 'forumUpload.php','image');
myEditor.render();
})();


這樣就完成囉!

Squall Javascript, YUI