summernote, 超级简单所见即所得编辑器

分享于 

4分钟阅读

GitHub

  繁體 雙語
Super simple WYSIWYG Editor on Bootstrap
  • 源代码名称:summernote
  • 源代码网址:http://www.github.com/summernote/summernote
  • summernote源代码文档
  • summernote源代码下载
  • Git URL:
    git://www.github.com/summernote/summernote.git
    Git Clone代码到本地:
    git clone http://www.github.com/summernote/summernote
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/summernote/summernote
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Summernote

    超级简单所见即所得编辑器。

    Build Statusnpm versionDependency StatusCoverage Status

    Sauce Test Status

    Summernote

    Summernote是一个JavaScript库,帮助你在线创建所见即所得的编辑器。

    主页:http://summernote.org

    为什么 Summernote?

    Summernote有一些特殊特性:

    • 粘贴剪贴板中的图像
    • 使用base64编码直接在字段内容中保存图像,所以不需要实现图像处理。
    • 简单用户界面
    • 交互式所见即所得编辑
    • 服务器的方便集成

    插件安装和依赖项

    Summernote使用开源库:jQueryBootstrap。

    对于 Meteor,只需运行 meteor add summernote:summernote。 更多信息在 Meteor 自述文件中。

    也有一个适应React: 响应 summernote。

    对于其他/无框架:

    1包含 js/css

    在HTML的<head> 标记中包含以下代码:

    <!-- include libraries(jQuery, bootstrap) --><scripttype="text/javascript"src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <linkrel="stylesheet"href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css"/>
    <scripttype="text/javascript"src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script><!-- include summernote css/js--><linkhref="summernote.css"rel="stylesheet">
    <scriptsrc="summernote.js"></script>
    2.目标元素

    然后在 body 标签中放置一个 div 标记。 这里元素将被summernote编辑器替换。

    <divid="summernote">Hello Summernote</div>
    3。summernote

    最后,在DOM准备好后运行这里脚本:

    $(document).ready(function() {
     $('#summernote').summernote();
    });

    有关更多示例,请访问主页页面。

    API

    code - 获取编辑器中文本基础的HTML源代码:

    var html =$('#summernote').summernote('code');

    有关API的更多细节,请参考文档

    警告- 代码注入

    代码视图允许用户输入脚本内容。 确保筛选/对服务器服务器上的HTML进行过滤。 否则,攻击者可以向客户端注入任意的JavaScript代码。

    用于贡献

    https://github.com/summernote/summernote/blob/develop/CONTRIBUTING.md

    联系人

    许可证

    Summernote可以在MIT许可证下自由分发。


    SUP  EDI  Super  Wysiwyg  
    相关文章