【wangEditor富文本编辑器】富文本三种使用方法 html使用富文本 html套vue脚手架使

前言

富文本编辑器功能是很多人都要使用的

市面上有很多的编辑器可以供选择，但是很多编辑器会有点复杂，或者文档看起来难受。

我最近做了一个需求，是需要在html文件上写富文本编辑器。

但是我看了以前用的富文本，没找到如何在html上引入使用。

就感觉不是很方便，所以后面找到了这个wangEditor富文本编辑器

发现这个非常的简单，而且有html的版本文档介绍，对新手比较友好

所以今天就专门写一个帖子记录一下三种使用方法

目录【分三种】

这帖子包含三个部分，编辑器的三个使用场景

1，纯html使用【原始html和js写页面时，要写富文本如何引入和使用】

2，纯vue使用【纯vue的使用方法】

3，html引入vue后使用方法【有时候需要我们html文件，但是里面不用原生的写，还是正常引入vue和elementul写页面，这种时候如何引入富文本】

富文本编辑器的官网，文档可以去上面看

点击这里跳转（如果点击链接失效，自行百度去找）

效果图

html版本

vue版本

纯vue版本代码

首先：下载引入组件

npm install @wangeditor/editor --save npm install @wangeditor/editor-for-vue --save

然后在main.js内引入css样式

//wangEditor富文本编辑器css样式import '@wangeditor/editor/dist/css/style.css'

代码

<template><div><p style="text-align: center; font-size: 20px; margin: 10px">富文本编辑器模板</p><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden"v-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="onCreated"/></div><el-button type="primary" @click="look">查看内容</el-button></div></template><script>import {Editor, Toolbar } from "@wangeditor/editor-for-vue";export default {components: {Editor, Toolbar },data() {return {//编辑器实例editor: null,//编辑器内容html: "<p>hello</p>",//菜单配置toolbarConfig: {},//编辑器配置editorConfig: {placeholder: "请输入内容...", //没有内容时默认提示符MENU_CONF: {// 配置上传图片uploadImage: {server: "/gzh/uploadFile", //配置图片上传地址maxFileSize: 10 * 1024 * 1024, // 10M 图片大小限制fieldName: "img", //上传类型allowedFileTypes: ["image/*"], // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []// 自定义上传参数，传递图片时需要带一些参数过去写在这。参数会被添加到 formData 中，一起上传到服务端。meta: {image_class_id: "2",file_type: "1",},// 自定义设置请求头，比如添加token之类的// headers: {//Accept: 'text/x-json',//otherKey: 'xxx'// },// 上传进度的回调函数，可以用来显示进度条onProgress(progress) {// progress 是 0-100 的数字console.log("progress", progress);},// // 单个文件上传成功之后// onSuccess(file, res) {//console.log(`${file.name} 上传成功`, res)// },// 单个文件上传失败onFailed(file, res) {console.log(`${file.name} 上传失败`, res);},// 上传错误，或者触发 timeout 超时onError(file, err, res) {console.log(`${file.name} 上传出错`, err, res);},// 插入图片到富文本编辑器回显customInsert(res, insertFn) {// res 即服务端的返回结果let url = res.data.url;let alt = res.data.name;let href = res.data.url;// 从 res 中找到 url alt href ，然后插入图片insertFn(url, alt, href);},},//配置上传视频uploadVideo: {server: "/gzh/uploadFile", //配置视频上传地址maxFileSize: 5 * 1024 * 1024, // 5M 视频大小限制fieldName: "your-custom-name", //上传类型// 最多可上传几个文件，默认为 5maxNumberOfFiles: 3,allowedFileTypes: ["video/*"], // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []// 自定义上传参数，传递图片时需要带一些参数过去写在这。参数会被添加到 formData 中，一起上传到服务端。meta: {type: 1,},// 自定义设置请求头，比如添加token之类的// headers: {//Accept: 'text/x-json',//otherKey: 'xxx'// },metaWithUrl: false, // 将 meta 拼接到 url 参数中，默认 falsewithCredentials: true, // 跨域是否传递 cookie ，默认为 false//上传之前触发onBeforeUpload(file) {// file 选中的文件，格式如 { key: file }return file;// 可以 return// 1. return file 或者 new 一个 file ，接下来将上传// 2. return false ，不上传这个 file},// 上传进度的回调函数，可以用来显示进度条onProgress(progress) {// progress 是 0-100 的数字console.log("progress", progress);},// // 单个文件上传成功之后onSuccess(file, res) {console.log(`${file.name} 上传成功`, res);},// 单个文件上传失败onFailed(file, res) {console.log(`${file.name} 上传失败`, res);},// 上传错误，或者触发 timeout 超时onError(file, err, res) {console.log(`${file.name} 上传出错`, err, res);},// 插入图片到富文本编辑器回显customInsert(res, insertFn) {console.log(res, "视频插入");// res 即服务端的返回结果// let url = res.data.url;// let poster = res.data.poster;// 从 res 中找到 url poster ，然后插入//参数url是视频地址，poster是视频封面图片，后端如果不返回，可以考虑写死一个固定的封面图insertFn(url, poster);},},},},mode: "default", // or 'simple'};},methods: {onCreated(editor) {this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错},look() {console.log(this.html);},},mounted() {// 模拟 ajax 请求，异步渲染编辑器，模仿后台拉数据回显到编辑器setTimeout(() => {this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";}, 1500);},beforeDestroy() {const editor = this.editor;if (editor == null) return;editor.destroy(); // 组件销毁时，及时销毁编辑器},};</script><style></style>

纯html版本

这里引入方式直接cdn引入了，如果需要本地版本的可以直接官网下载。最下面我会说明如何下载本地文件引入

<!DOCTYPE html><html><head><meta charset='UTF-8'><!-- 引入富文本js --><script src="/@wangeditor/editor@latest/dist/index.js"></script><!-- 引入富文本css --><link href="/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"></head><body><div id="editor—wrapper"><div id="toolbar-container"><!-- 工具栏 --></div><div id="editor-container" style="height: 300px;"><!-- 编辑器 --></div></div></body><script>const {createEditor,createToolbar} = window.wangEditorconst editorConfig = {MENU_CONF: {},placeholder: 'Type here...',onChange(editor) {// 富文本输入的内容const html = editor.getHtml()console.log(html, '内容');},}editorConfig.MENU_CONF['uploadImage'] = {server: '/gzh/uploadFile',maxFileSize: 10 * 1024 * 1024, // 10MfieldName: 'img',// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []allowedFileTypes: ['image/*'],// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。meta: {image_class_id: '2',file_type: '1'},// 自定义增加 http header// headers: {//Accept: 'text/x-json',//otherKey: 'xxx'// },// 上传进度的回调函数onProgress(progress) {// JS 语法// progress 是 0-100 的数字console.log('progress', progress)},// // 单个文件上传成功之后// onSuccess(file, res) { // JS 语法//console.log(`${file.name} 上传成功`, res)// },// 单个文件上传失败onFailed(file, res) {// JS 语法console.log(`${file.name} 上传失败`, res)},// 上传错误，或者触发 timeout 超时onError(file, err, res) {// JS 语法console.log(`${file.name} 上传出错`, err, res)},// 自定义插入图片customInsert(res, insertFn) {// JS 语法// res 即服务端的返回结果let url = res.data.urllet alt = res.data.namelet href = res.data.url// 从 res 中找到 url alt href ，然后插入图片insertFn(url, alt, href)},}const editor = createEditor({selector: '#editor-container',html: '<p><br></p>',config: editorConfig,mode: 'default', // or 'simple'})const toolbarConfig = {}toolbarConfig.excludeKeys = ['codeBlock','group-video' // 排除菜单组，写菜单组 key 的值即可]const toolbar = createToolbar({editor,selector: '#toolbar-container',config: toolbarConfig,mode: 'default', // or 'simple'})</script><style scoped>.el-table .cell {text-align: center;min-height: 40px;}#editor—wrapper {border: 1px solid #ccc;z-index: 100;/* 按需定义 */}#toolbar-container {border-bottom: 1px solid #ccc;}#editor-container {height: 500px;}</style></html>

html引入vue使用方法

这里复制的时候看一下自己的vue和elementul，axios等文件的路径，不然报错了，我这里引入的是本地的。如果没有这些本地文件的，我上传了资源可以直接下载的。

<!DOCTYPE html><html><head><meta charset='UTF-8'><!-- 先引入 Vue --><script src='vue.js'></script><!-- 引入element-UI组件 --><script src='element.js'></script><link rel='stylesheet' href='element-index.css'><!-- 引入axios --><script src='axios.min.js'></script><script src='tinymce-vue.js'></script><!-- 引入富文本的js和css --><script src="/@wangeditor/editor@latest/dist/index.js"></script><link href="/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"></head><body><div id="app"><p style="font-weight:700;text-align:center">图片设置</p><el-form ref="form" label-width="80px"><el-form-item label="顶部图片"><div id="editor—wrapper"><div id="toolbar-container"><!-- 工具栏 --></div><div id="editor-container" style="height: 300px;"><!-- 编辑器 --></div></div></el-form-item></el-form></div></body><script>new Vue({el: '#app',data() {return {topEditor: '', //<p>hello</p>form: '',box: null};},mounted() {this.editorBox()},methods: {editorBox() {let that = thisconst {createEditor,createToolbar} = window.wangEditorconst editorConfig = {MENU_CONF: {},placeholder: 'Type here...',onChange(editor) {const html = editor.getHtml()that.topEditor = html// console.log('topEditor', that.topEditor)// 也可以同步到 <textarea>},}editorConfig.MENU_CONF['uploadImage'] = {server: '/gzh/uploadFile',maxFileSize: 10 * 1024 * 1024, // 10MfieldName: 'img',// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []allowedFileTypes: ['image/*'],// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。meta: {image_class_id: '2',file_type: '1'},// 自定义增加 http header// headers: {//Accept: 'text/x-json',//otherKey: 'xxx'// },// 上传进度的回调函数onProgress(progress) {// JS 语法// progress 是 0-100 的数字console.log('progress', progress)},// // 单个文件上传成功之后// onSuccess(file, res) { // JS 语法//console.log(`${file.name} 上传成功`, res)// },// 单个文件上传失败onFailed(file, res) {// JS 语法console.log(`${file.name} 上传失败`, res)},// 上传错误，或者触发 timeout 超时onError(file, err, res) {// JS 语法console.log(`${file.name} 上传出错`, err, res)},// 自定义插入图片customInsert(res, insertFn) {// JS 语法// res 即服务端的返回结果let url = res.data.urllet alt = res.data.namelet href = res.data.url// 从 res 中找到 url alt href ，然后插入图片insertFn(url, alt, href)},}const editor = createEditor({selector: '#editor-container',html: '<p><br></p>',config: editorConfig,mode: 'default', // or 'simple'})// editor.setHtml(that.topEditor) //回显const toolbarConfig = {}toolbarConfig.excludeKeys = ['codeBlock','group-video' // 排除菜单组，写菜单组 key 的值即可]const toolbar = createToolbar({editor,selector: '#toolbar-container',config: toolbarConfig,mode: 'default', // or 'simple'})},},})</script><style scoped>.el-table .cell {text-align: center;min-height: 40px;}#editor—wrapper {border: 1px solid #ccc;z-index: 100;/* 按需定义 */}#toolbar-container {border-bottom: 1px solid #ccc;}#editor-container {height: 500px;}</style></html>

这种方式有一个回显的问题，可以这样写

直接先触发回显的请求，拿到后台的数据后，再调用创建富文本的方法就可以了。

然后这里是用来回显上去的。

本地引入富文本的方式

有时候有的人可能需要的是本地的文件，因为稳定一点，cdn测试是还行，但是上线后怕网站崩了连带这你的项目也出问题。这里讲一下这个富文本如何拿到文件。很简单，其实文档内有写的。

照抄就行，就用我上面的那个vue的npm下载一下，然按步骤把文件拿出来，引入到你的项目

还有一种办法就是直接cdn的那个地址输出网址，然后查看源代码，直接复制出来也可以使用

html套用vue-elementul-axios模板下载

这个模板我也整体上传到csdn资源上了。想要的也可以直接去下一个

点击这里下载资源

【wangEditor富文本编辑器】富文本三种使用方法 html使用富文本 html套vue脚手架使用富文本 vue使用富文本【简单易用 复制即用】