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

TinyMCE 在Asp.Net中的使用方法其实挺简单的,从官方网站下载TinyMCE),然后将里面的jscripts目录拷到你的网站目录

假设你的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的语言包后,在ASP.net中使用的时候却总是不正常,无法争取读取到语言包内容。
仔细研究后发现,原来是因为ASP.net 2.0默认的HTTPResponse输出的编码是utf-8,而非中文gb2312,或是gb18030、HZ所以就会出现设置正确,但是在页面执行的时候却出现错误,不能正确读取语言包的配置的问题。
我们可以在Page类的加载过程Load中加入如果设置语句就可以解决这个问题

  Response.ContentEncoding = Encoding.GetEncoding("gb2312")

重新编译执行后,就可以正常读取到中文语言资源包中的内容了。
-----------------------------------------------------
相关资源收集:
TinyMCE 中文手册 http://www.inpeck.com/TinyMceManual/ 
tinymce中几个比较有用的插件: http://joom.org.ru/home/article/14-tinymce-plugin.html 
在线编辑器 TinyMCE 3 的简体中文语言包: http://www.metalstar.net/?d=86 
tinymce中文字体过小解决方法  http://www.humker.com/2008/03/07/tinymce-chinese-font-size 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详情:http://blog.csdn.net/spritenet/article/details/8085378 这个编辑器是我午翻资料偶然看见的,既然有些人对他评价还可以,因此我就拿来试了试 网上的一些资料基本上都停留在2011年,而且是这个抄这个,这个抄那个,真正有用的并不多,在此我参考了以下几位同学的博客,再次谢谢各位 http://blog.csdn.net/chenloveyue/article/details/7039913 http://blog.csdn.net/salc3k/article/details/5341593 http://hi.baidu.com/honfei/item/267e3dd128d934866dce3fbe http://www.hnonl.com/jonllen/article/66.aspx?display=2 我用的版本是tinymce_3_0_8 官网上有最近版本的,但是木有汉化,而且也没找到相应的说明文档 总体说来这个Tinymce和KindEditor 配置使用起来都比较简单,而且Tinymce还提供两种定义好的模式,一个是专业版,就是所有功能都有的,一种是精简版,只有6.7个功能,当然Tinymce最大的优势在于可以很方便的调整控件,通过plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",就可以很轻松的控制要显示的功能 说说目前发现的缺点: 1.没有图片上传功能 2.没有图文混排 3.css的定义太多 4.最要命的是我居然发现没有设置字体颜色和背景颜色的控件,这让我很纳闷 图片如下: 详情:http://blog.csdn.net/spritenet/article/details/8085378
在Vue3使用Tinymce富文本编辑器,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装了TinymceTinymce-Vue的相关包。你可以通过运行以下命令来安装Tinymce-Vue版本3: ``` npm install --save @tinymce/tinymce-vue@^3 ``` 2. 在你的Vue组件,引入Tinymce-Vue组件: ```javascript import { Editor } from '@tinymce/tinymce-vue'; ``` 3. 在你的模板使用Tinymce-Vue组件: ```html <template> <div> <editor v-model="content" :init="editorConfig"></editor> </div> </template> ``` 4. 在你的Vue组件,定义Tinymce的配置项: ```javascript export default { data() { return { content: '', editorConfig: { // 在这里配置Tinymce的选项 } }; } } ``` 5. 根据你的需求,配置Tinymce的选项。你可以参考Tinymce的官方文档和文文档来了解所有可用的选项。你也可以参考Tinymce-Vue在GitHub上的项目来获取更多示例和用法。 请注意,Tinymce-Vue版本4支持Vue3.0,而不支持Vue2.0。如果你的项目是Vue2.0,你需要安装Tinymce-Vue版本3。 希望这些信息对你有帮助!如果你需要更多的参考文档,你可以访问Tinymce的官方网站和文文档,以及Tinymce-Vue在GitHub上的项目。 #### 引用[.reference_title] - *1* *2* *3* [在vue3.0项目使用tinymce富文本编辑器](https://blog.csdn.net/mrjimin/article/details/121648927)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值