多种富文本编辑器介绍和使用

多种富文本编辑器介绍和使用

富文本编辑器

富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一样长。
 作为一个技术人员,手上备上两款富文本编辑器还是很有用的,指不定那个项目就要集成一个进去。到时候现找现用那可就费功夫了,毕竟从开发上讲,每个富文本编辑器的用法都是有区别的。

1、TinyMCE

TinyMCE是一个开源的所见即所得的HTML编辑器,界面相当清新,界面模拟本地软件的风格,顶部有菜单栏。支持图片在线处理,插件多,功能非常强大,易于集成,并且拥有可定制的主题。支持目前流行的各种浏览器,它可以达到微软Word类似的编辑体验。而且这么好的东西还是开源免费的,目前一直有人维护,这款编辑器使用的人非常多。
官网地址:https://www.tiny.cloud/docs/demo/full-featured/
在这里插入图片描述

下面将带你快速入门,详细使用可以查看官网使用
1.首先引入该资源库

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

2.将 TinyMCE 初始化为 Web 表单的一部分
selector通过将包含值的对象传递给 来初始化网页上任何一个或多个元素上的 TinyMCE 5 tinymce.init()。该selector值可以是任何有效的CSS 选择器。

例如:要替换<textarea id=“mytextarea”>为 TinyMCE 5 编辑器实例,请将选择器传递’#mytextarea’给tinymce.init()。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

    <script>
      tinymce.init({
        selector: '#mytextarea'
      });
    </script>

  </head>

  <body>
  <h1>TinyMCE Quick Start Guide</h1>
    <form method="post">
      <textarea id="mytextarea">Hello, World!</textarea>
    </form>
  </body>
</html>

将此内容添加到 HTML 文件并在 Web 浏览器中打开它会加载 TinyMCE 编辑器,例如:

<textarea id="default">Hello, World!</textarea>

js如下

tinymce.init({
  selector: 'textarea#default'
});

3.添加您的 API 密钥

要删除该通知:
警告图标:该域名未在 Tiny Cloud 注册。
no-api-key将源脚本 ( )替换<script src=…为 Tiny Cloud API 密钥,该密钥是在注册Tiny Cloud时创建的。注册 Tiny Cloud API 密钥还将提供高级插件的试用版。

4.用表单POST保存内容

使用表单处理程序处理内容。
当<form>提交时,TinyMCE 5 将以POST与普通 HTML 相同的方式显示内容<textarea>,包括编辑器内容的 HTML 元素和内联 CSS。主机的表单处理程序可以以与常规<textarea>.

2、CKEditor

Ckeditor也是一款非常经典的富文本编辑器,官方下载量过千万。它是在非常著名的FCkEditor基础上开发的新版本,FckEditor的用户现在基本都转移到Ckeditor了。Ckeditor有高性能的实时预览,它特有行内编辑功能,使得编辑内容更加直观,仿佛是在编辑网页一样,有很强的可扩展性,被各大网站广泛运用。
 官网地址:https://ckeditor.com/
 在这里插入图片描述
下面将带你快速入门,详细使用可以查看官网使用
多种方式使用
第一种

<script src="https://cdn.ckbox.io/ckbox/2.4.0/ckbox.js"></script>

实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckbox.io/ckbox/2.4.0/ckbox.js"></script>
    </head>
    <body>
        <div id="ckbox"></div>
        <script>
            CKBox.mount(document.getElementById('ckbox'), {
                // You must provide a valid token URL in order to use the application
                // After registering to CKBox, the fastest way to try out CKBox is to use the development token endpoint:
                // https://ckeditor.com/docs/ckbox/2.4.0/guides/configuration/authentication.html#development-token-endpoint
                tokenUrl: 'https://your.token.url'
            });
        </script>
    </body>
</html>

第二种

npm install ckbox

使用:

import * as CKBox from 'ckbox';
import 'ckbox/dist/styles/ckbox.css';

CKBox.mount(document.querySelector('#ckbox'), {
    tokenUrl: 'https://your.token.url'
});

第三种去下载包
https://download.ckbox.io/CKBox/ckbox_2.4.0.zip
解压后使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="ckbox/ckbox.js"></script>
    </head>
    <body>
        <div id="ckbox"></div>
        <script>
            CKBox.mount(document.getElementById('ckbox'), {
                tokenUrl: 'https://your.token.url'
            });
        </script>
    </body>
</html>

3、UEditor

UEditor 是由百度出品的富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源免费。这款编辑器用过的人也非常多,功能非常全面,插件很多,还可以很方便插入百度地图,接入十分简单。

16年之后百度没有怎么更新了,不过现有的功能也足够用了。UEditor分为UE版(全功能版)和UM版(精简版),大家可以根据自己使用环境选择不同的版本。

官网地址:http://ueditor.baidu.com/website/
点击该地址之后有教程使用

4、wangEditor

wangEditor轻量级,小巧实用,配置方便,使用简单。可以自定义皮肤功能,免费开源。用户数量也很多,尤其是用在一些轻型环境,比如论坛社区回帖。wangEditor是国人出品的开源项目。
官网地址:http://www.wangeditor.com/
在这里插入图片描述
下面将带你快速入门,详细使用可以查看官网使用
创建空白编辑器

引入 CSS 定义样式

可自定义编辑器、工具栏的尺寸、边框、z-index 等样式。

<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<style>
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
  #toolbar-container { border-bottom: 1px solid #ccc; }
  #editor-container { height: 500px; }
</style>

定义 HTML 结构

<div id="editor—wrapper">
    <div id="toolbar-container"><!-- 工具栏 --></div>
    <div id="editor-container"><!-- 编辑器 --></div>
</div>

如果想要“全屏”功能,则要求工具栏、编辑器 DOM 节点必须是同一层级
当然,工具栏、编辑器 DOM 节点也可自由组合,例如 仿腾讯文档 demo

引入 JS 创建编辑器

<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
const { createEditor, createToolbar } = window.wangEditor

const editorConfig = {
    placeholder: 'Type here...',
    onChange(editor) {
      const html = editor.getHtml()
      console.log('editor content', html)
      // 也可以同步到 <textarea>
    }
}

const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'default', // or 'simple'
})

const toolbarConfig = {}

const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
})
</script>

mode: ‘default’ 默认模式 - 集成了 wangEditor 所有功能
mode: ‘simple’ 简洁模式 - 仅有部分常见功能,但更加简洁易用

5、kindeditor

KindEditor历史也很长了,用户数也不少,国内某公司出品。免费开源。界面类似于office word,界面和功能中规中矩,文档齐全,使用还算方便。
官网地址:http://kindeditor.net/demo.php
在这里插入图片描述

下面将带你快速入门,详细使用可以查看官网使用

  1. 下载编辑器
    下载 KindEditor 最新版本,下载之后打开 examples/index.html 就可以看到演示。

下载页面: http://www.kindsoft.net/down.php

Note
您可以根据需求删除以下目录后上传到服务器。
asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件

  1. 部署编辑器
    解压 kindeditor-x.x.x.zip 文件,将所有文件上传到您的网站程序目录里,例如:http://您的域名/editor/
  2. 修改HTML页面
    在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>

Note
id在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑,在这里需要注意的是,如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容,则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序,目前支持ASP、ASP.NET、PHP、JSP。
在有些浏览器上不设宽度和高度可能显示有问题,所以最好设一下宽度和高度。宽度和高度可用inline样式设置,也可用 编辑器初始化参数 设置。
在该HTML页面添加以下脚本。

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });
</script>

Note
第一个参数可用其它CSS选择器,匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数,可以对编辑器进行配置,具体参数请参考 编辑器初始化参数 。
var options = {
cssPath : ‘/css/index.css’,
filterMode : true
};
var editor = K.create(‘textarea[name=“content”]’, options);

  1. 获取HTML数据
// 取得HTML内容
html = editor.html();

// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery

// 设置HTML内容
editor.html('HTML内容');

Note
KindEditor的可视化操作在新创建的iframe上执行,代码模式下的textarea框也是新创建的,所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。
KindEditor在默认情况下自动寻找textarea所属的form元素,找到form后onsubmit事件里添加sync函数,所以用form方式提交数据,不需要手动执行sync()函数。
KindEditor默认采用白名单过滤方式,可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode 参数关闭过滤模式,保留所有标签。

// 关闭过滤模式,保留所有标签
KindEditor.options.filterMode = false;

KindEditor.ready(function(K)) {
        K.create('#editor_id');
}

6、simditor

simditor是Tower平台使用的富文本编辑器,是一款轻量化的编辑器,界面简约,功能实用,插件不是很多,功能要求不高的可以使用。虽然是国内出品,但文档是英文的。开源免费。
 官网地址:https://simditor.tower.im/
 在这里插入图片描述
 两个方式引入,可以使用下载的方式,
 您还可以通过bower和npm安装Simditor:

npm install simditor
bower install simditor

将以下文件导入您的web应用程序

<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />

<script type="text/javascript" src="[script path]/jquery.min.js"></script>
<script type="text/javascript" src="[script path]/module.js"></script>
<script type="text/javascript" src="[script path]/hotkeys.js"></script>
<script type="text/javascript" src="[script path]/uploader.js"></script>
<script type="text/javascript" src="[script path]/simditor.js"></script>

在项目中使用Simditor
要使用Simditor,首先需要textarea元素如下:

<textarea id="editor" placeholder="Balabala" autofocus></textarea>

初始化Simditor:

var editor = new Simditor({
  textarea: $('#editor')
  //optional options
});

textarea是必需的选项。jQuery对象、HTML元素或Selector字符串可以传递给该选项。

一些可选选项:

  • placeholder(默认值:“”)simditor的占位符。默认情况下,使用文本区域的占位符属性值。
  • toolbar(默认值:true)-显示工具栏按钮
  • toolbarFloat(默认值:true)-修复了滚动时浏览器顶部的工具栏。
  • toolbarHidden(默认值:false)-隐藏工具栏。
  • defaultImage(默认值:'images/image.png')-默认图像占位符。在Simditor中插入图片时使用。
  • tabIndent(默认值:true)-使用“tab”键进行缩进。
  • params(默认值:{})-在文本区域中插入隐藏的输入以存储参数(键-值对)
  • upload(默认值:false)-接受false或键值对。上传图像的额外选项。例如“url”、“params”
  • pasteImage(默认值:false)-支持通过粘贴剪贴板中的图像进行上传。只有Firefox和Chrome支持。

7、bootstrap-wysiwyg

bootstrap-wysiwyg是基于Bootstrap的轻型、免费开源的富文本编辑器,界面简洁大方。使用需要先引入bootstrap。
地址:http://mindmup.github.io/bootstrap-wysiwyg/
在这里插入图片描述
使用方法在官网内有

8、summernote

summernote是一款轻量级的富文本编辑器,比较容易上手,使用体验流畅,支持各种主流浏览器。summernote开源免费,该项目一直比较活跃,一直都有人在维护。
summernote同样依赖于jquery和bootstrap,使用前先引入这两项。
地址:https://summernote.org/
在这里插入图片描述
下载压缩包
解压使用

安装
需要HTML5 doctype
Bootstrap使用某些需要HTML5 doctype的HTML元素和CSS属性。包括在你所有项目的开始

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

包括js/css
如果您使用的是Boostrap 3或4版本的Summernote,Summernote使用开源库jQuery和Bootstrap,如果您使用Lite版本的Summarnote,则只使用jQuery。在中包含以下代码headHTML页面的区域

<!-- 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>

如果您在不同的文件夹中下载了summernote,请不要忘记更改文件的路径。

然而,正如现在许多开发人员所做的那样,您可以将样式表包含在head是页面的,并在页面底部,但在结束之前包含Javascript身体标签

Fontawese依赖
在v0.8.0之后,您不必使用fontawesome来显示Summernote的图标。但是你仍然可以使用fontwo敬畏来制作你的自定义图标。有关更多详细信息,请访问自定义按钮第节。在v0.8.18之后,您可以使用自定义图标覆盖注释图标。有关更多详细信息,请访问自定义图标第节

嵌入
Summernote可以与form .
不使用form,我们建议使用div公司在body; 然后,该元素将用于您希望在页面中呈现Summernote编辑器的位置。

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

在中使用form,与上面的基本相同,但不是div公司,我们建议使用textarea元素内部形式,它应该包含一个name属性,以便在提交表单时可以使用该名称在后端处理编辑器数据。此外,如果在form设置属性method="post"为了允许更大的编辑器内容解析到后端,如果不这样做,数据可能无法解析,或者将被截断。

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

文档准备好后运行下面的脚本!

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

这个$(document).ready如果在文档末尾包含Javascript,则函数是特别必要的。

简单示例
将下面的代码另存为index.html然后用浏览器打开它

<!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>

9、Froala

Froala是一款功能丰富的富文本编辑器,界面分类清晰,容易集成,容易升级,支持主流浏览器,具有行内编辑功能。Froala代码示例很多,可以集成在很多js框架里如React.js,Aurelia,Angular,Ionic,Django等。插件很多,易于扩充功能。

Froala是收费的不过多介绍
 地址:https://www.froala.com/wysiwyg-editor
 在这里插入图片描述

10、Quill

Quill是轻型的编辑器,样式一般(黑白风),功能中等,它的代码高亮功能比较强,同样支持行内编辑模式,工具条可自定义。
开源免费,项目活跃,一直有人维护。
地址:https://quilljs.com/
在这里插入图片描述

12、dhtmlxEditor

DHTMLX组件是一整套基于JS的UI库,功能强大,其中包含编辑器dhtmlxEditor。该编辑器可以直接集成到Angular,React和Vue.js框架中,该编辑器还同时支持Markdown和富文本。

支持普通视图和类似word一样的页面视图,支持全屏幕,工具支持自定义,包括工具条颜色和样式等。

dhtmlxEditor分为免费版和收费版,免费版具有绝大多数功能,而且免费版是开源的你可以在代码级别随便扩充。
 地址:https://dhtmlx.com/docs/products/dhtmlxRichText/

  • 15
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值