Skip to content
BranchesTags

Repository files navigation

##CN

summernote

超级简单的WYSIWYG编辑器。

Build Status npm version Dependency Status Coverage Status Gratipay

Sauce Test Status

summernote

summernote是一个JavaScript库，可以帮助你创建的所见即所得编辑在线。

首页:http：／／summernote.org

为什么summernote？

summernote具有一些特殊的功能:

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

安装和依赖

summernote使用开源库：jQuery，自举，象形异体字。

为流星，就跑流星加summernote：summernote。在更多信息流星的自述。

for other /无框架：

1。包括你的CSS /

包括下面的代码＜head＞你的HTML包含标签:

<！包括图书馆（jQuery、Bootstrap，fontawesome）-->
<脚本 类型=“文字/ JavaScript“ SRC=“cdnjs.c2cbc.com / / / / / / jQuery的Ajax库/ jquery.min.js 2.1.4“></脚本> 
<链接 REL=“样式表“ href=“/ / cdnjs.c2cbc.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css“ />
<脚本 类型=“文字/ JavaScript“ SRC=“/ / / / /的Ajax库cdnjs.c2cbc.com Twitter引导/ / / bootstrap.min.js 3.3.5 js“></脚本>
<链接 REL=“样式表“ href=“/ / cdnjs.c2cbc.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css“ />

<！包括summernote / JS CSS—→
<链接 href=<trans data-src="" "="" data-dst="“">“summernote.css<trans data-src="" "="" data-dst="“">“ REL=<trans data-src="" "="" data-dst="“">“样式表<trans data-src="" "="" data-dst="“">“>
<脚本 SRC=<trans data-src="" "="" data-dst="“">“summernote.js<trans data-src="" "="" data-dst="“">“></脚本>

2。目标元素

然后把一个DIV标签中的某处身体标签。元replaced this will be with the summernote编辑器。

<DIV 身份证件=“summernote“>Hello Summernote</DIV>

3。summernote

最后，在DOM准备好运行这个脚本：

美元（文件）。准备好了（功能（）{美元（'# summernote'）。summernote
（）；}）；

应用程序接口

代码获取HTML源代码编辑器中的文本基础：

VaRHTML= 美元（'# summernote'）。summernote（'代码'）；

破坏summernote：

美元（'# summernote'）。summernote（'破坏'）；

警告-代码注入

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

支持的平台

任何现代浏览器：Safari，Chrome，Firefox，Opera，Internet Explorer 9。

即将到来的特点

  • 响应工具栏
  • 表：处理（大小、选择）和松饼
  • IE8支持
  • （你可以粘贴剪贴板图像已经）
  • 媒体对象的选择

开发商信息

文档结构

 - body container: <div class="note-editable">, <td>, <blockquote>, <ul>
 - block node: <div>, <p>, <li>, <h1>, <table>
 - void block node: <hr>
 - inline node: <span>, <b>, <font>, <a>, ...
 - void inline node: <img>
 - text node: #text
  1. 一个身体容器块的节点，但<是>只有<李>节点。
  2. 一个身体容器还具有内联节点有时。这个内联节点将包装P当输入按键。
  3. 一块节点只有内联节点。
  4. 一个内联节点有一个内联节点
  5. #文本无效的内联结没孩子。

建立summernote

#咕噜咕噜CLI是需要的你可能已经安装了这个#建立summernote完整版：距离/ summernote.js<trans data-src="
grunt build


" data-dst="繁重的建设">繁重的建设#产生缩小的复制：距离/距离/ summernote.css summernote.min.js，咕噜咕噜地

在这一点上，你现在应该有一个建立/目录有一切你需要使用summernote。

试验summernote

因果报应和PhantomJS测试运行

咕噜测试

如果你想运行测试其他浏览器， 变化值broswers性质gruntfile.js。

业力：{ 
：{ 
浏览器：[ 'phantomjs ]，
记者：[发展] 
 
 } }

你可以使用谷歌浏览器，chromecanary，火狐，歌剧，Safari，PhantomJS和IE旁边PhantomJS 曾经的你。繁重的测试，它会监视所有的JavaScript文件。因此业力运行测试你的每一次更改代码。

发展summernote启动本地服务器。

随着连接看运行本地服务器。

咕噜咕噜的服务器我们#打开浏览器http：／／本地：3000。
#如果更改源代码，自动刷新你的页面。

编码约定

投稿指南

联系

许可证

summernote可以自由分发，MIT许可证下。

##EN-CN人工翻译未完成 # Summernote

超级简单的WYSIWYG编辑器。

Build Status npm version Dependency Status Coverage Status Gratipay

Sauce Test Status

Summernote

summernote是一个JavaScript库，可以帮助你创建的所见即所得编辑在线。

首页: http://summernote.org

Why Summernote?

summernote具有一些特殊的功能:

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

安装和依赖

Summernote uses opensource libraries: jQuery, Bootstrap, Font Awesome.

For Meteor, just run meteor add summernote:summernote. More info in the Meteor README.

For other/no frameworks:

1. include JS/CSS

包括下面的代码 <head> 你的HTML包含标签:

<!-- include libraries(jQuery, bootstrap, fontawesome) -->
<script type="text/javascript" src="//cdnjs.c2cbc.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<link rel="stylesheet" href="//cdnjs.c2cbc.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="//cdnjs.c2cbc.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.c2cbc.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />

<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.js"></script>

2. target elements

Then place a div tag somewhere in the body tag. This element will be replaced with the summernote editor.

<div id="summernote">Hello Summernote</div>

3. summernote

Finally, run this script after the DOM is ready:

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

API

code - get the HTML source code underlying the text in the editor:

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

Destroy summernote:

$('#summernote').summernote('destroy');

Warning - code injection

The code view allows the user to enter script contents. Make sure to filter/sanitize the HTML on the server. Otherwise, an attacker can inject arbitrary JavaScript code into clients.

Supported platforms

Any modern browser: Safari, Chrome, Firefox, Opera, Internet Explorer 9+.

Upcoming Features

  • Responsive toolbar
  • Table: Handles (sizing, selection) and popover
  • IE8 Support
  • Clipboard (you can paste images already)
  • Media object selection

Developer information

document structure

 - body container: <div class="note-editable">, <td>, <blockquote>, <ul>
 - block node: <div>, <p>, <li>, <h1>, <table>
 - void block node: <hr>
 - inline node: <span>, <b>, <font>, <a>, ...
 - void inline node: <img>
 - text node: #text
  1. A body container has block node, but <ul> has only <li> nodes.
  2. A body container also has inline nodes sometimes. This inline nodes will be wraped with <p> when enter key pressed.
  3. A block node only has inline nodes.
  4. A inline nodes has another inline nodes
  5. #text and void inline node doesn't have children.

build summernote

# grunt-cli is need by grunt; you might have this installed already
npm install -g grunt-cli
npm install

# build full version of summernote: dist/summernote.js
grunt build

# generate minified copy: dist/summernote.min.js, dist/summernote.css
grunt dist

At this point, you should now have a build/ directory populated with everything you need to use summernote.

test summernote

run tests with Karma and PhantomJS

grunt test

If you want run tests on other browser, change the values for broswers properties in Gruntfile.js.

karma: {
  all: {
    browsers: ['PhantomJS'],
    reporters: ['progress']
  }
}

You can use Chrome, ChromeCanary, Firefox, Opera, Safari, PhantomJS and IE beside PhantomJS. Once you run grunt test, it will watch all javascript file. Therefore karma run tests every time you chage code.

start local server for developing summernote.

run local server with connect and watch.

grunt server
# Open a browser on http://localhost:3000.
# If you change source code, automatically reload your page.

Coding convention

Contribution guide

Contacts

License

summernote may be freely distributed under the MIT license.

About

所见所得编辑器,含编辑及保存按钮,项目演示http://summernote.org/

Resources

Readme

Contributing

Contributing
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages