Vue2.6使用 wangEditor5 富文本编辑器

by ·一条评论 · 3,283 人阅读 · 隐藏边栏

最近工作中需要用到富文本编辑器，博客上用的是 UEditor ，感觉比较重，而且也不更新维护了。想找个功能适用，较轻量的富文本编辑器用用，网上找了下，国人写的 wangEditor 感觉比较适合。目前常见的富文本编辑器有以下几种：

常见富文本编辑器对比

  • WangEditor：轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。一个国人独立开发的基于javascript和css开发的web富文本编辑器，之前用过感觉还是很不错的，UI漂亮，中文文档齐全并且开源。不足的地方在于更新不及时，没有强大的团队支撑。不过细心的会发现现在开始有动作了，成立了wangeditor-team来进行维护，可能也是应了广大用户的需求。

  • UEditor：由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。不足在于官方很久没有更新了，现在已没有专门维护了，很多在线体验、下载地址都关闭了，而且样式比较老旧，不符合新时代的审美。插件使用复杂，前后端不分离。

  • Kindeditor：一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。文档齐全，为中文，阅读方便。缺点：图片上传存在问题，上传历史过多，会全部加载，导致浏览器卡顿。

  • TinyMCE：是一款易用、且功能强大的所见即所得的富文本编辑器。优势：插件丰富，自带插件基本涵盖日常所需功能；接口丰富，可扩展性强，有能力可以无限拓展功能；界面好看，符合现代审美；提供经典、内联、沉浸无干扰三种模式；多语言支持，官网可下载几十种语言。官方也在之前发布了 vue 版本的 tinymce-vue，帮你封装好了很多东西

  • Vue-Quill-Editor：基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。据说大企业用的比较多，不限制框架，但是需要定制，理念很先进。

  • mavonEditor：国人开源的一款比较好用的markdown编辑器，可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，使普通文本内容具有一定的格式。

更多详见：vue富文本编辑器

快速入门使用 wangEditor5

在github找了个老铁基于 wangEditor5 二次封装过的基于vue2的版本 wangeditor5-for-vue2，用着还不错，首先来安装下。

// 安装wangeditor
npm i @wangeditor/editor wangeditor5-for-vue2

// 安装支持markdown格式的插件
npm i @wangeditor/plugin-md

全局注册，更多参考使用文档：https://clinfc.github.io/wangeditor5-for-vue2/guide/

import { WeToolbar, WeEditable, WeEditor, registToggleMode } from 'wangeditor5-for-vue2'
import '@wangeditor/editor/dist/css/style.css'

// 注册markdown插件
import { Boot } from '@wangeditor/editor'
import markdownModule from '@wangeditor/plugin-md'

Boot.registerModule(markdownModule)

registToggleMode({ menu: 'toggleModeButton' })

export default (app) => {
    app.use(WeToolbar)
    app.use(WeEditable)
    app.use(WeEditor)
}

使用示例：

<a-form-model-item class="mb12 html" ref="content" label="进展内容" labelAlign="left">
  <we-editor class="editor" toolbar-class="editor-toolbar" editable-class="editor-editable"
    :toolbar-option="toolbar" :editable-option="editable" :html.sync="taskProgressModel.content" />
</a-form-model-item>

<script>
import { useWangEditor } from 'wangeditor5-for-vue2'

export default {
  data() {
    return {
      // 初始化wangEditor
      const { toolbar, editable, clearContent, syncContent } = useWangEditor({
        config: {
          placeholder: '请更新任务进展',
          onCreated: (inst) => {
            console.log(inst)
            // 使用了箭头函数，因此 this 指向当前组件实例
            console.log(this.editable.config.placeholder)
          },
          delay: 3000,
        },
      })

      return {
        // 富文本工具配置
        toolbar,
        editable,
        clearContent,
        syncContent,
        ......
      },
      mounted() {
        this.toolbar.mode = 'simple';

        // 上传图片设置
        // this.editor.config.uploadImgShowBase64 = false
        // this.editor.config.uploadImgServer = '/dist/static/img'
        // this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024 // 10M
        // this.editor.config.uploadImgAccept = []
        // this.editor.config.uploadImgMaxLength = 5
        // this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
        // 高亮渲染
        prismjs.highlightAll()
    },
  }
</script>

<style lang="scss" scoped>
// wangEditor样式配置
::v-deep .editor {
    border: 1px solid #e5e5e5;
    margin-left: -39px;
    border-radius: 3px;
    z-index: 1000;

    &-toolbar {
        border-bottom: 1px solid #e5e5e5;
    }

    &-editable {
        height: 500px;
    }
}

::v-deep .w-e-text-placeholder {
    font-style: italic;
    left: 10px;
    top: 7px;
    width: 90%;
}

/*
 *  以下样式由于全局reset文件被覆盖，所以需要重新定义
 */
::v-deep h5,
.h5 {
    font-size: 14px;
}

::v-deep h4,
.h4 {
    font-size: 16px;
    font-weight: bold;
}

::v-deep h3,
.h3 {
    font-size: 18px;
    font-weight: bold;
}

::v-deep h2,
.h2 {
    font-size: 20px;
    font-weight: bold;
}

::v-deep h1,
.h1 {
    font-size: 22px;
    font-weight: bold;
    margin: 20px 0;
}

::v-deep i {
    font-style: italic
}

::v-deep .w-e-toolbar .w-e-menu i {
    font-style: normal;
}

/* ul ol 样式 */
::v-deep .html {
    ol {
        margin: 10px 0 10px 22px;
        list-style-type: decimal;
    }
    ul {
        margin: 10px 0 10px 22px;
        list-style-type: disc;
    }
}

::v-deep .w-e-select-list ul {
    line-height: 1;
    list-style: none;
    margin: 0 !important;
}

// ::v-deep ul, ol, li {
// padding: 0;
// margin: 0;
// }

::v-deep p {
    margin: 15px 0;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* table 样式 */
::v-deep table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-collapse: collapse;
}

::v-deep table td,
::v-deep table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
    height: 32px;
    min-width: 50px;
}

::v-deep table th {
    border-bottom: 1px solid #ccc;
    text-align: center;
    background-color: #f1f1f1;
}

/* blockquote 样式 */
::v-deep blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    min-height: 24px;
    font-size: 100%;
    background-color: #f1f1f1;
}

/* code 样式 */
// ::v-deep code {
//     display: inline-block;
//     *display: inline;
//     *zoom: 1;
//     background-color: #f1f1f1;
//     border-radius: 3px;
//     padding: 3px 5px;
//     margin: 0 3px;
// }

// ::v-deep pre code {
//     display: block;
// }
</style>

这样就可以了，查看效果：

Vue2.6使用 wangEditor5 富文本编辑器

接下来就可以配置上传图片，附件这些功能了。总体来说，使用起来还是挺不错的，推荐试试。

Vue集成Prismjs实现html代码高亮显示

首先安装prismjs：

npm i prismjs
npm i babel-plugin-prismjs

配置babel.config.js：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
     // prismjs的配置
     [
      "prismjs",
      {
        languages: ["javascript", "css", "markup", "go", "java", "python","nginx","yaml","bash","sql","git","markdown","php","vim"],
        plugins: ["line-numbers", "show-language", "toolbar", "copy-to-clipboard"],
        theme: "okaidia",
        css: true
      }
    ]
  ]
}

vue页面使用：

import prismjs from "prismjs"
// import "prismjs/themes/prism-okaidia.css"
import "prismjs/themes/prism.css"

export default {
    mounted() {
        // 高亮渲染
        prismjs.highlightAll()
    },
}

查看效果：

Vue2.6使用 wangEditor5 富文本编辑器

相关参考：

展开全文 ∨

anzhihe 安志合个人博客，版权所有 丨 如未注明，均为原创 丨 转载请注明转自：https://chegva.com/5405.html | ☆★★每天进步一点点,加油!★★☆ | 
标签：

您可能还感兴趣的文章！

1 评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注