html5富文本编辑器图片,漂亮的富文本编辑器WYSIWYG
插件描述: 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg 。先来看看官方对这款编辑器的相关功能描述吧。
接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg 。先来看看官方对这款编辑器的相关功能描述吧。
1、在Mac和Wndows平台上能够自动针对常用操作绑定标准热键
2、可以通过拖拽插入图片;支持图片上传(也可以获取移动设备上的照片)
3、语音识别输入(仅限Chrome浏览器)
4、允许自定义工具条;不生成额外标签;支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性
5、没有强制规定的样式一切都由你做主
6、依赖浏览器的标准特性,没有非标准代码;工具条和键盘功能均可定制,并且能够执行任何浏览器支持的命令
7、不会自己创建一个单独的frame、备份文本区等本编辑器尽量保持简单,并仅仅运行在一个DIV内
8、(可选)清除尾部空格;清除空的div和span
9、必须运行在现代浏览器上(在Chrome 26、Firefox 19、Safari 6上经过测试,用户报告称可以在IE10上工作)
10、支持移动设备浏览器(在IOS 6 Ipad/Iphone 和 Android 4.1.1 Chrome上测试过)
注意:wysiwyg 和 wysihtml5 是两款不同的编辑器。 wysiwyg 是对 wysihtml5 的一种加强版,比较相似。所以大家可以根据自己的需要去使用。
wysiwyg 官网:http://mindmup.github.io/bootstrap-wysiwyg/
wysiwyg 中文网站:http://www.bootcss.com/p/bootstrap-wysiwyg//
wysihtml5 官网:http://jhollingworth.github.io/bootstrap-wysihtml5/
由于 wysiwyg 是对 wysihtml5 的加强版,那么我就来讲一下 wysiwyg 的用法,wysihtml5类似。
使用步骤
1、引入以下的js和css文件。在此我想声明一下:官网讲的只是一个大致的使用,而以下的文件必须要引入才会生效,所以本站是注重实际运用的,这些细节是不能忽略的。
2、加入一段js代码,由于代码过多,在这里就不列出来了,本站已经将源码予以整理,请参照 demo.html 的源代码
.........
3、在body标签中加入以下格式的html代码,在此需要注意的是,该编辑器并未封装,而是直接把代码写在了html页面中。整个编辑器可以分为两部分,顶部工具栏和文本编辑框:
1)顶部工具栏 : 是一个包含多个 div.btn-group 的 div.btn-toolbar。每一个工具按钮即是一个 div.btn-group 。在每个 div.btn-group 中我们可以自己配置提示文字而让其显示中文。
..........
在这里还有一个 html5 的语音输入工具。代码如下:
2)内容文本框: div#editor
内容
以下是 demo.html 结构在VS中的显示
alt=""/>
html5富文本编辑器图片,漂亮的富文本编辑器WYSIWYG相关推荐
- hp-socket 文本跟图片同时发送_文本、截图和应用,这样「包装」一秒变美观
社交网络被发明出来的一个重要目的就是分享,无论是所见所闻还是喜怒哀乐,亦或是脑海中突然迸发出的一段妙言,某个转瞬即逝的精彩瞬间,一篇深度好文,一个在少数派看到的绝赞应用-- 分享内容丰富多彩,相比之下 ...
- 两文本一图片android,Android富文本编辑器(二):图文混排以及图片上传处理
对于一个富文本编辑器来说,图文混排是最基本的功能.而从上一篇文章中我们知道图文混排需要使用ImageSpan.下面这段代码摘自我的RichEditText源码: /** * 添加图片 * @param ...
- java富文本传图片_使用富文本编辑器上传图片实例详解
富文本编辑器上传图片 一.导入kindeditor的js 二.将kindeditor与一个文本域textarea进行关联,即用textarea初始化一个kindeditor对象 itemaddedit ...
- 鼠标悬停显示图片html5,JavaScript 鼠标悬停图片,显示隐藏文本
Unsplash 当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间 HTML 结构如下 世界上最 ...
- 百度编辑器图片上传 java_百度编辑器粘贴图片自动上传到服务器(Java版)
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无 ...
- 小程序展示后台编辑好的富文本[文字图片视频等]
小程序在开发的过程中都会遇到小程序官方给了富文本编辑器editor组件,但是只能在小程序端编辑,然后保存到后台的数据库中,但是一般都是网站后台编辑好,然后在小程序端展示后台编辑好的富文本信息.这样就可 ...
- android富文本图片自适应,Android 图片混排富文本编辑器控件
一.一个Android 图片混排富文本编辑器控件(仿兴趣部落) 1.1 图片混排富文本控件 是一种图片和文字混合在一起的控件,文本之间可以插入图片,类似于网页的排版样式. 1.2 该控件主要是仿兴趣部 ...
- Android 图片混排富文本编辑器控件
概述 一个Android 图片混排富文本编辑器控件(仿兴趣部落) 详细 代码下载:http://www.demodashi.com/demo/12032.html 一.一个Android 图片混排富文 ...
- WangEditor富文本编辑器图片上传踩坑之路
最近由于业务需求,需要用到富文本编辑器,找寻了好久,起初想使用百度的ueditor,但在使用的过程中实在是遇到了太多的坑,于是另外锁定了一款富文本编辑器--wangEditor.这是一款轻量级的富文本 ...
最新文章
- 平凡的世界,有感而发
- 方差分析的MATLAB实现(单因子)
- 深入出不来nodejs源码-编译启动
- 关于 href=javascript:; 到底做了什么
- 串口通信模块4:串口操作自定义类(1)
- .NET Core开源任务调度平台ScheduleMaster上新了
- java join()用法_四种联系(join)的区别及用法
- Linux多线程实践(7) --多线程排序对比
- python动态图形_利用matplotlib实现根据实时数据动态更新图形
- 洛谷——[USACO07OCT]Bessie‘s Secret Pasture S
- sql查询数据库所有表(select * from sysobjects )
- java时钟代码_JAVA实现时钟
- cpu缓冲区大小怎么设置_FL Studio中音频ASIO4ALL的设置
- C语言图形化界面——含图形、按钮、鼠标、进度条等部件制作(带详细代码、讲解及注释)
- 迅为i.MX6Q开发板-红外 hs0038 测试
- JSP项目进度管理系统myeclipse开发mysql数据库web结构java编程
- 解决MySQL报错[Err] 1093 - You can't specify target...
- html5文字云在线制作,tagul – 优秀的中文文字云标签云生成器工具
- Java算法:牛客网哔哩哔哩bilibili笔试真题算法Java版1-14题
- 修改360抢票的刷新频率+突破8车次限制