[转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法

简介:    from:http://tangb4c.yo2.cn/archives/633878 04月 22nd, 2008 现在做网页,用FCKEditor用得比较多,它的实现原理是在要加入FCKEditor的地方加入一个iframe,并将其src指向FCKeditor/editor/fckeditor.

  

from:http://tangb4c.yo2.cn/archives/633878

04月 22nd, 2008

现在做网页,用FCKEditor用得比较多,它的实现原理是在要加入FCKEditor的地方加入一个iframe,并将其src指向FCKeditor/editor/fckeditor.html?InstanceName=commodityBrief&Toolbar=Default,至于后面的参数,根据情况不同,参数传递得不一样,然后里面用Table来实现顶部的工具栏,接着下面再用一个iframe,src指向fckblank.html,来实现编辑区。

 

 

整体上显得有些臃肿。于是找了找其它的HTML编辑器,大概有FreeTextBox,TinyMCE,这里要介绍的就是TinyMCE。这是一款基于JS的编辑器,网方介绍如下:

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

 

优点(我的第一印象):

  1. 生成的代码简洁,默认皮肤简单明了;
  2. 在Asp.Net中使用方便,无须太多设置。

在Asp.Net中的使用方法其实挺简单的,不过就琢磨这个,花了大概1~2个小时的时间,所以在这里写下来,以帮助遇到同样问题的人

从官方网站下载TinyMCE(http://tinymce.moxiecode.com/download.php),然后将里面的jscripts目录拷到你的网站目录

假设你的a.aspx页面中,某一个地方需要用到编辑器,则在此位置加入

<asp:TextBox ID=”brand” TextMode=”MultiLine” runat=”server” />

并同时在header里加入:

<script src=”../js/tiny_mce/tiny_mce_src.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
    tinyMCE.init({
    mode : “textareas”,
    theme : “simple”
    });
</script>

运行页面,即可以看到一个编辑器出现了,并且你在服务端可以通过brand.Text来获取值(你可能会看到一个出错的提示,这时只需要将.aspx最开始的<%@ Page 里加入ValidateRequest=”false”,即可)

当然,如果你页面中有多个textareas,你可能只希望某一个用编辑器代替,则上面的mode一行改为:

mode : "exact",elements : “对应的ID”
需要其它的用法,可以到官方网站查看
----------------------------------------------------------------
相关资源收集:
TinyMCE 中文手册 
tinymce中几个比较有用的插件:  
 
tinymce中文字体过小解决方法   
 
目录
相关文章
|
JSON 数据格式
vue-codemirror代码编辑器使用方法
vue-codemirror代码编辑器使用方法
vue-codemirror代码编辑器使用方法
|
5天前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
14 1
|
5天前
|
机器学习/深度学习 存储 算法
MATLAB神经网络拟合回归工具箱Neural Net Fitting的使用方法
MATLAB神经网络拟合回归工具箱Neural Net Fitting的使用方法
|
9月前
|
uml
CSDN_MARKDOWN编辑器 最新使用方法指南
CSDN_MARKDOWN编辑器 最新使用方法指南
67 0
CSDN_MARKDOWN编辑器 最新使用方法指南
|
Unix Linux 开发工具
Vim编辑器的使用方法
# VIM的使用方法 Vim(Vi[Improved])编辑器是功能强大的跨平台文本文件编辑工具,继承自Unix系统的Vi编辑器,支持Linux/Mac OS X/Windows系统,利用它可以建立、修改文本文件。 使用vim创建文件可以直接输入
162 0
Vim编辑器的使用方法
|
开发框架 前端开发 JavaScript
ASP.NET Core静态文件的使用方法
静态文件(HTML,CSS,图片和Javascript之类的资源)会被ASP.NET Core应用直接提供给客户端。 静态文件通常位于网站根目录(web root) <content-root>/wwwroot文件夹下。通常会把项目的当前目录设置为Content root,这样项目的web root就可以在开发阶段被明确。
ASP.NET Core静态文件的使用方法
|
JavaScript API
富文本编辑器Quill 介绍及在Vue中的使用方法
在Web开发中,富文本编辑器是不可或缺的一个功能组件,掌握少量基础语法就能让一篇文章实现较为不错的排版效果,即见即所得
富文本编辑器Quill 介绍及在Vue中的使用方法
|
Python
Jupyter 工具的安装与使用方法,jupyter运行python代码演示,好用的python编辑器推荐!
Jupyter 工具的安装与使用方法,jupyter运行python代码演示,好用的python编辑器推荐!
438 0
Jupyter 工具的安装与使用方法,jupyter运行python代码演示,好用的python编辑器推荐!
|
Java 应用服务中间件 数据库
在线文本编辑器FCKeditor在JSP项目开发中的使用方法
以下均在tomcat服务器下操作(不是开发环境下的操作) 首先下载两个包: FCKeditor_2.6.4.zip,(FCKeditor主文件) FCKeditor-2.3.zip,(jsp,FCKeditor整合包)
145 0
|
SQL JavaScript 前端开发
DayDayUp:Markdown编辑器的简介、入门、使用方法(Markdown编辑器撰写博客)(一)
DayDayUp:Markdown编辑器的简介、入门、使用方法(Markdown编辑器撰写博客)

热门文章

最新文章