网站内容编辑器(富文本编辑器如何搭配文件选择器来实现文件上传功能？)

　　网站内容编辑器(富文本编辑器如何搭配文件选择器来实现文件上传功能？)

　　内容

　　一、富文本编辑器的概念富文本编辑器：

　　Rich Text Editor，富文本编辑器，简称RTE，是一种可以嵌入浏览器的所见即所得的文本编辑器。它提供了类似于Microsoft Word的编辑功能，很容易被不知道如何编写HTML以及需要格式化各种文本的用户所使用。

　　富文本编辑器不同于文本编辑器。程序员可以从网上下载免费的富文本编辑器，嵌入到自己的网站或程序中（当然付费功能会更强大），方便用户编辑网站@k7@ > 或信息。更好的文本编辑器是 kindeditor、fckeditor 等。

　　富文本编辑器下载： 下载地址：

　　4 快速​​入门指南

　　推荐下载第二个标准包，不太繁琐，具备所有必要的功能。

　　下载完成后解压压缩包，然后将文件夹复制粘贴到项目中的webapp目录下。

　　然后我们新建一个jsp文件，（如何创建jsp文件，可以查看博主前面的博客，里面有具体介绍

　　) 然后我们写一个简单的表格来测试富文本编辑器的效果：

　　渲染：

　　注意：所有用富文本编辑器编写的语句都会变成html语句，而那些加粗、斜体等效果都是用html语句完成的。

　　既然我们已经完成了文字的添加，这个时候很多朋友都会提出问题。富文本编辑器只能用来写文本吗？接下来博主将与大家分享富文本编辑器是如何匹配文件的。选择器来实现文件上传功能。

　　代码：

index01

新闻增加界面

提交

//根据id生成富文本编辑器

CKEDITOR.replace('myEditor');

　　二、文件上传官网地址：

　　上传文件时要注意的规则：

　　在官网找到这段代码，复制粘贴到新建的jsp文件中，然后使用

　　生成动态文件扩展名：

　　 //生成动态的后缀名

// a.png -> .png

// f.jpg -> .jpg

// 2022040.13.5221.mp4

// [2022040,13,5221,mp4]

String[] strings = oldName.split("\\.");

// id.jpg

newName+="."+strings[strings.length-1];

　　生成随机的唯一文件名：

　　在本地保存文件：

　　 //保存到本地

item.write(new File("D:\\code Resources\\icons\\upload\\"+newName));

　　效果图：

　　代码：

　　三、文件的映射概念：

　　将文件夹映射到服务器，以便用户通过浏览器中的文件夹映射路径访问图片

　　具体操作：

　　1.双击服务器进入如下界面，点击左下角的Modules

　　2.点击右边框框住的按钮

　　3.设置文件夹的路径和名称

　　4.运行服务器，打开浏览器

　　5.修改路径：将路径改成你文件中的图片路径

　　然后就可以成功运行了。

　　今天的分享到此结束，精彩的下一期继续。