常用富文本編輯器文檔整理

一、百度編輯器（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/wangeditor@4.2.2/dist/wangEditor.min.js

使用 js 外鏈引入

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

<script type="text/javascript" src="https://unpkg.com/wangeditor@4.2.2/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);
      });
    }