漂亮的富文本编辑器WYSIWYG

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

 44246  41  查看评论 (18)
漂亮的富文本编辑器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=""/>



相关插件-通用输入

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

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

不容错过的内嵌代码编辑器高亮代码-JSFIDDLE

如果你的网站需要展示某些源码:html、css、js。那么你可以选择我之前介绍的两款代码高亮插件:SYNTAXHIGHLIGHTER 或者 SNIPPET 不过今天我要给大家介绍另外一款工具,下面我来大致介绍一下这款工具的特点。
  通用输入
 19030  32

漂亮的富文本编辑器WYSIWYG

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

KindEdit文本编辑器

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

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

    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

    回复
    浴夢oO 0
    2015/4/26 18:21:26
    不过外链确实超级慢的 回复
    浴夢oO 0
    2015/4/26 17:40:45
取消回复
    PROMULGATOR

    济公

    四川省成都市