济南网站制作哪家强,深圳网站定制多少钱,自己的品牌怎么推广加盟,个人网站建设一般流程文章目录 #x1f354;使用步骤⭐首先我们需要安装富文本编辑器⭐在script中引入富文本编辑器⭐富文本图片上传接口⭐初始化富文本编辑器⭐调用 初始化富文本编辑器的方法#x1f388;新增#x1f388;编辑#x1f388;保存 ⭐添加按钮⭐实现viewEditor函数#x… 文章目录 使用步骤⭐首先我们需要安装富文本编辑器⭐在script中引入富文本编辑器⭐富文本图片上传接口⭐初始化富文本编辑器⭐调用 初始化富文本编辑器的方法新增编辑保存 ⭐添加按钮⭐实现viewEditor函数实现对话框viewData ⭐在data中初始化2个变量⭐在对话框里面可以加上一个close回掉取消的按钮也加一个cancel⭐cancel函数 效果 富文本编辑器是一种能够编辑和展示富文本内容的工具或程序。与纯文本编辑器不同富文本编辑器可以处理文本的格式、样式、布局等方面使文本更加丰富多样。 富文本编辑器通常提供以下功能
文字样式: 可以设置字体、字号、颜色、粗体、斜体、下划线等文字样式。
段落样式: 可以设置标题、段落对齐方式、缩进等段落样式。
列表: 可以创建有序或无序列表方便排列项目或要点。
插入图片和视频: 可以插入图片和视频文件丰富文本内容。
超链接 可以插入超链接使文本具有跳转功能。
表格 可以插入和编辑表格方便制作数据的展示。
复制粘贴: 可以复制和粘贴文本、图像等内容方便从其他地方导入内容。
撤销和重做: 可以撤销和重做编辑操作方便恢复或修改之前的操作。 富文本编辑器wangeditor官方文档https://www.wangeditor.com/v4 使用步骤
⭐首先我们需要安装富文本编辑器
在控制台输入下面的命令
npm i wangeditor --save⭐在
我们在需要使用富文本编辑器的地方进行引入 下面我们在商品模块进行引入这样商家就可以编辑商品信息上传图片等操作从而方便进行售卖
import E from wangeditor⭐富文本图片上传接口
上传图片
/*** wang-editor编辑器文件上传接口*/
PostMapping(/wang/upload)
public MapString, Object wangEditorUpload(MultipartFile file) {String flag System.currentTimeMillis() ;String fileName file.getOriginalFilename();try {// 文件存储形式时间戳-文件名FileUtil.writeBytes(file.getBytes(), filePath flag - fileName);System.out.println(fileName --上传成功);Thread.sleep(1L);} catch (Exception e) {System.err.println(fileName --文件上传失败);}String http http:// ip : port /files/;MapString, Object resMap new HashMap();// wangEditor上传图片成功后 需要返回的参数resMap.put(errno, 0);resMap.put(data, CollUtil.newArrayList(Dict.create().set(url, http flag - fileName)));return resMap;
}⭐初始化富文本编辑器
let editor
function initWangEditor(content) { setTimeout(() {if (!editor) {editor new E(#editor)editor.config.placeholder 请输入内容editor.config.uploadFileName fileeditor.config.uploadImgServer http://localhost:9090/files/wang/uploadeditor.create()}editor.txt.html(content)
}, 0)
}⭐调用 初始化富文本编辑器的方法
新增
initWangEditor()编辑
initWangEditor(this.form.description || )保存
this.form.description editor.txt.html()上面我们添加了富文本编辑器的操作首先了上传图片的功能但是我们要查看图片应该怎么办呢
我们可以添加一个按钮操作点击按钮后就可以进行查看
⭐添加按钮
表格上面加一个点击查看的按钮
el-table-column propdescription label商品描述template slot-scopescopeel-button typesuccess clickviewEditor(scope.row.description)点击查看/el-button/template
/el-table-column我们点击按钮后会调用viewEditor下面我们来实现viewEditor函数
⭐实现viewEditor函数
viewEditor(content) {this.viewData contentthis.editorVisible true
},实现对话框viewData
el-dialog title商品介绍 :visible.synceditorVisible width50%div v-htmlthis.viewData classw-e-text/div
/el-dialog⭐在data中初始化2个变量
data() {return {editorVisible: false,viewData: null}},⭐在对话框里面可以加上一个close回掉取消的按钮也加一个cancel
el-button clickcancel取 消/el-button⭐cancel函数
cancel() {this.fromVisible falselocation.href /goods
},效果 在技术的道路上我们不断探索、不断前行不断面对挑战、不断突破自我。科技的发展改变着世界而我们作为技术人员也在这个过程中书写着自己的篇章。让我们携手并进共同努力开创美好的未来愿我们在科技的征途上不断奋进创造出更加美好、更加智能的明天
