富文本生成静态html,如何更加安全快速的使用富文本编辑器
众所周知,富文本编辑器是目前用途广泛的前端插件,它可以直接编辑并保存多样化的文本格式。适用于论坛留言,简单文章发布,自定义静态页面等。本文简单对一种安全使用富文本编辑器的方法进行介绍。文章实例
文章使用 UEditor富文本编辑器版本为1.2.2,语言为C#,网站类型为ASP.NET
准备工作
首先去官网下载最新版本的Ueditor,目前时间2019.3.28该插件还没有更新,下载地址
解压后文件目录为
可以直接将整个文件夹附加在建立的.NET网站中。其中net文件夹里APP_Code文件需全部转移至编写网站的App_Code中,便于后面代码中直接使用。因此,整个目录结构为
网站目录
App_Code
下载的Editor文件夹的App_Code中.cs文件
网站使用的其他.cs文件
Ueditor
其他的文件
创建Ueditor控件对象
首先创建一个web应用窗体 Ueditor.aspx ,我们添加editor的核心js文件,添加代码如下:
首先我们需要加入一个editor的载体。我选择的是一个Textarea标签,其中我设置了长宽,需要的同学可以学习一下css技巧使用合适的大小。
接下来就是最重要的地方,我们使用js来控制editor的生成,代码一定要放在标签下方,因为html是自上而下阅读的。
var ue = UE.getEditor('editor');
完成以上操作之后就可以大胆开启。下图是运行结果:
与服务器交流
完成以上操作,我们的编辑器就可以使用了,我们接下来要进行服务器操作。
我们需要如下修改Textarea标签,这个标签中出现了runat属性,这是Asp.NET的一个服务器标识,为了在Post时把该标签一并发往服务器。后面又加了一个Button控件,这个控件主要是为了表单提交使用,感兴趣的同学可以了解一下,其中Onclick指的是服务器后台方法。对应C#函数,而OnClientClick指的是前台的方法。经过服务器解析后,Onclick会隐藏,而OnClientClick会转化为前台html标签的onclick属性。
接下来的代码一定要放在标签下方,因为html是自上而下阅读的。
function BefSubmit () {
var Pstr = $("#");
Pstr.text(ue.getContent());
//alert(ue.getContent());
}
protected void Btn_Post_Click(object sender,EventArgs e)
{
string str = Server.HtmlDecode(editor.InnerHtml);
Response.Write(str);
}
上面代码中的也是服务器标签,是让编译后的html文件能够获取到转化后的标签ID
安全通信
如果你按照我的方法进行到现在,那提交按钮点击过后肯定会出错,这是因为富文本编辑器的内容是完整的html代码,它会带有类似img,script这样的标签。这对于服务器安全来说是不安全的,因此会保护性报错。这时候我们就要考虑将内容进行加密传输。
为了不影响到editor内容,我选择使用另外的Textare标签作为载体,同时把它隐藏。然后对内容进行Base64加密,为了保证js加密中文到C#解密不会出错,我参考了大佬写的巨强方法,将C#内容放在MyBase64类中写成静态方法。
function BefSubmit() {
var Pstr = $("#");
Pstr.text(encode64(strUnicode2Ansi(ue.getContent())));
//alert(ue.getContent());
}
protected void Btn_Post_Click(object sender,EventArgs e)
{
string str = Server.HtmlDecode(PostStr.InnerHtml);
Response.Write(MyBase64.base64Decode(str));
}
完成上面的改动后,我们的editor使用终于完成了,下面放上效果图:
富文本生成静态html,如何更加安全快速的使用富文本编辑器相关推荐
- 使用富文本OHAttributedLabel
OHAttributedLabel 富文本标签 https://github.com/AliSoftware/OHAttributedLabel 以下是我渲染出来的效果 OHAttributedLab ...
- vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
- html加载富文本_vue使用富文本粘贴图片和html访问图片资源的403问题(http referrer) - 暗恋桃埖源
1.问题描述 在项目中使用富文本编辑器时,粘贴图片之后出现了一个问题,就是该图片通过地址可以打开,但是在富文本编辑器中却无法显示,报错GET https:///pic/d058ccbf6c81800a ...
- 微信小程序-后台使用富文本编辑器返回数据,小程序编译富文本编辑器返回的数据
最近遇到一个功能,后台管理系统添加商品的时候,商品详情是使用富文本编辑器添加的.小程序获取的商品详情数据是含有<p>标签的. 后台管理系统 百度了多种方法,也试用了很多方法,最终觉得wxP ...
- Django 3.2.5博客开发教程:使用富文本编辑器添加数据
在Django admin后台添加数据的时候,文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码,这十分吃力,也没法上传图片和文件.这显然不是我等高大上程序猿想要的. 为提升效率,我们可以使 ...
- 杨老师教你学会使用富文本编辑器KindEditor之添加页面设计
2018-12-06 进行整理本篇文章,主要是解决如何引入富文本编辑器的使用 2019-06-18 进行了二次完善,解决了富文本编辑器的图片上传和附件上传问题 本篇文章进行二次更新操作,完善了上传图片 ...
- 使用富文本编辑器wangEditor完成图片文件的上传
项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wang ...
- Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
- CSDN使用富文本编辑器为所发布的文章生成右侧目录
如果我们想为我们的文章生成相应的目录,在不使用MD编辑器的情况下,我们使用富文本编辑器也是可以为我们的文章生成目录(特别提醒:最少需设置4个标题这样才能看出效果).我们可以假设需要发布的文章已经编辑好 ...
最新文章
- Imagination
- 如何解决padding标记在ie7、ie6以及firefox中的兼容问题
- python操作MySQL 模拟简单银行转账操作
- 阿里云飞天AI加速器+Serverless容器,帮助图森未来提升资源利用率
- EmEditor Pro 8.3简体中文绿色增强(无需安装)版
- php 怎么验证邮箱验证码,PHP 验证邮箱是否有效 - 沃森博客
- 6.5 XGBoost实战
- 姚前:分布式账本与传统账本的异同及其现实意义
- java案例代码11-学生类的录入,查询,对象的封装
- html页面布局实例,div布局实例
- 微信公众号的调试与测试
- demo h5 touch 移动_移动端Touch事件与H5-Canvas像素点检测实现刮刮乐
- 转-iOS- GPUImage README.md
- 目前有哪些好用的测试管理工具?
- 安卓之父安迪·鲁宾:让乔布斯羡慕嫉妒恨的人
- 【转】我从罗振宇、脱不花得到的10点
- 【数据库】ER图进行描述某系统之学习七
- 线性回归和卡方分布与方差分析
- 交互设计实用指南系列(11)—减少记忆负担
- 使用乾坤微前端nginx和服务器部署
热门文章
- 用wordcloud生成中国地图
- 服务器2008怎么打开隐藏文件,win2008隐藏指定的磁盘
- vue 项目移动端 PC端自适应
- 吉利、腾讯、中汽、安恒签署战略合作协议,共建智能网联汽车安全运营体系
- 打印机 未授予用户在此计算机上的请求登录类型 win7,Win7访问网上邻居提示未授予用户在此计算机上的请求登录类型怎么办?...
- C++和qt designer的混合编程--动态计算加法小工具
- jenkins学习17 - 添加环境变量(Environment Injector)
- 数据库和数据仓库的关系
- 不固定图片宽高瀑布流_图片横向等高瀑布流,每行占满,限制行数 的实现
- 还在苦苦寻找骁龙845评测?你该关注的是它的AI---凯利讯半导体