创作富文本，选对编辑器超关键！本文精心推荐多款宝藏富文本编辑器，从便捷操作、强大功能，到适配场景，全方位剖析。无论新手小白还是专业大咖，都能从中觅得最适配工具，助你文字创作、排版一飞冲天，速来探索。
1. TinyMCE
官网网址：www.tiny.cloud/
github：github.com/tinymce
先去官网注册，获取 api-key ，这个有免费版和付费版本的，付费版本的包含ai提问等功能。支持 自定义功能按键 。
安装
这里我只展示 vue 的版本 ===> npm i @tinymce/tinymce-vue
示例代码
<template>
<Editor :api-key="apiKey" :init="TinyMCE_option" initial-value="Welcome to TinyMCE!" />
</template>
<script setup>
import Editor from '@tinymce/tinymce-vue'
import { reactive } from 'vue';
let apiKey = 'your API key' // 替换为你的 API 密钥
let TinyMCE_option = reactive({
// 插件
plugins: [
'anchor', 'autolink', 'charmap', 'codesample', 'emoticons', 'image', 'link', 'lists', 'media', 'searchreplace', 'table', 'visualblocks', 'wordcount',
'checklist', 'mediaembed', 'casechange', 'export', 'formatpainter', 'pageembed', 'permanentpen', 'powerpaste', 'advtable', 'advcode', 'editimage', 'advtemplate', 'mentions', 'tinycomments', 'tableofcontents', 'footnotes', 'mergetags', 'autocorrect', 'inlinecss', 'markdown', 'importword', 'exportword', 'exportpdf'
],
// 是否显示底部工具栏 默认为 true
statusbar: false,
// 工具栏
toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat | selectiveDateButton',
// 使用者
tinycomments_mode: 'embedded',
tinycomments_author: '张三',
// 语言
language: 'zh_CN',
// 自定义功能键
setup: (editor) => {
const toDateHtml = (date) => `<time datetime="${date.toString()}">${date.toDateString()}</time>`;
editor.ui.registry.addButton('selectiveDateButton', {
icon: 'insert-time',
tooltip: '插入当前时间',
onAction: (_) => editor.insertContent(toDateHtml(new Date()))
});
}
})
</script>
效果展示
总结
这个插件使用比较方便，配置也比较简单，容易上手
tips：如果不想要底部的那个 logo 可以在设置里面添加 statusbar: false , 但是会同时隐藏字节的显示，要是单独隐藏 logo 需要通过 css 设置隐藏。
2. CKEditor
github：github.com/ckeditor/ck…
先去官网注册，获取 licenseKey ，这个有免费版和付费版本的。
安装
这里我只展示 vue 的版本 ===> npm i @ckeditor/ckeditor5-vue
示例代码
<template>
<Ckeditor v-if="editor" v-model="CKEditorData" :editor="editor" :config="config" />
</template>
<script setup>
import { Ckeditor, useCKEditorCloud } from '@ckeditor/ckeditor5-vue';
import { ref, computed } from 'vue';
const licenseKey = '<YOUR_LICENSE_KEY>' // 替换为你的 licenseKey 密钥
const CKEditorData = ref('<p>Hello world!</p>');
const cloud = useCKEditorCloud({
version: '44.1.0',
premium: true,
translations: ['zh-cn']
});
const editor = computed(() => {
if (!cloud.data.value) {
return null;
}
return cloud.data.value.CKEditor.ClassicEditor;
});
const config = computed(() => {
if (!cloud.data.value) {
return null;
}
const { Autoformat, Bold, Italic, Underline, BlockQuote, Base64UploadAdapter, CloudServices, Essentials, Heading, Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, IndentBlock, Link, List, MediaEmbed, Mention, Paragraph, PasteFromOffice, Table, TableColumnResize, TableToolbar, TextTransformation } = cloud.data.value.CKEditor;
return {
licenseKey: licenseKey,
plugins: [Autoformat, BlockQuote, Bold, CloudServices, Essentials, Heading, Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Base64UploadAdapter, Indent, IndentBlock, Italic, Link, List, MediaEmbed, Mention, Paragraph, PasteFromOffice, PictureEditing, Table, TableColumnResize, TableToolbar, TextTransformation, Underline],
toolbar: ['undo', 'redo', '|', 'heading', '|', 'bold', 'italic', 'underline', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', '|', 'outdent', 'indent']
};
});
</script>
效果展示
总结
插件的配置稍微有点繁琐，但是功能很全面的。
3. wangEditor
官网网址：www.wangeditor.com/
github：github.com/wangeditor-…
这个插件直接使用，无需注册，免费的。
安装
这里我只展示 vue 的版本 ===> npm install @wangeditor/editor-for-vue
示例代码
<template>
<div style="border: 1px solid #ccc">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
<Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
@onCreated="handleCreated" />
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import '@wangeditor/editor/dist/css/style.css' // 引入 css 可以在main.js中引入
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const editorRef = shallowRef()
const valueHtml = ref('<p>hello</p>')
const mode = 'default'
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }
// 模拟 ajax 异步获取内容
onMounted(() => {
setTimeout(() => {
valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
}, 1500)
})
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例，重要！
}
</script>
效果展示
总结
插件的配置很简单，编辑器的事件也很多，总体感觉用起来很简单方便。
还有一些比较不错的插件可以使用,这里就不一一列举了,
UEditor(百度)、Quill、KindEditor(界面类似Office)、simditor、summernote、Froala Editor等等。大家根据自己的项目需要去下载。
