当前课程知识点：软件开发实训--动态网站开发 > 12 UEditor富文本编辑器 > 12.3UEditor图片对话框应用 > 12.3.1UEditor图片对话框应用
同学你好
欢迎回到软件开发实训课堂
上节课我们已经将UEditor整合到我们
的内容表单里了
这节课我们来看一下
对于UEditor的图片对话框
该如何使用
同学
你好
欢迎回到软件开发实训课堂
在上一节课咱们把文本编辑器UEditor集成到了
我们的系统里边
那么在我们的内容编辑框里面
我们也使用了编辑器
但实际上编辑器还可以单独的使用它某些
对话框
比如说我们在内容编辑的时候需要一个标题图片
这节课我们就来看一下这个标题图片如何通过
UEditor编辑器来实现图片的访问
首先我们打开Editor content这个模板
找到标题图片的位置
将我们原来的file控件给它换成
普通的文本框控件
只要把type换成text就可以了
然后我们可以插入一个图片
把图片的路径给它绑定到数据库的数据
然后我们来写一个按钮
已打开我们的对话框
我们就写个浏览
就可以了
我们给它一个ID upimage
现在只要有图片上传
这里边我们就会填充图片的内容
并且将图片显示出来
需要更改时
我们只需要点击浏览按钮来打开我们的对话框
就可以了
那么如何来打开对话框
好
我们来看一下
在我们下边添加我们相关的代码
首先我们要给按钮
增加一个事件
这个是点击事件
click
当点击时执行这个函数
我们得到对话框对象
editor
getDialog
它的关键字是insert
image
然后第Dlog.open
写到这里
我们来看一下对话框是否可以打开
刷新界面
可以看到已经有一个浏览按钮了
来点击浏览
对话框也被打开了
我们可以拖动一个图片到这里来
然后上传上去
这里边有一个提示
后端的配置项没有正常加载
上传插件不能正常使用
这说明我们后端的配置没有配置正确
我们先来看一下这块
我们找一张图片来给他
我们直接写
images
icon
editor.png
这个图片就已经有效果出现了
我们直接点击OK
这是我们对编辑
但是点完以后没有反应
没有把图片的内容放到这里来
没有放进来
是因为我们并没有去给它赋值
那么为了给赋值
我们需要做一件事情
就是当我们打开对话框时
我们需要定义一个自定义的数据
来标识是我们打开了对话框
是我们这个方法打开的对话框
做一个这样的一个定义
标志当前按钮打开了对话框
我们可以把它如果说多个的话
你光用是不对的
我们可以给它一个字符串来标识
这样我们每次打开对话框时就很准确的找到它
那么这个标识是用ID标签ID实现
然后我们怎么做呢
Ueditor它提供了一个监听事件的方式
来执行一些命令
比如说我们增加事件
addListener
增加一个什么事件呢
before
Execx command
就是在执行命名之前
这样一个事件
我们要捕获事件触发他以后
执行我们自己的函数
好
给他三个参数
现在说如果命令是insert image
insert image这个对话框
那么就执行一个动作
井号加上ediitor这块
不是Dlog
因为Dlog上面就找不着了
我们需要用editor
editor.mydlg
把ID拿过来
给它赋值
这个值是C这个参数的一零第一个元素的第零个元素
它的SRC属性值
这样就赋给他了
赋完之后
下一次对话框就不再执行这个动作了
我们把它清理掉
可以看一下是否能够正确执行
刷新界面
打开控制台
清空控制台
我们来看一下
对话框打开输入地址
images可以看到控制台已经有错误输出了
是因为我们每输入一个字符
他就会去找图片icon-editor png
找到后
图片已经显示出来了
然后我们确定
并没有执行我们的动作
我们看一下它是否进入到这里来了
首先console
C把这个数据输出来
清空控制台我们点击确定
得到了数据
得到的数据
看一下
很明显
我们执行了我们相关的动作
也得到了src个数据
src这个图片也没问题
拿到了
可是我们并没有插入到输入框
原因是我们是把它放到了按钮上去了
这是不对的
这里我们把输入框的ID给他
我们来看一下输入框的ID
Timg
好
重新来看
修改过来后刷新
界面
我们重新去输入图片
清理掉日志
然后我们点确定
看一下图片已经进来了
而且在这里也出现了
也就是说它既插入到我们的内容框了
也输入到编辑框了
那么为了解决这个问题
咱们需要把这个编辑器重新实例化一个
我们来做一个隐藏的编辑器
首先用script标签
这样它不会显示在界面上
script的标签的类型是text
plain
然后我们定义编辑器
editor
我们把上面叫做1getEditor
images
browser is Show:false
这样的编辑器他就不会显示出来
然后也可以解决我们的插入图片的需求
好
我们刷新界面
点击浏览
输入图片
图片的路径已经进入到我们的框中
并且不影响下面的编辑器
这样就达到了我们的效果
但是我们上传的图片并没有显示出来
为了让它显示我们需要把image
给他加一个ID
或者class都可以
来唯一标识它
我们给它取这样一个
ID在这里给它赋值
让图片显示出来
我们重新刷新界面来输入图片路径
我们不能直接给赋值
需要脚本来变他
这样才可以
刷新界面
好
这样图片它就出现了
就达到了我们需要的效果
好
有关图片对话框以及图片的上传就讲到这里
我们下节课再见
-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随堂测试
