Changing default editor in component to tinyMCE

Question

I'm trying to integrate tinyMCE with my component but I'm getting issues with embedding tinyMCE JS and switching it from default. I've tried removing WYSIWYG.attach and replacing with the below. Then renaming textarea id= to textarea id=\"mytextarea1\" but no luck.

<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
<script>
    tinymce.init({
        selector: '.mytextarea1'
    });
</script>

if ($type=="text") {
        if (strpos($name,"color")) { 
            $picker = "<a href=\"javascript:TCP.popup(document.forms[3].elements['$name'], 1)\"><img width=\"15\" height=\"13\" border=\"0\" alt=\"Click Here to Pick up the color\" src=\"img/sel.gif\"></a>";
        }
        $this->form .= "<tr><td>$display : </td><td><input type=\"text\" size=\"$size\" name=\"$name\" value=\"$value\">$picker</td></tr>";         
    }
    if ($type=="textarea") {
        $this->form .= "<tr><td>$display : </td><td><textarea rows=\"$size\" cols=\"40\" name=\"$name\">$value</textarea></td></tr>";           
    }
    if ($type=="ow") {
        $size = $size."px";
        $this->form .= "
            <script type=\"text/javascript\">
                WYSIWYG.attach('text', full);

            <tr>
                <td>$display : </td>
                <td><textarea id=\"text\" style=\"width:80%;height:$size;\" name=\"$name\">$value</textarea></td>
            </tr>
            ";          
    }               
    if ($type=="hidden") {
        $this->form .= "<input type=\"hidden\" name=\"$name\" value=\"$value\">";           
    }               

}