富文本框tinyeditor的用法

来源：互联网发布：arcgis裁剪栅格数据编辑：程序博客网时间：2024/05/17 22:09

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

二、添加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的值即可

0 0