一个官网很详细的富文本编辑器

富文本编辑器-wangeditor

官网地址，官网很详细，很简单易用。
npm 安装

// i 和 install区别：npm i 是 npm install 的简写
// npm i 安装的无法用npm uninstall卸载，得用npm uninstall i
// npm i 会检测与当前node版本最匹配得
// npm i 不一定有log
npm i wangeditor --save

写一个实例注册文件并在里面配置src/utils/wangeditor.js

import E from "wangeditor"
import { getToken } from './localStorage'
import { baseUrl } from '../api/config'
export const createEditor = (editorDiv, onchange) => {let editor = new E(editorDiv)// onchange = (newHtml) => {//     // ...写内容变化之后的处理//     console.log(newHtml)//}editor.config.onchange = onchangeeditor.config.uploadImgServer = baseUrl + '/uploadFile'editor.config.uploadImgHeaders = {['Access-Token']: getToken('Access-Token')};editor.config.uploadFileName = 'file'editor.config.uploadImgHooks = {before: function (xhr, editor, files) {console.log(files)// 图片上传之前触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传// return {//     prevent: true,//     msg: '放弃上传'// }},success: function (xhr, editor, result) {console.log("上传图片结果1", result)// 图片上传并返回结果，图片插入成功之后触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果// this.imgUrl = Object.values(result.data).toString()},fail: function (xhr, editor, result) {console.log(result)// 图片上传并返回结果，但图片插入错误时触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果},error: function (xhr, editor) {console.log(editor)// 图片上传出错时触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象},timeout: function (xhr, editor) {console.log(editor)// 图片上传超时时触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象},// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）customInsert: function (insertImg, result, editor) {console.log("上传图片结果2", result)console.log(editor)// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：insertImg(result.url)// result 必须是一个 JSON 格式字符串！！！否则报错}}editor.create()return editor
}

页面组件内使用

<template><div ref="editor"></div>
</template>
<script>
import { defineComponent, nextTick } from "vue";
import { createEditor } from "@/utils/wangEditer";
// 用的还是vue2的写法，vue3还是不很熟，就没有用
export default defineComponent({setup () {nextTick(() => {// ...})},data () {return {editorContent : '', // 文本内容}},methods: {// 注意要在mounted(){}中调用，或者thi.$nextTick(() => { this.initEditor() })initEditor () {let onchange = (newHtml) => {this.editorContent = newHtml;};let editor = createEditor(this.$refs["editor"], onchange);editor.txt.clear();}}
})
</script>

一个官网很详细的富文本编辑器相关推荐

Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
我为什么要做富文本编辑器【wangEditor5总结】
wangEditor 官网 www.wangEditor.com 了解最新版的编辑器 --------------------------------------------------------- ...
wangeditor 最大字数_我为什么要做富文本编辑器【wangEditor5个月总结】
本文是几年前写的,直接访问 wangEditor 官网 www.wangEditor.com 了解最新版的编辑器 ------------------------------------------- ...
10个免费的javascript富文本编辑器（jQuery and non-jQuery）
本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器简介 Javascript富文本编辑器使我们添加. ...
10个免费的jQuery富文本编辑器
原文地址:https://blog.csdn.net/lzwglory/article/details/17206689 Javascript富文本编辑器使我们添加.编辑网站中的文章更加方便和容易.这 ...
原生JS实现富文本编辑器
富文本编辑器是我们常用到的编辑器,也有很多功能完备且强大的编辑器,比如Quill Rich Text Editor.ueditor等,都是很优秀的富文本编辑器.在我们写网页的时候也会用到它,通常省事的 ...
Quill 富文本编辑器二次封装
Quill 富文本编辑器二次封装 Quill 是一个很流行的富文本编辑器,github 上 star 大约 21k.但是很少项目中使用时直接使用它,都要对其进行二次封装,你作为一个页面仔是挡不住有想法 ...
「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...
jq富文本_10个免费的jQuery富文本编辑器
Javascript富文本编辑器使我们添加.编辑网站中的文章更加方便和容易.这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以 ...

一个官网很详细的富文本编辑器

富文本编辑器-wangeditor

一个官网很详细的富文本编辑器相关推荐

最新文章

热门文章