富⽂本编辑器的使⽤⽅法
富⽂本编辑器⼜称Rich Text Editor,简称RTE,它不同与⽂本编辑器,程序员可以到⽹上下载免费的富⽂本编辑器嵌于⾃⼰设计的⽹站或者程序⾥,⽅便⽤户编辑⽂章或者信息,主要⽤于发新闻类似的东西。
它有着和word⽂档还有⽹上发论坛插图⽚该字体类似的功能,
它的本质格式是html代码 如:
如果不喜欢编写或者不会编写HTML的⽤户可以选择⽤这个编辑器来帮你设置各种⽂本格式。
基本原理:
对于⽀持富⽂本编辑器的浏览器来说,其实就是设置 document (特制某⽂件)的designMode 属性(全局属性)为 on 后,再通过执⾏Command(返回值)[document暴露execCommand⽅法,该⽅法允许运⾏命令来操纵可编辑内容区域的元素]
(‘commandName’[, UIFlag[, value]]) 即可。
commandName (激活元素的名称)和 value(这个value是默认属性,是给程序来辨认你选了哪个的) 可以在MSDN 上和MDC 上到,它们就是我们创建各种格式的命令,⽐⽅说,我们要加粗字体,执⾏ Command(‘bold’, false) 即可。
但是值得注意的是,通常是选中了⽂本后才执⾏命令,被选中的⽂本才被格式化。对于未选中的⽂本进⾏这个命令,各浏览器有不同的处理⽅式
同时需要注意的是,UIFlag 这个参数设置为 true 表⽰ display any user interface triggered by the command (if any),
为了不影响当前 document, 通常的做法是在页⾯中嵌⼊⼀个 iframe 元素,然后对这个 iframe 内的 document(通过
⽤法:
将富⽂本插件引⼊到代码中
然后将插件⾥⾯的config.js 打开 ,⾥⾯就是⼀些配置⽂件,先是给了⼏个默认的配置
Config.language 后⾯设置的是默认的语⾔,zh-cn是简体中⽂的意思。
Config.uiCoor设置的是UI的颜⾊,⼀般是默认颜⾊,如果你想设置你喜欢的那种颜⾊,便可以在这⾥
asp富文本编辑器改。
你还可以在⾥⾯设置你需要的⼀些格式内容,⽐如
这样就是⾃定义格式了
接下来就要初始化CKEditor
CKEditor 的介绍:
ckeditor是⼀个JavaScript 应⽤程序,你只需要在你的⽹页中包含⼀个⽂件引⽤就能加载它
ckeditor就像⼀个在你⽹页中的⽂本区域(textarea)⼀样⼯作,它提供了⼀个简单易写的⽤户界⾯、版式和丰富的⽂字输⼊区域, 但⽤⽂本区域要实现同样的效果,并不容易,它需要⽤户输⼊html代码, 但是,实际上,CKEditor仍然是使⽤⼀个⽂本区域来传递它的数据到服务器上,这个⽂本区域对使⽤者来说是不可见的
所以⽤它时我们需要准备⼀个⽂本域,也就是类似于⼀个多⾏⽂本框,更⼤的优势是可以拖动改变⾏数,它也有⼀个参数rows,默认显⽰50⾏ 你也可以设置它为多少⾏。主要是因为我们使⽤ckeditor时需要⼀个容器,⽽它⾮常适合
⽂本域:
最后就是初始化了
editorNotice是我命名的⼀个参数。
初始化完成后 就能在页⾯的⽂本域⾥⾯输⼊任意你想输⼊的⽂字了。
如果还需要实现图⽚上传的功能 我们只需要配置图⽚上传的路径即可
路径前⾯config.filebrowserImageUploadUrl是上传图⽚的固定写法,不能改动的,否则会导致图⽚上传失败。后⾯的路径是你想选择的哪种路径,只有能到⾃⼰的控制器就⾏。后⾯的路径是⾃⼰的控制器加⽅法。
图⽚上传的⽅法介绍:
⼀般⽤HttpPostedFileBase来接收参数,接收的变量⼀定是Upload,如果改动的话是接收不到的图⽚的。
⾸先我们要获取⽂件的类型,也就是⽂件的扩展名,系统主要通过扩展名来识别这是什么⽂件的,⽤System.Io.Path 来获取的。
然后拼接⼀个新的⽂件名称
最后就是创建⽂件⽬录和保存⽂件了
后⾯还要写⼀个vo(引⽤)来封装,完成后就能在编辑器⾥⾯添加图⽚了
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论