TinyMCE EDITOR

by refhat

HTML

<script src="http://www.tinymce.com/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
function create_img(source){
    //console.log(source);
    ed = tinymce.get('second');
    ed.execCommand('mceInsertContent',false,'<img src="'+source+'"/>')
}
</script>

<table>
    <tr><td colspan="2"><select name="sel" id="sel" onchange="create_img($('#first').val())">
        <option value="">Please Select</option>
        <option value="1" name="tvalue" id="sel1">First Image</option>
        <option value="2" name="tvalue" id="sel2">Second Image</option>
        <option value="3" name="tvalue">Third Image</option>
        <option value="4" name="tvalue">Fourth Image</option>
        <option value="5" name="tvalue">Fifth Image</option>
        </select></td></tr>
    <tr><td><textarea rows="10" cols="30" id="first"></textarea></td><td><textarea rows="10" cols="30" id="second"></textarea></td></tr>
    
</table>

CSS

#second{border:2px solid yellow;}

JavaScript

tinyMCE.init({
        // General options
       mode : "exact",
        elements : "second",

         // Skin options
        skin : "o2k7",
        skin_variant : "silver",
    
});
$("document").ready(function() { var i = 1;
    $("#sel1").each(function() {
        $("#first").val("http://www.google.com/logos/2011/brazil_day-2011-hp.jpg");
        
    })   

})
    
    
   /* http://www.google.com/intl/en_com/images/srpr/logo3w.png
http://www.google.com/logos/2011/moon_festival11-hp.jpg
http://www.google.com/logos/2011/chuseok11-hp.jpg
http://www.google.com/logos/2011/Teachers_Day-2011-hp.jpg
http://www.google.com/logos/2011/rugby_world_cup-2011-hp.jpg
http://www.google.com/logos/2011/brazil_day-2011-hp.jpg */