显示YUI2富文本编辑器中的文本

时间:2013-01-09 15:49:21

标签: yui rich-text-editor

我尝试使用YUI2 Rich Text Editor,但似乎无法让它正常工作,我无法保存并显示textarea的内容。 在此先感谢您的帮助。

使用Javascript:

<script type="text/javascript">
var myEditor = new YAHOO.widget.Editor('msgpost', {
height: '80px',
width: '600px',
dompath: false, //Turns on the bar at the bottom
animate: true,
handleSubmit: false,
toolbar: {
titlebar: 'Comments:',
    buttons: [
        { group: 'textstyle', label: 'Font Style',
            buttons: [
                { type: 'push', label: 'Bold', value: 'bold' },
                { type: 'separator' },
                { type: 'push', label: 'Italic', value: 'italic' },
                { type: 'separator' },
                { type: 'push', label: 'Underline', value: 'underline' },
                { type: 'separator' },
                { type: 'push', label: 'Subscript', value: 'subscript', disabled: true },
                { type: 'separator' },
                { type: 'push', label: 'Superscript', value: 'superscript', disabled: true },

            ]
        },
        { type: 'separator' },
        { group: 'indentlist', label: 'Lists',
        buttons: [
        { type: 'push', label: 'Unordered List', value: 'insertunorderedlist' },
        { type: 'push', label: 'Ordered List', value: 'insertorderedlist' }
        ]
        }

    ]
}
});
myEditor.render();

//Inside an event handler after the Editor is rendered
YAHOO.util.Event.on('yuiButton', 'click', function() {
//Put the HTML back into the text area
myEditor.saveHTML();

//The var html will now have the contents of the textarea
var htmltest = myEditor.get('element').value;

document.getElementbyId("printHere").innerHTML = htmltest;
});
</script>

只关注了yui tutorial,并且只添加了innerHTML来显示divid="printHere"的文本编辑器中的内容<body> <form method="post" class="yui-skin-sam"> <div class="yui-skin-sam"> <textarea name="msgpost" id="msgpost" style="width: 600px; height: 80px;"> A Commisioner has been commisioned </textarea> </div> </form> <input type="button" name="yuiButton" value="Save" /> <div id="printHere"></div> </body>

HTML:

{{1}}

0 个答案:

没有答案