漂亮的富文本编辑器WYSIWYG

所属分类:输入-通用输入

 50805  44  查看评论 (20)
漂亮的富文本编辑器WYSIWYG ie兼容10

接下来我要为大家介绍一款好看的富文本编辑器 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文件。在此我想声明一下:官网讲的只是一个大致的使用,而以下的文件必须要引入才会生效,所以本站是注重实际运用的,这些细节是不能忽略的。

 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://mindmup.s3.amazonaws.com/lib/jquery.hotkeys.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<link href="index.css" rel="stylesheet">
<script src="bootstrap-wysiwyg.js"></script>


2、加入一段js代码,由于代码过多,在这里就不列出来了,本站已经将源码予以整理,请参照 demo.html 的源代码
.........
3、在body标签中加入以下格式的html代码,在此需要注意的是,该编辑器并未封装,而是直接把代码写在了html页面中。整个编辑器可以分为两部分,顶部工具栏和文本编辑框:
1)顶部工具栏 : 是一个包含多个 div.btn-group 的 div.btn-toolbar。每一个工具按钮即是一个 div.btn-group 。在每个 div.btn-group 中我们可以自己配置提示文字而让其显示中文。

<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor"> 
    <div class="btn-group">
    </div>
..........
    <div class="btn-group">
    </div>
</div>	


在这里还有一个 html5 的语音输入工具。代码如下:

 <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">


2)内容文本框: div#editor

<div id="editor">
    内容
</div>


以下是 demo.html 结构在VS中的显示
alt=""/>



相关插件-通用输入

jQuery Textarea全屏插件Textarea Fullscreen

Textarea Fullscreen是一个jquery插件大小只有5K,可以将textarea设置为全屏模式
  通用输入
 10704  14

CSS3 过渡特性创建信封效果的联系表单

CSS3 过渡特性创建信封效果的联系表单
  通用输入
 9156  54

漂亮的富文本编辑器WYSIWYG

接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg 。先来看看官方对这款编辑器的相关功能描述吧。
  通用输入
 50805  44

KindEdit文本编辑器

一种小型轻便的编辑器 很方便实用
  通用输入
 20414  87

讨论这个项目(20)回答他人问题或分享插件使用方法奖励jQ币

    Hetais 0
    2017/3/25 11:43:04
    请问,如何把编辑器的<div>,变成<textarea>,我后台用的CI,只能根据 form表单里的name值来取。div传不过来值。 回复
    阿海绵阿宝宝 0
    2017/3/17 14:46:11
    Just Do It 0
    2016/11/26 10:11:35
    IE9都不支持。。不敢用 回复
    慢慢消失的汪傻逼 0
    2016/11/8 15:11:14
    这个 插图之后~把图片解析成代码了.. 什么鬼... 回复
    I_T_T_I 0
    2016/11/1 15:11:35
    在线加载太慢,有没有源文件,没什么用 回复
    心欣人类 0
    2016/10/27 19:10:00
    怎么显示正常的格式啊,全显示的HTML 代码。急急急!!!!!
        心欣人类0
        2016/10/27 19:10:02
        赋值的时候,全显示的HTML 代码。
    回复
    ?洳呲仰望。 ̄ 0
    2016/8/19 14:08:28
    有没有人啊,在线等
        areyouOk0
        2016/8/19 16:08:07
        浏览器里f12看报的什么错啊,你这问题的别人怎么回答你。
    回复
    ?洳呲仰望。 ̄ 0
    2016/8/19 14:08:01
    为什么不能编辑呢 回复
    of 0
    2015/11/4 16:11:19

    输入框中的文字可以增删操作吗?按back或者其他键只是样式的变化

        只有我是water0
        2015/11/23 15:11:04

        我也是

    回复
    秋月枫铃_307 0
    2015/8/22 10:08:37

    在哪里看demo.html

    回复
取消回复