有关summernote 使用心得(图片上传)

最新推荐文章于 2021-11-24 16:02:09 发布
VIP文章 最新推荐文章于 2021-11-24 16:02:09 发布
阅读量2.3k 收藏 3
点赞数 2
文章标签： 富本编辑器 js jq summernote
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nei_Ge/article/details/83310005
版权

在做 资讯网站 所以需要一款编辑器插件 找了好多 不是 功能繁杂 多年未更新 就是会将网站的图片空间展示出来 ,或者图片大小不能随意更改的问题。

最终找到一款就是 summernote编辑器 这里是官网  →  我是官网

优点有

  1. 简约 大部分功能齐全 却又不显得繁琐复杂
  2. 图片大小可以在文章内部可视化修改大小
  3. 允许自定义按钮 且功能可以随意关闭开启（这个功能大部分都有）功能按钮布局可以随意更改
  4. 支持中文￣□￣｜｜

 

缺点嘛

说是缺点也不算就是他的上传图片是用base64 转换的图片

大致是这样的↓↓↓↓↓↓↓↓↓↓↓

一张图片的地址 就有好几兆  存进数据库 结果可想而知，所以 图片上传就需要 自己写了 好在 官方留了接

最低0.47元/天 解锁文章
Nei_Ge
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个简单不报错的summernote 图片上传案例
11-22
一个比较完整的summernote上传图片的案例，没有后台（上传图片网上案例太多），只有前端js.修正了网上提供的，但是有bug的代码。 这个例子，js保证不报错。亲测可用 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html > <html> <head> [removed][removed] <link href="//netdna.bootstrap
Summernote实现图片上传功能的简单方法
09-02
下面小编就为大家带来一篇Summernote实现图片上传功能的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
富文本summernote.js 图片居中
09-26
本身不具有图片居中显示，修改js之后使得图片可以居中显示
jquery 富文本编辑器
10-06
jquery框架的富文本编辑器，可轻松设置字体样式，上传图片等，用于文章发布系统
summernote图片上传服务器源码.zip
07-20
使用summernote编辑器实现图片上传到服务器，上传成功返回虚拟映射地址，完整案例源码
Summernote使用入门
极客神殿
10-02 2483
Create.cshtml @model SN.Models.ProductModel @{ ViewBag.Title = "产品立项"; Layout = "../Shared/_LayoutAdminLTE.cshtml"; } <head> <!--summernote--> <link href="~/Content/summernote/summernote.css" rel="stylesheet" /> <
summernote 上传图片、删除图片
sincy09的博客
09-26 4423
summernote 上传图片 summernote官网的API和函数说明： https://summernote.org/deep-dive/ summernote 默认插入图片为base64数据 重写onImageUpload函数 在复制图片和插入图片时，函数生效。 $('.summernote').summernote({ callbacks: { ...
summernote中关于上传图片的问题（解决）
小兔的萝卜的博客
05-28 6767
背景 最近在写学校的数据结构平台重构，有一块地方要用到summernote编辑器，而且编辑框里面是要插入图片的，summernote默认插入图片后会转为base64数据，存到数据库的话对数据库负担很大，试过直接存图片，普通的text字段顶多存两张图片，因为text字段长度是64kb，而且学长给我的需求是把编辑框里的图片存到服务器。 过程 第一次接触summernote嘛当然是去百度搜索怎么玩了，网...
summernote中文API
热门推荐
Joe__sir的博客
07-22 2万+
summernote是一款Jquery文本编辑器的插件， 转自：http://www.adki.me/summernote-chinese-api-documentation-i.html 初始化选项 自定义初始化各种选项和模块。 自定义工具栏 Summernote允许您自定义的工具栏。 $('#summernote').summernote({toolbar:[// [gro...
summernote富文本框整合图片上传和删除
07-17
summernote富文本框整合图片上传和删除,后台使用的阿里云oss文件服务器，此文件为前端代码
【若依(ruoyi)】summernote 控件 modal/dialog/对话框 被遮挡
sayyy的专栏
11-24 1138
summernote 控件 modal/dialog/对话框 被遮挡 错误 modal 的高度错误，正常情况下，在测试机上应该高度在505左右，被遮挡后高度只有50。 解决办法1：强制设置高度 <style type="text/css"> .modal { height: 600px; } </style> 解决办法2：显示溢出部分 <style type="text/css"> .modal {
HTML中嵌套summernote编辑器
weixin_44313745的博客
07-31 479
summernote 编辑器 灵活、好用、易安装 只需要加入summernote.css和summernote.js就可以实现简单的编辑器；配合bootstrap更加客观 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Summern...
thinkphp3.2.3使用summernote
Stonelalala的博客
05-24 4187
summernote是一款基于bootstrap的富文本编辑器，大小只有400k，包含了常用的功能，支持图片上传，添加视频地址。等等。因为百度的ueditor、umeditor相对比较大，wangeditor在不支持移动端最后找到了这款简单、功能又挺齐全的富文本编辑器，接下来讲讲怎么在tp框架中引入这个文本编辑器。1、下载summernore，地址：summernote官网，summernote只...
富文本编辑器summernote的基本使用（自定义行高字体属性）
sky_sunshine_x的博客
07-10 7482
1.官网：https://summernote.org/deep-dive/#custom-fontnames2.
BootStrap富文本编辑器Summernote
m0_61364397的博客
11-06 2693
页面只需要给一个textarea标签，之后用JS渲染富文本编辑器，可以在textarea标签中设置默认内容。 通过JS渲染及设置富文本编辑器的属性。 $(function() { $(’#summernote’).summernote({ height: 400, //设置高度 toolbar: [ //自定义工具栏 [‘style’,[‘style’]], [‘font’,[‘bold’,‘underline’,‘clear’]], [‘fontname’,[‘fontname’]],
summernote 探索(官方文档)
极客神殿
11-29 4005
初始化选项 自定义初始化各种选项和模块。 自定义toolbar, popover Summernote允许您自定义的工具栏。 $('#summernote').summernote({ toolbar: [ // [groupName, [list of button]] ['style', ['bold', 'italic', 'underline', 'clear']], ['font', ['strikethrough', 'superscript', 'subscrip
CKEditor富文本编辑器踩坑-上传视频后无法删除视频和获取鼠标编辑状态光标
qq_40896145的博客
05-31 1399
问题描述 在CKEditor富文本编辑器中成功上传的视频，如果视频前后没有任何内容，视频无法使用退格键正常删除并且无法获取鼠标编辑状态光标。 修复办法 在创建的Video标签后添加一个换行标签即可 代码如下 <div class="ck-media__wrapper"><video class="video-js"><source src="${ item.attachUrl}" style=" width: 100%;height: 100%; type="video/mp4
Summernote在线编辑器的使用，这也是个插件
肖肖肖丽珠的博客
05-27 3738
下载地址：http://www.oschina.net/p/summernote 它是一款基于bootstrape的插件，所以还称之为： 基于jquery的bootstrap在线文本编辑器插件Summernote 引入          //下面是bootstrape的cs和js。其中font-awesome是有些显示时候看到的小图标。并且要注意一定要加上font-awe
summernote上传图片
最新发布
10-18
可以使用 summernote 的图片上传功能来实现上传图片的功能。具体步骤如下： 1. 在 HTML 文件中引入 summernote 的 CSS 和 JS 文件。 2. 在 HTML 文件中添加一个 textarea 元素，并将其转换为 summernote 编辑器。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值