富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能,容易被不会撰写 HTML 的用户并还要设置各类文本格式的用户所喜爱。它的应用也越来越广泛。最先只有 IE 浏览器支持,其它浏览器陆续跟进typecho 富文本编辑器,在功能的丰富性来说,还是 IE 强些。虽然没有一个统一的标准,但对于最基本的功能,各浏览器提供的 API 基本一致,从而让撰写一个跨浏览器的富文本编辑器成为或许。

  那么我们在开发中如何使用富文本编辑器呢?竖起眼睛仔细听~

  首先我们得在Ueditor的官网上下载它的压缩包 Ueditor压缩包

  (如果不想自动找的朋友,我会在文章的下方附上Ueditor的下载附件~)

  -----------------------------------------Downloading---------------------------------------

  下载出来以后解压它,放在桌面上。然后我们打开eclipse。

  1. 右键 动态网站项目

  2.将下载出来的压缩包复制在WebContent下(如下图所示)

  3.我们打开utf8-jsp文件夹中会发觉一堆配置文件(如下图所示)

  如上图所示,表示我们的富文本编辑器的环境配置成功了。

  这时候我们可以跑一下这个项目

  4.右键—>Run on Server (ps:泡动态网站项目的前提是你配置了Tomcat)

  5.在浏览器地址栏里键入 :8080/ue/utf8-jsp/index.html

  

  如上图所示,这早已是一个富文本编辑器了,我们可以象使用word一样使用它,但是这个富文本编辑器是官方提供,并不是我们手写的。

  接下来,我们来手写一个富文本编辑器。

  6.在WebContent目录中改建一个html文件

  7.我们将utf8-jsp/index.html 文件上面的表头约束复制进来

  

  上面这个约束是不能直接insert至我们改建的html文件中,因为它的src目录指的不明晰,所以我们要改成

  

  8.接下来,我们在改建的html文件的body中写上

  

  9.在下写上我们的脚本

  

       var ue=UE.getEditor('myue')

  整体代码如下图所示

  写到这儿我们的代码撰写的工作就完成了。

  现在我们根据前面的第四步再次跑一遍我们的项目,这时候我们向地址栏键入的地址是

  :8080/ue/

  效果图如下图所示

  总结

  今天我们写了一个富文本编辑器。富文本编辑器的作用范围巨大的。比如我今天用CSDN写博客这个就选用了富文本编辑器。平常我们在使用百度贴吧,qq空间,新浪微博做评论时就选用的是富文本编辑器。富文本编辑器功能强悍,可以进行可以读取、编辑跟保存RTF或HTML格式的文档typecho 富文本编辑器,并支持丰富的格式设置、自动折行、HTML或RTF文档的导出/导出、表格、图片跟注释等操作。

  所以!我们要谢谢开源代码!致敬!

Last modification:December 15th, 2020 at 07:09 pm
如果觉得我的文章对你有用,请随意赞赏