常用富文本编辑器文档整理

一、百度编辑器（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);
      });
    }

posted @ 2020-11-20 16:43 张小中阅读(1149) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部