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

最近工作中需要用到富文本编辑器,博客上用的是 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 | ☆★★每天进步一点点,加油!★★☆ | 

您可能还感兴趣的文章!

发表评论

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