富文本编辑器的使用方法

富文本编辑器又称Rich Text Editor,简称RTE,它不同与文本编辑器,程序员可以到网上下载免费的富文本编辑器嵌于自己设计的网站或者程序里,方便用户编辑文章或者信息,主要用于发新闻类似的东西。
它有着和word文档还有网上发论坛插图片该字体类似的功能,
富文本编辑器的使用方法_第1张图片

它的本质格式是html代码 如:
在这里插入图片描述
如果不喜欢编写或者不会编写HTML的用户可以选择用这个编辑器来帮你设置各种文本格式。
基本原理:
对于支持富文本编辑器的浏览器来说,其实就是设置 document (特制某文件)的designMode 属性(全局属性)为 on 后,再通过执行 document.execCommand(返回值)[document暴露execCommand方法,该方法允许运行命令来操纵可编辑内容区域的元素](‘commandName’[, UIFlag[, value]]) 即可。
commandName (激活元素的名称)和 value(这个value是默认属性,是给程序来辨认你选了哪个的) 可以在MSDN 上和MDC 上找到,它们就是我们创建各种格式的命令,比方说,我们要加粗字体,执行 document.execCommand(‘bold’, false) 即可。
但是值得注意的是,通常是选中了文本后才执行命令,被选中的文本才被格式化。对于未选中的文本进行这个命令,各浏览器有不同的处理方式
同时需要注意的是,UIFlag 这个参数设置为 true 表示 display any user interface triggered by the command (if any),
为了不影响当前 document, 通常的做法是在页面中嵌入一个 iframe 元素,然后对这个 iframe 内的 document(通过 iframe.contentWindow.document 获得)进行操作。
用法:
将富文本插件引入到代码中
然后将插件里面的config.js 打开 ,里面就是一些配置文件,先是给了几个默认的配置
富文本编辑器的使用方法_第2张图片
Config.language 后面设置的是默认的语言,zh-cn是简体中文的意思。
Config.uiCoor设置的是UI的颜色,一般是默认颜色,如果你想设置你喜欢的那种颜色,便可以在这里改。
你还可以在里面设置你需要的一些格式内容,比如
富文本编辑器的使用方法_第3张图片
这样就是自定义格式了
接下来就要初始化CKEditor
CKEditor 的介绍:
ckeditor是一个JavaScript 应用程序,你只需要在你的网页中包含一个文件引用就能加载它
ckeditor就像一个在你网页中的文本区域(textarea)一样工作,它提供了一个简单易写的用户界面、版式和丰富的文字输入区域, 但用文本区域要实现同样的效果,并不容易,它需要用户输入html代码, 但是,实际上,CKEditor仍然是使用一个文本区域来传递它的数据到服务器上,这个文本区域对使用者来说是不可见的
所以用它时我们需要准备一个文本域,也就是类似于一个多行文本框,更大的优势是可以拖动改变行数,它也有一个参数rows,默认显示50行 你也可以设置它为多少行。主要是因为我们使用ckeditor时需要一个容器,而它非常适合
文本域:
在这里插入图片描述
最后就是初始化了
在这里插入图片描述
editorNotice是我命名的一个参数。
初始化完成后 就能在页面的文本域里面输入任意你想输入的文字了。
如果还需要实现图片上传的功能 我们只需要配置图片上传的路径即可
在这里插入图片描述
路径前面config.filebrowserImageUploadUrl是上传图片的固定写法,不能改动的,否则会导致图片上传失败。后面的路径是你想选择的哪种路径,只有能找到自己的控制器就行。后面的路径是自己的控制器加方法。
图片上传的方法介绍:
一般用HttpPostedFileBase来接收参数,接收的变量一定是Upload,如果改动的话是接收不到的图片的。
首先我们要获取文件的类型,也就是文件的扩展名,系统主要通过扩展名来识别这是什么文件的,用System.Io.Path 来获取的。
在这里插入图片描述
然后拼接一个新的文件名称
在这里插入图片描述
最后就是创建文件目录和保存文件了
富文本编辑器的使用方法_第4张图片
后面还要写一个vo(引用)来封装,完成后就能在编辑器里面添加图片了

你可能感兴趣的:(富文本编辑器的使用方法)