Search code examples
asp.netyuiascx

Yahoo Rich Text Editor with Asp.net not working

I have tried to make yahoo rich text editor in my ascx user control but i failed even after taking help from yahoo developers society.

here what i did with it yet.

1) I created ascx user control and paste the text area html code 

<div class="yuieditor">

<form method="post" action="#" id="form1"> 
    <textarea id="myEditor" name="editor" rows="20" cols="75"> 

    </textarea> 
    </form>
</div>

2) I initialized yahoo css and javascript from yahoo for my rich text editor.

<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css"/>
<!-- Utility Dependencies -->
<script type="text/javascript"
src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js"></script>
<script  type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/editor/editor-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="/wp-content/uploads/2007/10/yui-image-uploader26.js"></script>
<script  type="text/javascript">
    var myEditor = new YAHOO.widget.Editor('example_editor', {
        height: '300px',
        width: '522px',
        dompath: true,
        animate: true
    });
    yuiImgUploader(myEditor, 'example_editor',
'/wp-content/uploads/2007/12/yui_img_uploader.php', 'image');
    myEditor.render();
</script>

but its not working fine :( i am depressed to work with it but i dont want to use any other editor, i only want to use this.

please help.

here is my full code on my ascx.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="yui.ascx.cs" Inherits="YUI.yui" %>

<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css"/>
<!-- Utility Dependencies -->
<script type="text/javascript"
src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js"></script>
<script  type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/editor/editor-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="/wp-content/uploads/2007/10/yui-image-uploader26.js"></script>
<script  type="text/javascript">
    var myEditor = new YAHOO.widget.Editor('example_editor', {
        height: '300px',
        width: '522px',
        dompath: true,
        animate: true
    });
    yuiImgUploader(myEditor, 'example_editor',
'/wp-content/uploads/2007/12/yui_img_uploader.php', 'image');
    myEditor.render();
</script>
<div class="yuieditor">

<form method="post" action="#" id="form1"> 
    <textarea id="myEditor" name="editor" rows="20" cols="75"> 

    </textarea> 
    </form>
</div>

please help me out why this is not working.

Solution

  • You are not using correct control id in your code, Try this:

    Change

     new YAHOO.widget.Editor('example_editor',

    to 

     new YAHOO.widget.Editor('myEditor',

    Update your code to use correct id - myEditor in place of example_editor in other part of your code

    Also change your code to use yui-skin-sam class and not yuieditor

    Ex:

    <div class="yui-skin-sam">

    Working code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/skin.css">
<!-- Utility Dependencies -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script> 
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src="http://yui.yahooapis.com/2.9.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script src="http://yui.yahooapis.com/2.9.0/build/editor/editor-min.js"></script>
<script  type="text/javascript">
    var myEditor = new YAHOO.widget.Editor('myEditor', {
        height: '300px',
        width: '522px',
        dompath: true,
        animate: true
    });

    myEditor.render();
</script>
</head>
<body>
<div class="yui-skin-sam">

<form method="post" action="#" id="form1"> 
    <textarea id="myEditor" name="editor" rows="20" cols="75"> 

    </textarea> 
    </form>
</div>
</body>