常用富文字編輯器文件整理

阿新 • • 發佈：2020-11-20

一、百度編輯器（UEditor）

地址：http://fex.baidu.com/ueditor/

UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文字web編輯器，具有輕量，可定製，注重使用者體驗等特點，開源基於MIT協議，允許自由使用和修改程式碼。

主要特點：

輕量級：

程式碼精簡，載入迅速。

定製化：

全新的分層理念，滿足多元化的需求。

採用三層架構：

1. 核心層： 為命令層提供底層API，如range/selection/domUtils類。
2. 命令外掛層： 基於核心層開發command命令，命令之間相互獨立。
3. 介面層： 為命令層提供使用者使用介面。 滿足不同層次使用者的需求。

瀏覽器相容

相容Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome，實現瀏覽器無差別化。

注重細節

統一不同瀏覽器下表格選取方式。
提供黑/白名單的過濾機制。
更好的word支援，實現貼上轉換機制。

穩定性

經過專業的QA團隊測試，通過上千個測試用例，包括自動化用例和手動用例，目前仍然在不斷完善中。

使用

<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset=" 
utf-8" src="ueditor.all.min.js"> </script>

<div>
    <h1>完整demo</h1>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>

<script type="text/javascript"> 
    var ue = UE.getEditor('editor');
</script>

ueditor編輯器按鈕配置方法，詳見：

https://www.cnblogs.com/haima/p/9697639.html

前端vue 外掛封裝 vue-ueditor-wrap

安裝：

npm install vue-ueditor-wrap –S

引入：

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
// 或者
const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS

元件註冊：

components: {
   VueUeditorWrap
}
// 或者在 main.js 裡將它註冊為全域性元件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

使用：

<vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>

資料雙向繫結以及配置：

data () {
  return {
    msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model雙向繫結</h2>',
    myConfig: {
      // 編輯器不自動被內容撐高
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 240,
      // 初始容器寬度
      initialFrameWidth: '100%',
      // 上傳檔案介面（這個地址是我為了方便各位體驗檔案上傳功能搭建的臨時介面，請勿在生產環境使用！！！部署在國外的伺服器，如果無法訪問，請自備梯子）
      serverUrl: 'http://35.201.165.105:8000/controller.php',
      // UEditor 資原始檔的存放路徑，如果你使用的是 vue-cli 生成的專案，通常不需要設定該選項，vue-ueditor-wrap 會自動處理常見的情況
      UEDITOR_HOME_URL: '/static/UEditor/'
    }
  }
}

二、富文字編輯器Notebook

外掛描述：一個簡單，乾淨，優雅的所見即所得的富文字編輯器
基於jquery

用法

新增FontAwesome CSS和jQuery，Notebook css

<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="src/js/jquery.notebook.css">

加入jQuery和jQuery的，notebook.js

<script type="text/javascript" src="src/js/libs/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="src/js/jquery.notebook.js"></script>

建立編輯器

<div class="my-editor"></div>

$(document).ready(function(){
    $('.my-editor').notebook();
});

三、markItUp

一個輕量級的，基於jQuery的開源文字編輯器，目標是讓開發者能夠將tetarea元素擴充套件為一個簡單的文字編輯器。現在支援html、Wiki、BBScode等編輯格式，並且相當的輕巧（5.5k），有比較好的擴充套件性，如果需求簡單的話可以考慮一下。

地址：http://markitup.jaysalvat.com/home/

使用

css
<link rel="stylesheet" type="text/css" href="markitup/skins/macosx/style.css" />
<link rel="stylesheet" type="text/css" href="markitup/sets/html/style.css" />
js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="markitup/sets/html/set.js"></script>

<script language="javascript">
$(document).ready(function()    {
    $('#html').markItUp(myHtmlSettings);
});
</script>
Html
<textarea id="html" cols="80" rows="20">
    ...html stuff...
</textarea>

四、KindEditor

地址：http://kindeditor.net/doc.php

1、在需要顯示編輯器的位置新增textarea輸入框。

<textarea id="editor_id" name="content" style="width:700px;height:300px;">
   &lt;strong&gt;HTML內容&lt;/strong&gt;
</textarea>

2、在該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');
      });
       或
      var options = {
        cssPath : '/css/index.css',
        filterMode : true
      };
     var editor = K.create('textarea[name="content"]', options);

</script>

3、獲取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內容');

// 關閉過濾模式，保留所有標籤
KindEditor.options.filterMode = false;

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

Vue使用

npm install kindeditor

import Vue from 'vue'
import VueKindEditor from 'vue-kindeditor'
import 'kindeditor/kindeditor-all-min.js'
import 'kindeditor/themes/default/default.css'
Vue.use(VueKindEditor);

<editor id="editor_id" height="500px" width="700px" 
:content="editorText"
    :items="kitem"
    fileManagerJson=""
    basePath=''
    uploadJson=""
    :loadStyleMode="false"
    @on-content-change="onContentChange">
</editor>

uploadJson:上傳介面地址，指定上傳檔案的伺服器端程式
basePath：圖片反顯地址
items：要顯示的功能列表，配置編輯器的工具欄，其中”/”表示換行，”|”表示分隔符
@on-content-change：監聽編輯器的改變事件
content：編輯器的值

參考連結

https://blog.csdn.net/weixin_42467322/article/details/107098950
https://segmentfault.com/a/1190000019408320?utm_source=tag-newest

五、jQuery 文字編輯器外掛 HtmlBox

下載地址：https://download.csdn.net/detail/leixiaohua1020/6376479
或者：https://www.drupal.org/project/htmlbox/releases

HtmlBox是一個基於jQuery開發的HTML/XHTML編輯器。易於使用。支援多種瀏覽器Mozilla Firefox、Internet Explorer6.0、Opera、Safari和Netscape。非常小隻有15kb。HtmlBox預設返回HTML，但也可以輸出XHTML。整合Ajax支援。

1.引入標頭檔案（注意一定要把jQuery放在前面）

   <script src="lib/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="lib/htmlbox/htmlbox.colors.js"></script>
    <script type="text/javascript" src="lib/htmlbox/htmlbox.styles.js"></script>
    <script type="text/javascript" src="lib/htmlbox/htmlbox.syntax.js"></script>
    <script type="text/javascript" src="lib/htmlbox/htmlbox.undoredomanager.js"></script>
    <script type="text/javascript" src="lib/htmlbox/htmlbox.min.js"></script>

2.在需要使用HtmlBox的textarea後面加入javascript程式碼

<textarea id="htmlbox_icon_set_green" class="text_area2" cols="32" rows="3" name="content"></textarea>

<script language="Javascript" type="text/javascript">
    var hb_icon_set_green = $("#htmlbox_icon_set_green").css("height","400").css("width","583").htmlbox({
    toolbars:[             ["cut","copy","paste","separator_dots","bold","italic","underline","strike","sub","sup","separator_dots","undo","redo","separator_dots",
         "left","center","right","justify","separator_dots","ol","ul","indent","outdent","separator_dots","link","unlink","image"],
    ["code","removeformat","striptags","separator_dots","quote","paragraph","hr","separator_dots",
             {icon:"new.gif",tooltip:"New",command:function(){hb_icon_set_green.set_text("<p></p>");}},
             {icon:"open.gif",tooltip:"Open",command:function(){alert('Open')}},
             {icon:"save.gif",tooltip:"Save",command:function(){alert('Save')}}
          ]
    ],
    icons:"default",
    skin:"green"
});
</script>

六、ckeditor

地址：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html

使用：

<div id="editor"></div>

<script src="ckeditor.js"></script>

<script>
  ClassicEditor
    .create( document.querySelector( '#editor' ), {
      // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
    } )
    .then( editor => {
      window.editor = editor;
    } )
    .catch( err => {
      console.error( err.stack );
    } );
</script>

Vue使用：

npm install --save @ckeditor/ckeditor5-build-classic

// Using ES6 imports:
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

// Or CJS imports:
const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
} );

有四種模式：

經典編輯器– ClassicEditor
內聯編輯器– InlineEditor
氣球編輯器– BalloonEditor
檔案編輯器– DecoupledEditor

詳情見：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html

七、wangEditor

地址：http://www.wangeditor.com/

國產富文字編輯器wangEditor基於JavaScript和css開發的 Web富文字編輯器，輕量、簡潔、易用、開源免費。與國產編輯器百度ueditor 和 kindeditor 相比，它輕量、易用、UI設計精緻漂亮。與國外編輯器 bootstrap-wysiwyg 和 simditor 相比，它文件易讀、交流方便，更接地氣。它還會根據使用者的反饋不斷完善，未來將支援移動版。支援IE6+瀏覽器。

npm 安裝 npm i wangeditor --save

CDN 連結: https://unpkg.com/[email protected]/dist/wangEditor.min.js

使用 js 外鏈引入

<div id="div1">
    <p>歡迎使用 <b>wangEditor</b> 富文字編輯器</p>
</div>

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/wangEditor.min.js"></script>
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    // 或者 const editor = new E( document.getElementById('div1') )
    editor.create()
</script>

使用 npm 安裝

import E from 'wangeditor'
const editor = new E('#div1')
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()

八、mavonEditor

地址：https://www.npmjs.com/package/mavon-editor
https://github.com/hinesboy/mavonEditor

npm install mavon-editor –save

import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";


<mavon-editor
            ref="md"
            @change="handleMarkdownChange"
            @imgAdd="handleEditorImgAdd"
            @imgDel="imgDel"
            :ishljs="true"
            v-model="form.doc"
          />

components: { mavonEditor },


handleMarkdownChange(markdown, html) {
      console.log(markdown, html 'this.contentText');
      
    },


handleEditorImgAdd(pos, file){
     var newdate = new FormData();
      newdate.append("file", file);
      pushFileUnload(newdate).then((res) => {
        console.log(res);
        this.$refs.md.$img2Url(pos, res.data.url);
      });
    }