当前课程知识点：软件开发实训--动态网站开发 > 12 UEditor富文本编辑器 > 12.2整合UEditor到内容编辑界面 > 12.2.1整合UEditor到内容编辑界面
同学你好
欢迎回到软件开发实训课堂
上节课我们对UEditor进行了修改
那么我们来看一下
如何来实现使用它呢
现在已经没有了错误
我们来看如何去使用它
打开其它源
找到我们要使用他的文件
在模板templates文件夹下
找到editoontent
在这个文件夹下
我们把UEditor相关的js全部给他拿进来
好
我们从这个项目中拖入
第一个是ueditor.config.js
第二个是它的
打包文件
因为我们获取的是源码
所以这里边并没有它打包好的文件
我们把它复制过来
在我们的下载文件夹里面下载了相关的JSP
的包里边已经有了他
打好包的jS包
我们把它复制过来
放在我们的文件夹下
这样我们引入下面这个包
把这个路径给它改对了
改一下
用上面来进行修改
我们的文件夹是ue
所以要以斜杠ue开始
把它都换过来
再把语言中的包给拿过来
同样的给它换一下
注意属性
要用th前缀
然后才能去动态计算
我们可以禁止它来验证这个错误
这样的话就不会有这些红线来干扰我们
现在我们就可以对我们的编辑框使用UEditor编辑器了
在我们使用编辑器的书域加一个ID
我们就把它叫做
contents和我们的对应的字段
名字相同
然后我们来用它加一个script的标签
现在我们来写UEditor等于ue.
getEditor
首先是容器从
contents
后边是它的配置
好
保存
现在我们来运行
运行之前记得把数据库启动起来
好
启动之后我们打开浏览器去访问
我们输入正确的用户名密码
好
点击内容添加后
我们会进入到这个界面
但是我们文本框并没有变成在线编辑器
打开浏览器的开发工具
我们来看一下出现了什么问题
这里是说明找不到编辑器的相关文件
包括配置等等
这些JS文件都没有找到
这需要我们重新发布一下
将我们的所有的文件发布到目标位置
使用依赖关系或者是清理并构建都可以
发布成功后我们再次打开浏览器刷新界面
点击内容管理
我们来看一下
他已经识别了一部分
但是还是有问题
UE没有被定义
请求后台配置像http错误
上传功能将不能正常使用
我们打开我们的模板文件
然后将语言包放在编辑器的
JavaScript脚本的后边
让它识别ue对象
保存后我们重新刷新界面
来看一下
这是找不着他的
CSS文件
我们打开其他源
找到UE下面的主题
这个文件夹是存在的
在这个项目里面
我们看一下
它有一个叫
我们打开ue的编辑器的说明
在说明文档里面它有一个介绍
首先是加在脚本
并且加载配置文件以及它的脚本文件就可以了
我们看default CSS
themes default
这下面没有生成我们的CSI包还得去打包好的
下载包里边
把它复制过来
我们来看
在我们下载好的js包里边找到themes
这里边有压缩好的
CSS文件我们把它复制过来
default
复制
然后给它粘到我们的项目中去
这里边多出来的文件可以删掉
这重复了
好
CSS和image就有了
把下划线的CSS可以删掉
把它删掉就行了
他是源码的位置
我们不需要他
现在我们刷新界面
点击内容添加
我们看一下它
defauitCSS下面的UEditor.css
它获取这个的时候出错了
我们需要重新发布一下
重新清理并构建
为了把所有包的内容都拿过来
你可以把打包好的文件给它覆盖到源码上去
因为我们复制进来的是源码
所以它为打包的文件主要包括了CSS还有
JavaScript脚本
那么它的图片在它的CSS目录下
对于第三方的相关的内容
你也可以去把它复制过来
如果说找不着的话
你可以把它复制过来
发布完成后我们刷新界面
好
重新登录
输入正确的账号密码
然后点击添加
可以看到我们的编辑器就已经进来了
虽然编辑器进来了
但是出现了一个错误
看一下这里
这里多了一个UE
我们的请求路径多出来了
也就是我们的配置文件这里
编辑器的配置文件
这个ue实际上是他多余出来了
它本身url给你加了一个UE这样的目录
UE给他删掉
然后写上一个Editor
这个路径没有改过来
没有关系
我们接着看一下我们的控制器
我们的控制器给出的路径是UEditor
我们刷新一下
清理并构建
登录进来
看一下这会UE是有了UEditor
但他依然没有找到我们的
说明我们控制器没有被扫描
我们移动一下控制器的位置
因为我们的应用是在这个包里边
所以我们把它移到我们原有的控制器的包里
让他能够扫描得到
好
我们的包
改过来了
直接刷新界面
重新登录
好
他的错误请求发生了变化
我们来看一下
UEditor
Request Editor路径
改一下方式
为什么会找不到
controller
好
这样可以看得到它已经得到了相关的数据
好
回到我们的编辑器页面
可以看到下面的错误也已经消失了
那么我们添加了
具体的内容
点击保存
我们来看一下
保存成功
到内容管理页已经有了我们进行编辑
进来的内容也存在
说明我们已经把编辑器给它集成好了
好
有关UEditor的使用我们就讲到这里
下节课
再见
-1.1课程介绍
--1.1.3随堂测试
-1.2网站需求分析
--1.2.4随堂测试
-1.3网站首页分析
--1.3.3随堂测试
-1.4导航菜单分析
--1.4.3随堂测试
-1.5内容区域分析
--1.5.3随堂测试
-1.6内容副页面分析
-1.7编写需求文档
-2.1后端页面总体分析
--2.1.3随堂测试
-2.2用户管理功能设计
--2.2.3随堂测试
-2.3内容与分类功能分析
--2.3.3随堂测试
-2.4网站配置功能设计
--2.4.4随堂测试
-2.5数据库及表结构分析
-总体设计文档
-3.1前台模板约定
--3.1.3随堂测试
-3.2网站配置接口设计
--3.2.3随堂测试
-3.3菜单接口设计
--3.3.3随堂测试
-3.4内容接口设计
--3.4.3随堂测试
-3.5幻灯片接口设计
--3.5.3随堂测试
-补充设计文档
-4.1用户管理功能设计
--4.1.3随堂测试
-4.2菜单管理功能设计
--4.2.3随堂测试
-4.3内容管理功能设计
--4.3.3随堂测试
-4.4网站配置信息设计
--4.4.3随堂测试
-完成设计文档
-4.6随堂测试
-5.1开发环境搭建
--5.1.2随堂测试
-5.2Web前端环境搭建
-5.3创建用户实体
--5.3.2随堂测试
-5.4用户实体表创建与初始化
--5.4.2随堂测试
-5.5用户数据访问接口实现
--5.5.2随堂测试
-5.6环境搭建问题
-6.1用户服务层接口实现
--6.1.2随堂测试
-6.2用户列表和编辑控制器实现
--6.2.2随堂测试
-6.3用户存储和删除控制器实现
-6.4用户添加、编辑界面实现
-6.5用户管理添加用户调试
-7.1用户查询模板实现
--7.1.2随堂测试
-7.2用户信息编辑的实现
-7.3单个用户删除实现
-7.4多个用户删除实现
-8.1用户列表分页基本实现
-8.2用户列表查询结果分页实现
-8.3通用日期处理
-8.4整型日期处理
--8.4.2随堂测试
-8.5枚举数据的应用
-9.1登录逻辑实现
--9.1.2随堂测试
-9.2登录界面及流程调试
--9.2.2随堂测试
-9.3管理主界面实现
--9.3.2随堂测试
-9.4授权验证拦截器实现
--9.4.2随堂测试
-9.5拦截器调试
-10.1分类接口实现
-10.2分类添加、编辑实现
-10.3分类树结构实现
-10.4分类删除实现
--10.4.2随堂测试
-11.1内容实体定义
-11.2相关接口定义
-11.3服务接口实现
-11.4内容添加、编辑模板实现
-11.5内容添加、编辑控制器实现
-11.6内容检索页面实现
-11.7内容分类树实现
-12.1修改UEditor相关问题
-12.2整合UEditor到内容编辑界面
-12.3UEditor图片对话框应用
-12.4文件上传问题处理
-13.1网站配置相关类实现
-13.2网站配置界面模板实现
-13.3网站配置调试
-14.1网站首页布局实现
-14.2菜单Vue组件实现
--14.2.2随堂测试
-14.3幻灯片Vue组件实现
-14.4滚动Vue组件实现
--14.4.2随堂测试
-14.5滚动接口实现
-14.6滚动接口调试
-14.7幻灯片接口实现
-15.1首页区域实现
-15.2首页内容脚本实现
-15.3首页完善
-15.4Vue组件放入单文件
-15.5详细页面实现
-16.1网站测试介绍
-16.2功能测试
-16.3打包发布
-16.4部署运行
--16.4.2随堂测试
