net的富文本编辑器（简单的实现一个富文本编辑器）

本文目录

• 简单的实现一个富文本编辑器
• 有哪些比较轻的富文本编辑器
• ASP.NET MVC 富文本编辑器的内容怎么让它只显示第一行
• 富文本编辑器的介绍
• 富文本编辑器是什么意思
• asp.net如何生成一个HTML页面
• 如何使用富文本编辑器
• 富文本编辑器-1-选型

简单的实现一个富文本编辑器

使用过 office 文档的同学一定知道他的便捷，不仅可以很好的文档，还可以赋予它一定的格式、段落、缩进，还可以使用图片等等。

如果我们在 web 上也想要实现这样的效果，那么我们应该怎么做呢？

我们可以在网上找到已经封装好的插件，例如：draft 或者 pell，这些插件都是开箱即用的，也可以在此之上进行封装。

当然，我们也可以选择自己封装一个我们需要的插件。

那怎么才能实现一个富文本器呢？

我们可以选择 document.execCommand 来实现一个简易的富文本器。

下面先来看下 document.execCommand 语法：

我们分别看看参数的含义：

既然知道了语法，那我们现在封装一个执行函数用来执行指令：

接下来，我们来做下工具栏的设计和封装。

假设工具栏有很多格式化的按钮，当我们点击的时候所选择的区域的文字会做相应改变，按钮既有显示的样式，还有执行功能的方法，可以使用对象来表示，所有按钮属性的集合形成了工具栏。

我们使用 actions 作为工具栏按钮的集合，即：

现在，我们来讲解下字段：

我们已经完成了工具栏的部分，现在我们实现下完整的页面和区域吧！

首先创建富文本容器，在容器内分别放置工具栏和区域：

我们最后来看一下实现的效果吧：

应用效果怎么样呢？我们看下面：

我们已经简单的实现了一个富文本器，但是这个器还有很大的空间等待我们去优化，比如：点击工具栏闪烁的问题，更多的功能等。

有哪些比较轻的富文本编辑器

做过Web开发的朋友相信都使用过富文本器，比较出名的CuteEditor和CKEditor很多人应该已经使用过，在功能强大的同时需要加载的东西也变得很多。下面要推荐的两款富文本器都是使用JS编写，使用简单，非常轻量级。
1、NicEditor
NicEdit是一个轻量级，跨平台的Inline Content Editor。NicEdit能够让任何 element/div变成可或者能够把标准的TextArea转换成富文本器。
NicEdit是我见过最轻量级的富文本器，总共就一个JS文件和一张图片
使用也非常简单，只需在页面中添加简单的JS代码就可以将TextBox或是TextArea控件转换成富文本器
2、KindEditor
KindEditor是一套开源的HTML可视化器，主要用于让用户在网站上获得所见即所得效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、ASP等程序接合。

ASP.NET MVC 富文本编辑器的内容怎么让它只显示第一行

以下是本人个人意见，只供参考：一，如果你的首页是静态的，而其他页面是动态的，可能是ASP.NET的版本问题，在iis中右键单击，选择属性》》ASP.NET》》ASP.NET版本，选择一个高的版本。二，如果首页也是动态页面，那就可以断定是其他页面的程序出错了，可以看看其他页面的错误提示，或是在vs中调试。三，还有一种可能是你的程序在操作数据库时出错，比如说你的首页没有操作数据库的代码，而其他页面都有，这个时候其他页面也是显示不出来的。.建议你把问题说的详细点，其他页面无法访问是怎样提示的？

富文本编辑器的介绍

富文本器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本器。它提供类似于 比如谷歌、火狐效果都非常不错，在功能的丰富性来说，还是 IE 强些（但IE的6、7、8、9几个版本就足够搞死开发者了）。富文本器不同于文本器，程序员可到网上下载免费的富文本器内嵌于自己的网站或程序里（当然付费的功能会更强大些），方便用户文章或信息。比较好的文本器有kindeditor,fckeditor等。

富文本编辑器是什么意思

富文本器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本器。下面简单的介绍一下富文本器的用法和简要的原理。

1、什么是富文本器？

抛开专业的定义，用自己的话来介绍一下到底什么是富文本器。先举个简单的例子，大家大多都使用过网上的一些博客系统或者论坛贴吧吧，那我们要发布一则文章或者消息的时候我们需要在后台设置一下这段文本的格式还有字体的大小粗细颜色等样式，此时网页上会有一个设置这些信息的菜单或者是一个网页的文本器，这个就是富文本器的常见应用，如下图：

富文本器不同于我们平时的文本器，但是其功能确实和我们的平时使用的word的是类似的，只不过富文本器设置是解决不会编写 HTML 的用户并需要设置各种文本格式在我们的网页上。

2、富文本器的原理和应用

关于富文本器的原理，一些人可能以为富文本器的原理十分的复杂，事实上也并非如此，当然功能强大的器自然会很难实现。网页上的富文本器的大致原理是使用JavaScript技术将用户的输入的内容和设置的样式转换为html、css等浏览器可以认识的代码，其核心的实现技术就是JavaScript和html 、css等前端技术。

富文本器的应用，比如做为一个网站的开发者，当我们需要一个发布文章的功能时候，用户可能不知道html代码，此时我们可以使用一些别人写好的富文本器嵌入到我们的程序中即可解决这一问题。

asp.net如何生成一个HTML页面

我的回答如下，希望能帮助您：
1.FCKeditor 是一个开源的文本器，不能直接生成html文件，但是可以借助FCKeditor控件获取在器中排版好html代码。
2.生成HTML文件，需要用到文本写入流，利用这个类实例化一个对象，用这个对象的一个write方法方法写入html文本文件.
3.写入完成由要释放资源。用这个对象调.Dispose();好像是这个。
4.具体参见代码：
StringBuilder strbuf = new StringBuilder();
strbuf="这里是我获取的FCKeditor的html代码";
StreamWriter sw = new StreamWriter(Server.MapPath("../html/default/test.htm"), true, Encoding.UTF8);
sw.Write(strbuf.ToString());
sw.Close();
sw.Dispose();
这样您就可以生成一个为test.html的html文件了
---------------------------------------------------------------------------
如果你没有变成基础，其实开可以有一种更简单的方式来生成html网页，
但是可以借助FCKeditor控件获取在器中排版好html代码。
然后保存到记事本里面，把记事本的 .txt 后缀修改为 .htm .html 然后保存，在打开就可以生成一个html网页了。

如何使用富文本编辑器

方法/步骤
1第一步需要引入UEditor的源文件，和jquery文件，来对器进行支持。如果看到图二的效果则说明部署成功咯，接下来我们就可以根据自己的实际需求来进行场地参数。
2第二步获取器的输入的文本内容，然后对获取的值传递给后台处理，也可通过from表单进行操作。
3配置文件上传，图片上传、截图上传路径（以jsp为例）
首先配置ueditor.config.js来初始化ueditor的安装路径,projectName代表项目路径URL则表示，配置后的ueditor的所在路径（可自定义）,详细配置可看图片所示
4配置好路径后我们就可以调用了，接下来需要配置上传文件的路径了(jsp/config.json)里，需要配置的有imageUrlPrefix图片访问
的路径前缀，imagePathFormat/scrawlPathFormat
等*PathFormat路径用来表示上传的文件路径（注意：windows 和linux的路径不同方式）
5在项目中添加ueditor说需要的jar包文件，然后启动项目。
6项目启动完成后，进入页面，我们可以来试试效果，大家可以任意复制图片，上传文件等来实验下我们的配置结果。出现如下结果则说明我们配置成功了，简单吧。

富文本编辑器-1-选型

团队的业务多为后台管理系统，部分业务需要使用富文本器。早期团队选用了百度器，但存在bug多、无人维护、扩展性差等问题，且后续业需要更灵活的器。为了解决这些问题，决定重选器。

基于以下原因，笔者决定使用Quill来开发团队的器组件：
1. Delta和API
Quill返回json结构的数据，有API操作器内部元素。也可以通过innerHtml获取dom。
2. 可定制
Quill可以修改、扩展现有的模块，也可以添加新的模块，甚至可以在parchment的基础上全部重写。有较强的灵活性。
3. 兼容性
当前版本兼容Chrome、IE11、Edge，已满足业务需求。
4. 与其他器比较
相比CKEditor、TinyMCE等传统器，有更好的API和定制功能。而Draft是基于React的器，需要自己实现数据层的内容，使用成本更高。国内的wangEditor功能比较全面，但不具备扩展性。

1. 基础文本模块
分割线、格式刷、段落、撤回和重做
2. 多媒体模块
图片上传模块
3. 其他模块
工具栏的Tooltip模块
4. 预览功能

图片上传主要取决于业务需求，我们可以改写图片的handler方法，打开一个模态框或者打开本地文件夹，调接口上传图片。通用点是保存的时候，用Delta保留前面的内容并插入图片内容，最后更新Quill。

由于图片上传、预览主要取决于业务需求，与器关系不大，后面不再提到。