推荐几个轻便简洁的web富文本编辑器-天煜博客

HandyEditor

一款十分轻便且使用方便的所见即所得web富文本编辑器，由Catfish(鲶鱼) CMS官方开发，同时适用于移动端和pc端。

十分轻量

所有文件的压缩包只有不到100KB，加载快捷，超级省流量，手机端、电脑端自适应

使用方便

导入HandyEditor的javaScript文件后，用一条javaScript语句就可以方便地完成编辑器调用

灵活定制

所有工具都可以自由定制，还可以方便地使用HandyEditor的皮肤，让您的编辑器与众不同

HandyEditor的基本使用方法

1、引入HandyEditor的javaScript文件

<script src="HandyEditor.min.js"></script>

2、在您的javaScript代码中添加HandyEditor代码

var he = HE.getEditor('editor');//其中的editor是文本输入框(textarea)的id

3、获取编辑器中的内容

he.getHtml();//获取HTML代码

he.getText();//获取纯文本

he.sync();//将编辑器里面的内容同步到文本输入框(textarea)

GitHub传送门

官网地址

summernote

Installation

Requires HTML5 doctype

Bootstrap uses certain HTML elements and CSS properties which require HTML5 doctype. Include <!DOCTYPE html> in the beginning of all your projects.

<!DOCTYPE html>
<html lang="en">
...
</html>

Include js/css

Summernote uses the Open Source libraries jQuery and Bootstrap, if you are using the Boostrap 3 or 4 versions of Summernote, or just jQuery if you use the Lite version of Summernote. Include the Following code in the head area of your HTML page.

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

Don’t forget to change the file’s path if you downloaded summernote in a different folders.

You can however, and a lot of developers do these days, is include the stylesheet’s within the head are of your page, and include the Javascript at the bottom of your page, but before the closing body tag.

Fontawesome dependency

After v0.8.0, You don’t have to include fontawesome for displaying Summernote’s icons. But You can still use fontawesome for your custom icons. For more details, please visit custom buttons section. After v0.8.18, You have the possibility to override summernote icons with your custom ones. For more details, please visit custom icons section.

Embed

Summernote can be used with or without a form.

To use without a form, we suggest using a div in the body; this element will then be used where you want the Summernote editor to be rendered within your page.

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

To use within a form, is pretty much the same as above, but rather than a div, we recommend using a textarea element inside a form, which should include a name attribute so when the form is submitted you can use that name to process the editors data on your backend. Also, if using Summernote inside a form to set the attribute method="post" to allow larger sized editor content to parse to the backend, if you don’t your data either may not parse, or will be truncated.

<form method="post">
  <textarea id="summernote" name="editordata"></textarea>
</form>

Run summernote

Run the script below when document is ready!

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

The $(document).ready function is particularly necessary if you include the Javascript at the end of the document.

Simple example

You can also test running example. Save below code as index.html and open it with your browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>

For bootstrap 4

You can also use Summernote with Bootstrap 4 using summernote-bs4.js and summernote-bs4.css.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Summernote with Bootstrap 4</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello Bootstrap 4',
        tabsize: 2,
        height: 100
      });
    </script>
  </body>
</html>

Without Bootstrap

You can use Summernote without Bootstrap using summernote-lite.js and summernote-lite.css.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>without bootstrap</title>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello stand alone ui',
        tabsize: 2,
        height: 120,
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']],
          ['view', ['fullscreen', 'codeview', 'help']]
        ]
      });
    </script>
  </body>
</html>

Basic API

Initialize Summernote

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

Initialize Summernote with options

Height and Focus

If you set focus option, cursor will focus editable area after initialize Summernote.

$('#summernote').summernote({
  height: 300,                 // set editor height
  minHeight: null,             // set minimum height of editor
  maxHeight: null,             // set maximum height of editor
  focus: true                  // set focus to editable area after initializing summernote
});

If you set height, you can see resizebar below.

blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~

If you don’t set the height, editable area’s height will change according to contents.

press enter key.

Destroy

Destroy Summernote.

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

get & set Code

Get the HTML contents of the first summernote in the set of matched elements.

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

If you initialize multiple editor, You can get the HTML content of the second summernote with jQuery eq.

var markupStr = $('.summernote').eq(1).summernote('code');

A string of HTML to set as the content of each matched element.

var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);

for more detail api: deep dive with api

destroy and code

After v0.7.0, direct jquery methods, destroy and code were removed for avoiding conflict with other jquery libraries. You can call this methods with summernote api.

i18n support

Language

Include libraries with lang file. eg) summernote-ko-KR.js.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<link href="summernote.css" rel="stylesheet">
<script src="summernote.min.js"></script>

<!-- include summernote-ko-KR -->
<script src="lang/summernote-ko-KR.js"></script>

Run the script with locale option.

$(document).ready(function() {
  $('#summernote').summernote({
    lang: 'ko-KR' // default: 'en-US'
  });
});

More Summernote languages: languages

GitHub传送门

官网地址

Editor.md

主要特性

– 支持“标准”Markdown / CommonMark和Github风格的语法，也可变身为代码编辑器；
– 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
– 支持ToC（Table of Contents）、Emoji表情、Task lists、@链接等Markdown扩展语法；
– 支持TeX科学公式（基于KaTeX）、流程图 Flowchart 和时序图 Sequence Diagram;
– 支持识别和解析HTML标签，并且支持自定义过滤标签解析，具有可靠的安全性和几乎无限的扩展性；
– 支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
– 兼容主流的浏览器（IE8+）和Zepto.js，且支持iPad等平板设备；
– 支持自定义主题样式；

GitHub传送门

官网地址

转载请注明出处，并标明原文链接。
本网站尊重知识产权，如有侵权，请及时联系我们删除。
本站所有原创内容仅用于学习和交流目的，未经作者和本站授权不得进行商业使用或盈利行为。

THE END