html5富文本编辑器图片,漂亮的富文本编辑器WYSIWYG

柔光的暖阳◎ 2022-10-06 07:57 332阅读 0赞

![5aaaddac4dbb2307489796843d65bb62.png][]

![94a6dc5feabd4193c6b752bf51a273a1.png][]

插件描述： 接下来我要为大家介绍一款好看的富文本编辑器 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=""/>

[5aaaddac4dbb2307489796843d65bb62.png]: /images/20221005/1c1a34cce12b47c092b8795efc57fb45.png
[94a6dc5feabd4193c6b752bf51a273a1.png]: /images/20221005/d166ed84a71c4b63a92651af7ee43692.png

发表评论取消回复

表情：

评论列表（有 0 条评论，332人围观）

还没有评论，来说两句吧...

相关阅读

相关富文本编辑器KindEditor

目录下载引入前端使用KindEditor 后端处理表单 ajax K

蔚落/ 2022年12月11日 06:25/ 0 赞/ 451 阅读

相关富文本编辑器wangEditor

目录下载引入基本使用说明 wangEditor是一个轻量级的富文本编辑器，相比KindE

向右看齐/ 2022年12月11日 06:25/ 0 赞/ 738 阅读

相关 layui 富文本编辑器

html部分 <textarea id="demo" lay-verify="content" name="explain" class="layui-textare

忘是亡心i/ 2022年11月05日 06:30/ 0 赞/ 458 阅读

相关 html5富文本编辑器图片,漂亮的富文本编辑器WYSIWYG

![5aaaddac4dbb2307489796843d65bb62.png][] ![94a6dc5feabd4193c6b752bf51a273a1.png][] 插件

柔光的暖阳◎/ 2022年10月06日 07:57/ 0 赞/ 333 阅读

相关 summernote富文本编辑器

最近要做一个发布文章页面，在富文本编辑器中选中了summernote 比起ckeditor，summernote要简单很多，简单到只需引入css和js就可以了。关于c

淩亂°似流年/ 2022年06月16日 00:08/ 0 赞/ 390 阅读

相关 web富文本编辑器

summernote 官网：[https://summernote.org/][https_summernote.org] 教程：[https://www.cnblo

缺乏、安全感/ 2022年05月16日 05:29/ 0 赞/ 320 阅读

相关富文本编辑器

（1）[UEditor][] （2）[kindEditor][] （3）[summernote][] 另本篇文章有更多富文本编辑器推荐： [https://www

你的名字/ 2022年03月19日 05:52/ 0 赞/ 442 阅读

相关富文本编辑器summerNote

载入富文本： $('.summernote').summernote({ height: 220, tabsize: 2, lang: 'zh

客官°小女子只卖身不卖艺/ 2021年12月22日 14:25/ 0 赞/ 414 阅读

相关 KindEditor富文本编辑器

KindEditor简单使用 KindEditor 引入相关JS 简单使用 KindEditor KindEditor是一套开源的HTML可视化

水深无声/ 2021年10月06日 02:50/ 0 赞/ 524 阅读

相关 Django富文本编辑器

Django富文本编辑器在django模型中，如果将商品详情字段类型设置为TextFiled(),当将该模型加入到后台管理的时候，只会呈现出普通的文本框。但是，我们实际

清疚/ 2021年09月17日 16:16/ 0 赞/ 567 阅读