WangEdtior官网，提供了vue2、vue3的安装方式>>

原生js使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"><script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script><style>#editor—wrapper {border: 1px solid #ccc;z-index: 100;/* 按需定义 */width: 800px;margin: 10px auto;}#toolbar-container {border-bottom: 1px solid #ccc;}#editor-container {height: 150px;}p {/* 将p的margin改为0, 不然会出现改了#editor-container的高度，编辑器已经足够放下内容了，但是仍然会有滚动条出现的问题 */margin: 0 !important;line-height: 1.3em;}.w-e-scroll>div:first-child {padding-top: 15px; /* 将输入起始位置与“请输入内容对齐” */}</style>
</head><body><div id="editor—wrapper"><!-- 工具栏 --><div id="toolbar-container"></div><!-- 编辑器 --><div id="editor-container"></div></div></body>
<script>const { createEditor, createToolbar } = window.wangEditor/* 编辑器配置 */const editorConfig = {placeholder: '请输入内容...',onChange(editor) {const html = editor.getHtml()console.log('editor content', html)}}/* 编辑器 */const editor = createEditor({selector: '#editor-container',html: '<p><br></p>',config: editorConfig,mode: 'default', // or 'simple'})/* 工具栏配置 */const toolbarConfig = {}/* 工具栏 */const toolbar = createToolbar({editor,selector: '#toolbar-container',config: toolbarConfig,mode: 'default', // or 'simple'})
</script></html>

vue2

安装wangEditor

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

ArticleWang.vue

<style>
p {/* 将p的margin改为0, 不然会出现改了#editor-container的高度，编辑器已经足够放下内容了，但是仍然会有滚动条出现的问题 */margin: 0 !important;line-height: 1.3em;
}.w-e-scroll>div:first-child {padding-top: 15px;/* 将输入起始位置与“请输入内容对齐” */
}
</style>
<template><div style="border: 1px solid red;padding: 10px;"><!-- 按钮组 --><div style="text-align: center;"><el-button type="success" plain @click="getHtml">getHtml</el-button><el-button type="success" plain @click="setHtml">setHtml</el-button><el-button type="success" plain @click="resetHtml">resetHtml</el-button><el-button type="success" plain @click="getText">getText</el-button><el-button type="success" plain @click="focus">focus</el-button><el-button type="success" plain @click="saveHtml">saveHtml</el-button></div><div style="text-align: center;margin-top: 10px;"><el-button type="success" plain @click="playToolbar">playToolbar</el-button><el-button type="success" plain @click="enableEdit">enableEdit</el-button></div><div style="text-align: center;margin-top: 10px;"><el-button type="success" plain @click="getUploadImageMenuConfig">getUploadImageMenuConfig</el-button></div><!-- 编辑器 --><div style="border: 1px solid #ccc; width: 800px;margin: 10px auto 0;"><!-- 工具栏 --><Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" /><!-- 编辑器 --><Editor style="height: 310px;" v-model="htmlContent" :defaultConfig="editorConfig" :mode="mode"@onCreated="onCreated" @onChange="onChange"/></div><div style="width: 800px;margin: 10px auto;" v-html="htmlContent"></div></div>
</template><script>import { Editor, Toolbar } from '@wangeditor/editor-for-vue'/* 可以用来获取toolbar */
import { DomEditor } from '@wangeditor/editor'/* 引入wangEditor的样式 */
import '@wangeditor/editor/dist/css/style.css'import axiosInstance from '@/utils/request'export default {name: 'ArticleWang',components: {Editor, Toolbar},data() {return {editor: null,                 /* 编辑器实例，在编辑器创建完成时，赋值 */htmlContent: '<p>hello</p>',  /* 编辑器内容 */toolbarConfig: {              /* 工具栏配置 */excludeKeys: ['group-video'  // 排除视频这个菜单]},editorConfig: {               /* 编辑器配置 */placeholder: '请输入内容...',// maxLength: 50, // 限制长度50MENU_CONF: {emotion: { // 表情菜单emotions: '												


											

WangEdtior富文本编辑器相关推荐
	

    
								
  1. .net下的富文本编辑器FCKeditor的配置方法（图）原创
		
    .net下的富文本编辑器FCKeditor的配置方法(图)原创 FCKeditor是一款开源的富文本编辑器,几乎支持所有流行的Web开发语言,版本稳定,用户多,可配置性好. 以前做Java和php的时 ...
    
		
    2. 
						
  2. jeecg富文本编辑器增加字体(仿宋)
		
    jeecg富文本编辑器增加字体(仿宋) 温馨提示:jeecg 提供了 uedit 富文本的实现,如下针对的是 uedit 增加仿宋字体示例. 主要修改三个文件:plug-in\ueditor\uedi ...
    
		
    3. 
						
  3. React +antd +wangEditor 富文本编辑器
		
    1. 安装 npm i wangeditor --save 2. 引入: import E from 'wangeditor'; 3. 渲染: <div id="div1"& ...
    
		
    4. 
						
  4. html 组件化 编辑器,vue.js组件化使用百度富文本编辑器（一）
		
    注意: 本文采用的编辑器为:idea 1.下载百度富文本编辑器,地址:https://ueditor.baidu.com/website/download.html#ueditor 2.加入到stat ...
    
		
    5. 
						
  5. 阿里云oss云存储图片上传在wangEditor富文本编辑器上的集成
		
    调用方式 html: <textarea name="newsinfo_content" id="editor" style="height:5 ...
    
		
    6. 
						
  6. 11. Django 引入富文本编辑器KindEditor
		
    打开微信扫一扫,关注微信公众号[数据与算法联盟] 转载请注明出处:http://blog.csdn.net/gamer_gyt 博主微博:http://weibo.com/234654758 Gith ...
    
		
    7. 
						
  7. kind富文本编辑器_富文本编辑器原理探索
		
    经常在做企业网站的管理系统的时候需要用到富文本编辑器,之前基本上都是直接去 npm 或者 github 上面搜找一些排名考前或者 readme 写的好的库,直接拿来用.万变不离其宗,是时候探索下本质了 ...
    
		
    8. 
						
  8. html自定义实现文本编辑器,自定义开发富文本编辑器（Javascript实现点击插入内容到textarea光标处）...
		
    富文本编辑器相信很多程序员都用过,但是如何自己制作一个仿富文本的编辑器来解决一些简单的或自定义的需求呢?下面给大家共享一个使用JavaScript实现在textarea光标处插入指定文本内容以及字符串 ...
    
		
    9. 
						
  9. Html引入百度富文本编辑器ueditor
		
    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 一首歌的时间看懂荷兰三色旗问题
		
    2. 
						
  2. learnByWork
		
    3. 
						
  3. 防火墙（13）——实现路由转发功能（1）
		
    4. 
						
  4. mycat mysql端口多少_mycat 9066管理端口 常用命令
		
    5. 
						
  5. .net core ——利用 roslyn 编译C#代码
		
    6. 
						
  6. Android Studio编译后运行按钮还是灰色的解决方法
		
    7. 
						
  7. 面试题，如何改进一款产品
		
    8. 
						
  8. Magento: 友好显示库存 User friendly product availability message in Magento
		
    9. 
						
  9. 【华为云技术分享】《跟唐老师学习云网络》—我的网络概念
		
    10. 
						
  10. object-C控制语句
		
    11. 
						
  11. for update行级锁的作用
		
    12. 
						
  12. 函数03 - 零基础入门学习C语言34
		
    13. 
						
  13. 3）Thymeleaf th:* 设置/修改属性值详解
		
    14. 
						
  14. 清华谭浩强编著的c语言程序设计教程,清华大学谭浩强C语言程序设计教程第3版 (9).doc...
		
    15. 
						
  15. html钢琴谱播放器,蛐蛐五线谱播放器
		
    16. 
						
  16. 产品经理，没有那么牛逼
		
    17. 
						
  17. C++博客十八罗汉造像
		
    18. 
						
  18. POI-HSSFWorkbook合并单元格边框及文字居中问题
		
    19. 
						
  19. pytorch-YOLOv3移植到寒武纪
		
    20. 
						
  20. 看了后非常震撼---骗局
		
    21. 
		

	


热门文章
	

    
									
  1. Linux的标准输出  标准错误  标准输入 重定向
			
    2. 
						
  2. 半年说出自己想说的英语
			
    3. 
						
  3. 影响网站收录排名的隐患因素
			
    4. 
						
  4. 推荐系统的常见推荐算法的性能比较
			
    5. 
						
  5. 数据结构对齐规则（C语言）
			
    6. 
						
  6. IEEE latex模版添加表格
			
    7. 
						
  7. Android plurals
			
    8. 
						
  8. 更换服务器 百度抓取显示有跳转,关于百度抓取诊断有跳转的问题！求各位SEO高手帮帮我！(悬赏1元) - 搜外SEO问答...
			
    9. 
						
  9. Vue 日志监控自动滚屏
			
    10. 
						
  10. 顺序表讲解和顺序表实现增删查改
			
    11.