Vue富文本

Vue富文本

Vue富文本

1.wangEditor

感觉不是很美观，但是基本功能还是有的

官网：.html

1.1如果使用了脚手架，安装了node,下载该插件

npm i wangeditor -S

1.2在页面引用,直接上代码了

<template><div id="wangeditor"><div ref="editorElem" style="text-align:left;"></div><el-button @click="handleConsole">尝试</el-button><div v-html="editorContent"></div></div>
</template><script>
import E from "wangeditor";
export default {name: '',data() {return {editor: null,editorContent: ''};},methods: {handleConsole:function(){console.log(this.editorContent)}},mounted(){this.editor = new E(this.$refs.editorElem);// 编辑器的事件，每次改变会获取其html内容this.hange = html => {this.editorContent = html;};  this.us = [// 菜单配置'head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'justify', // 对齐方式'quote', // 引用'emoticon', // 表情'image', // 插入图片'table', // 表格'code', // 插入代码'undo', // 撤销'redo' // 重复];this.editor.customConfig.uploadImgShowBase64 = true// 使用 base64 保存图片// this.editor.customConfig.uploadImgServer = '/upload' 这是上传图片到服务器ate(); // 创建富文本实例  },
}
</script><style scoped></style>

效果图

1.3如果没有用脚手架

<div id="editor"></div><script type="text/javascript" src=".min.js"></script><script type="text/javascript">var E = window.wangEditorvar editor = new E('#editor')// 或者 var editor = new E( ElementById('editor') )ate()
</script>