首页 > 网站 > WEB开发 > 正文

富文本框tinyeditor的用法

2024-04-27 15:13:27
字体:
来源:转载
供稿:网友

一、导入   tinyeditor的类和js包,具体tinyeditor包在我的资源里面有的,网上也有很多资源,自己下载,此处不做多介绍

<link rel="stylesheet" href="../tinyeditor/style.CSS" />

<script type="text/javascript" src="../tinyeditor/tinyeditor.js"></script>

二、添加textarea控件

 <textarea id="input"  style="width:400px; height:200px"></textarea><script type="text/Javascript">    var instance = new TINY.editor.edit('editor', {        id: 'input',        width: 584,        height: 175,        cssclass: 'te',        controlclass: 'tecontrol',        rowclass: 'teheader',        dividerclass: 'tedivider',        controls: ['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'PRint'],        footer: true,        fonts: ['新宋体', '黑体', 'Verdana', 'Arial', 'Georgia', 'Trebuchet MS', '微软雅黑', '宋体', '幼圆', '楷体', '华文行楷'],        xhtml: true,        cssfile: 'style.css',        bodyid: 'editor',        footerclass: 'tefooter',        toggle: { text: 'source', activetext: 'wysiwyg', cssclass: 'toggle' },        resize: { cssclass: 'resize' }    });

三、点击按钮获得文本框的输入值

1、前端获得值方法:

<asp:Button ID="Button1" runat="server" Text="提交" OnClientClick="checkform()"  />

function checkform() {        instance.post();        var txtContent = document.getElementById("input").value;            }

2、后台获得值方法:

添加隐藏按钮<asp:HiddenField ID="txthidden" runat="server"/>

function checkform() {        instance.post();        var txtContent = document.getElementById("input").value;        document.getElementById('txthidden').value = txtContent;           }

 <asp:Button ID="Button1" runat="server" Text="提交"  OnClick="Button1_Click" />

在后台直接读取txthidden的值即可


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表