首页
学习
活动
专区
圈层
工具
发布

summernote富文本编辑器基本使用

summernote富文本编辑器的基本使用 一、简介 Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项...二、下载: 官网下载地址:https://github.com/summernote/summernote 英文API:https://summernote.org/ 这个中文API没有英文的全,最好还是去看英文的...spm=1001.2014.3001.5501 三、基本使用: 1、引入js/css <link href="../.....editor,$editable) { var formData=new FormData(); formData.append('files',files[0]); $.ajax...(一定不要存二进制数据) 四、总结 1、我们在文本编辑器选择照片之后图片就已经传到服务器上面了,所以若点击了取消按钮或者关闭文本编辑器的时候就得删除刚刚上传的图片,这个必须处理,要不服务器传的图片一直无法删除

3.6K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    项目之创建静态资源和设置子模块项目、开发简易上传功能(11)

    >进行了配置,则子模块项目在添加时,不需要指定版本号,直接使用父级项目配置的版号,以便于在父级项目中统一管理依赖的版本!...注意:在父级项目中,添加许多依赖都是不需要指定版本号的,但是,如果将这些依赖配置到中用于指导子模块项目所使用的依赖的版本时,必须显式的指定版本号,否则,子模块项目将不明确需要使用的是哪个版本...使用的富文本编辑Summernote提供了名为callbacks的回调机制,其中,存在名为onImageUpload的回调属性,该属性值是函数,所以,可以自定义函数配置到这个回调属性中,则后续上传图片时...然后,在以上回调中,使用$.ajax()提交异步请求,在处理结果时,创建Image对象,将结果中的图片URL作为Image对象的src属性值,并将整个Image对象(就是一个标签)插入到富文本编辑器中...“年”和“月”分别创建2级子文件夹,上传的图片应该放在“月”的文件夹中; 可以使用UUID作为文件名; 不需要判断原始扩展名,而是直接从原始文件全名中截取即可; 及时打桩,输出关键信息,例如保存文件的文件夹路径

    1.9K30

    项目之关于Summernote的图片处理和基于SpringMVC的文件上传(10)

    page || page < 1) { page = 1; } $.ajax({ url: '/api/v1/questions/my',...关于Summernote的图片处理 使用Summernote富文本编辑器时,当需要处理图片时,会自动将图片转换为Base64编码,当提交问题时,图片的Base64编码会作为“问题正文”的一部分提交到服务器端...Summernote允许在配置Summernote富文本编辑器时自定义回调函数,该函数会在用户填写正文时选择图片会自动调用,则开发人员可以配置这个回调函数,当用户选择图片后,将图片以文件的形式直接上传到服务器端...,当上传成功后,再将图片的路径返回到客户端,插入到Summernote中即可!...在SpringMVC框架中,在控制器端会使用MultipartFile接口类型的参数来接收客户端提交的上传数据,在处理请求的方法中,直接声明这个接口类型的参数即可,参数名应该与客户端提交请求时的名称保持一致

    1.3K20

    腾讯云HAI | 1分钟,1元成本带你快速搭建你的专属DeepSeek,还有多场景体验操作指导

    生效日期:"; // 实际使用时可以替换为: // 1. AJAX请求获取服务器生成的提示 // 2. 使用模板引擎生成内容 // 3....(如Summernote): // $('#noticeContent').summernote('code', result.data.content);...后端方法将上面一步生成的后端方法的架子先复制到后端 公告管理 controller 中,选中代码生成的位置,同时将我们在调用对话API 接口时参考官方文档组建的 curl 调用的请求内容复制到AI 代码助手的对话框中...我们通过输入 文本内容,调用后端 API接口的方法已经成功的返回了 DeepSeek-R1 生成的内容,但是并没有成功赋值到文本框中,这时我们就需要处理一下如何往富文本框中 赋值,参考提交方法中对于富文本框的取值方式...(如Summernote): $('.summernote').summernote('code', result.data); } else { $.modal.alertError

    1K30

    14款web前端常用的富文本编辑器插件

    到时候现找现用那可就费功夫了,毕竟从开发上讲,每个富文本编辑器的用法都是有区别的。 下面是我收集的一些业界比较受欢迎的富文本编辑器,喜欢的朋友、用过的朋友可以一起看看,一起探讨。...,缺点是已经没有更新了。...9、summernote 网址:https://summernote.org/ summernote是一款轻量级的富文本编辑器,比较容易上手,使用体验流畅,支持各种主流浏览器。...summernote开源免费,该项目一直比较活跃,一直都有人在维护。summernote同样依赖于jquery和bootstrap,使用前先引入这两项。...导入文件接口很多,支持word、excel、pdf、ppt直接导入,目前版本不支持代码高亮,不适合纯技术平台使用,适合内容编辑人员使用。

    23.4K51

    最好用的 6 款 Vue 3 富文本编辑器

    我试用了市面上所有主流富文本编辑器,筛掉长期不更新,bug 明显,社区活跃度低,功能单一的编辑器,把最好、最有特点的 6 款编辑器挑出来,分享给大家。...类似于谷歌文档那种效果,所有使用者在同一个页面彼此能看到对方的光标位置和名字,大家同时在线协同编辑。整个协同体验流畅,如果你的应用场景需要多人实时协同编辑,选 tiptap 就对了。 三....CKEditor 5 有详细的文档,从入门到自定义编辑器,再到如何与不同框架集成,写的非常详细。 四....summernote 非常容易上手,体验轻快,甚至还支持快捷键操作。 值得一提的是它对图片的处理,summernote 直接把图片 base64 到内容字段,所有你不用处理图片。...对于某些应用场景需要网页加载速度快或针对网络状态不好的使用场景,这个特点非常非常重要。 八.

    27.7K10

    13个顶级免费所见即所得文本编辑器工具

    [https://xdsoft.net/jodit/] Summernote Summernote是GitHub上的开源编辑器,获得了超过9K星。...[https://summernote.org/] Editor.js Editor.js是一个开源的块状编辑器,它不会像普通的编辑器那样使用标签HTML,将内容以JSON的形式输出,使其更容易管理。...同时如果我们想要添加其他功能,为了优化编辑,MediumEditor还提供了额外的外部实用工具,定期更新。...有很多工具我很喜欢它是自动转换不合适的HTML标签率,自动分析内容时从Word, PDF,显示内容为HTML… [http://wysihtml.com/] ContentTools ContentTools...另外它对程序员在使用程序的过程中遇到的每一个常见问题都有极其详细的实例。但是,它也有一个缺点,当你将其用于商业目的时必须购买许可证。 [https://imperavi.com/redactor/]

    7K00

    项目之提问页面-显示问题、发表问题(8)

    ,避免因为缓存为空导致无法获取到数据 * * @return 缓存的老师的列表 */ List findTeachers(); /** * 获取缓存的老师的列表,由于存在清空缓存机制...tagService; @Autowired private IUserService userService; /** * 缓存锁,凡是写入(添加、移除)缓存的数据时使用这个锁...; log.debug("clear teacher cache ..."); } } } 注意:需要修改原TagServiceImpl中处理缓存数据时使用的锁对象...发表问题-补全页面功能 关于提交请求并处理结果的函数: function () { let content = $('#summernote').val(); console.log("...另行设计计划任务,因为更新“热点问题”缓存的间隔时间应该与“标签”、“老师”的不同,更新缓存的频率应该更高(间隔时间更短)。

    3K20

    JAVA—— AJAX

    一般的网页如果需要更新内容,必需重新加载个页面。 而 AJAX 通过浏览器与服务器进行少量数据交换,就可以使网页实现异步更新。...通过浏览器与服务器进行少量数据交换,就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下,对网页的部 分内容进行局部更新。 同步和异步 同步:服务器端在处理过程中,无法进行其他操作。...type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。 通用方式实现:$.ajax(); url:请求的资源路径。...dataType:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。 success:请求成功时调用的回调函数。 error:请求失败时调用的回调函数。...创建格式 常用方法 2.2、JSON转换工具的介绍 我们除了可以在 JavaScript 中来使用 JSON 以外,在 JAVA 中同样也可以使用 JSON。

    3.7K30

    Django之视图层与模板层

    1 我们除了可以采用form表单向django提交数据外,还可以采用ajax技术,ajax可以提交的数据格式有:1、编码 格式1 2、编码格式2 3、json,当ajax采用POST方法提交前两种格式的数据时...属性值做反序列化操作, 具体的,我们在讲解ajax时再做具体介绍 二.HttpRequest.FILES 如果使用form表单POST上传文件的话,文件数据将包含在HttpRequest.FILES...如果一个响应需要根据请求是否是通过AJAX 发起的,并且你正在使用某种形式的缓存例如Django 的 cache middleware, 你应该使用 vary_on_headers('HTTP_X_REQUESTED_WITH...','movie']} #模板语法取值 {{ user_obj.hobby.0}}#book #句点符取值,如果从字典取值则点key值,如果从列表取值则点索引号 模板语法有两种书写格式: {{}}#变量相关...form表单提交POST请求时,会提交上述随机字符串,服务端在接收到该POST请求时会对比该随机字符 串,对比成功则处理该POST请求,否则拒绝,以此来确定客户端的身份 2.4自定义过滤器和标签 当内置的过滤器或标签无法满足我们的需求时

    10.7K10

    史上最详细Ajax学习笔记

    一般的网页如果需要更新内容,必需重新加载个页面。 而 AJAX 通过浏览器与服务器进行少量数据交换,就可以使网页实现异步更新。...也就是在不重新加载整个页 面的情况下,对网页的部分内容进行局部更新。 ​...通过浏览器与服务器进行少量数据交换,就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下,对网页的部 分内容进行局部更新。 同步和异步 同步:服务器端在处理过程中,无法进行其他操作。...type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。 通用方式实现:$.ajax(); url:请求的资源路径。...2.2、JSON转换工具的介绍 我们除了可以在 JavaScript 中来使用 JSON 以外,在 JAVA 中同样也可以使用 JSON。

    2.4K10

    Ajax发送PUTDELETE请求时出现错误的原因及解决方案

    (异步请求)的时候,为什么使用GET和POST方式发送可以接收到数据,而使用DELETE和PUT方法无法发送请求的问题出现原因,当然还是要给出解决办法的....一般情况下,我们使用Rest风格的URI时,也就是使用HTTP协议请求方式的动词,来表示对资源的操作(GET(查询),POST(新增),PUT(修改),DELETE(删除)),常常会出现这个问题....使用Ajax发送PUT(修改)请求 我们测试使用的是一个更新方法,利用主键更新员工的信息,使用特定的PUT请求....使用浏览器F12查看network时,发现数据已经被封装到了实体信息中,问题究竟是在哪呢? 出现问题的原因 这个问题其实是Tomcat的问题....实际上,Tomcat把请求的数据(实体信息中的数据)封装成一个Map(键值对形式),request.getParameter(“”)就从map中取值,而SpringMVC会把每个属性的值调用getParameter

    3.4K10

    JavaSSM框架面试,附答案!!!

    Ibatis:2010年,apache的Ibatis框架停止更新,并移交给了google团队,同时更名为MyBatis。从2010年后Ibatis在没更新过,彻底变成了一个孤儿框架。...注解使用情况:Sql语句简单时 xml绑定使用情况:xml绑定 (@RequestMap用来绑定xml文件) 4、Mybatis在核心处理类叫什么?...${}:简单字符串替换,把${}直接替换成变量的值,不做任何转换,这种是取值以后再去编译SQL语句。 #{}:预编译处理,sql中的#{}替换成?...,补全预编译语句,有效的防止Sql语句注入,这种取值是编译好SQL语句再取值。 总结:一般用#{}来进行列的代替 10、获取上一次自动生成的主键值?...四、结语 前面如有不正确的地方还希望大家多多指教,希望和志同道合的朋友一起学习,一起进步,先更新到这里,下次继续补充。

    1K31

    9月腾讯、百度、阿里高频的29道SSM框架面试题解析

    转发:return:“hello” 重定向 :return:“redirect:hello.jsp” 7、SpringMvc和Ajax之间的相互调用?...Ibatis:2010年,apache的Ibatis框架停止更新,并移交给了google团队,同时更名为MyBatis。从2010年后Ibatis在没更新过,彻底变成了一个孤儿框架。...注解使用情况:Sql语句简单时 xml绑定使用情况:xml绑定 (@RequestMap用来绑定xml文件) 4、Mybatis在核心处理类叫什么?...${}:简单字符串替换,把${}直接替换成变量的值,不做任何转换,这种是取值以后再去编译SQL语句。 #{}:预编译处理,sql中的#{}替换成?...,补全预编译语句,有效的防止Sql语句注入,这种取值是编译好SQL语句再取值。 总结:一般用#{}来进行列的代替 欢迎大家关注我的公种浩【程序员追风】,文章都会在里面更新,整理的资料也会放在里面。

    99800
    领券