1、当系统中存在编辑功能时，需要将数据库中数据回显到页面，因此采用了最一般的方法，通过隐藏的input标签存贮，在通过CkEditor5中的setData方法将数据赋值到富文本框中

<textarea id="pc" name="pc" th:value="${pdSo.pc}" style="display: none;"></textarea>
<input id="pc1" name="pc1" th:value="${pdSo.pc}" class="form-control" type="text" style="display: none;">

2、实现CKEditor5的图片上传

通过CKEditor的ckfinder属性，定义自己的上传请求地址，网上说有三种上传方式，我只实现了一种

后台通过MultipartFile来接收前台的参数，但是参数名称为upload，可以在页面上抓包可以看到，这里尤其要注意

请求成功后要返回json字符串，要包括uploaded，url两个属性，采用map方式，回传到页面即可，url为存储地址

CKEditor5 使用第二天 获取回传数据，图片上传的更多相关文章

  1. [py][mx]django添加后台课程机构页数据-图片上传设置

    分析下课程页前台部分 机构类别-目前机构库中没有这个字段,需要追加下 所在地区 xadmin可以手动添加 课程机构 涉及到机构封面图, 即图片上传media设置, 也需要在xadmin里手动添加几条 ...

  2. KindEditor图片上传到七牛云

    自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEdito ...

  3. php canvas 前端JS压缩，获取图片二进制流数据并上传

    <?php if(isset($_GET['upload']) && $_GET['upload'] == 'img'){ //二进制数据流 $data = file_get_c ...

  4. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  5. JAVAEE——SpringMVC第二天：高级参数绑定、@RequestMapping、方法返回值、异常处理、图片上传、Json交互、实现RESTful、拦截器

    1. 课前回顾 https://www.cnblogs.com/xieyupeng/p/9093661.html 2. 课程计划 1.高级参数绑定 a) 数组类型的参数绑定 b) List类型的绑定 ...

  6. html,图片上传预览，input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

  7. ios中摄像头/相册获取图片压缩图片上传服务器方法总结

    本文章介绍了关于ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结,有需要了解的同学可以参考一下下.     这几天在搞iphone上面一个应用的开发,里面有需要摄像头/相册编程和图片上传的问 ...

  8. layui图片上传之后后台如何修改图片的后缀名以及返回数据给前台

    const pathLib = require('path');//引入node.js下的一个path模块的方法,主要处理文件的名字等工作,具体可看文档 const fs = require(''fs ...

  9. SpringMVC入门（二）—— 参数的传递、Controller方法返回值、json数据交互、异常处理、图片上传、拦截器

    一.参数的传递 1.简单的参数传递 /* @RequestParam用法:入参名字与方法名参数名不一致时使用{ * value:传入的参数名,required:是否必填,defaultValue:默认 ...

随机推荐

  1. Android BGradualProgress 多种渐变、直角or弧角、进度条、加载条

    可实现多种渐变.直角or弧角.进度条.加载条 (Various gradient, right or arc angle, progress bar and loading bar can be re ...

  2. 软件开发工具（第8章：Eclipse工作台)

    一.初识Eclipse工作台 Eclipse 工作台(Workbench)是一个高级用户界面框架,它为用 户提供了一个整体结构和可扩展的用户界面. 什么是工作空间(记忆) 工作空间(Workspace ...

  3. jquery-获取button的值

    <button id="test" name="test_name" value="test_value"></butto ...

  4. SpringCloud服务过滤filter

    一.目录展示 二.application.yml配置文件 三.MyZuulFilter package com.zn.filter; import com.netflix.zuul.ZuulFilte ...

  5. DataGridView使用BindingNavigator实现简单分页功能

    接上一篇<DataGridView使用自定义控件实现简单分页功能>,本篇使用BindingNavigator来实现简单分页功能.其实也只是借用了一个BindingNavigator空壳, ...

  6. WPF数据可视化-趋势图

    环境: 系统: Window 7以上: 工具:VS2013及以上. 研发语言及工程: C# WPF 应用程序 效果: ​ ​ 简介: 不需要调用第三方Dll, 仅仅在WPF中使用贝塞尔曲线,不到500 ...

  7. MyBatis框架之第一篇

    MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis.201 ...

  8. JavaScript 自定义html元素鼠标右键菜单

    自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...

  9. iOS-关于自定义分段选择器的一些小事（Segmented）

    系统自带的分段选择就是 UISegmentedControl ,也有一些大佬自定义的 Segmented ,比如Git上的 HMSegmentedControl ,我以前最初的项目中,也有用到过,如果 ...

  10. TCP 三次握手与四次挥手

    TCP是什么      TCP(Transmission Control Protocol 传输控制协议)是一种面向连接(连接导向)的.可靠的. 基于IP的传输层协议.       TCP有6种标示: ...