HTML富文本编辑器wangEditor的使用

最新推荐文章于 2024-10-11 14:49:00 发布
最新推荐文章于 2024-10-11 14:49:00 发布
阅读量4.8k 收藏 9
点赞数 2
分类专栏： 前端 文章标签： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34845394/article/details/85130132
版权

文章目录

官网

http://www.wangeditor.com/
法官方文档已经讲得很清楚了，我这里只贴出代码，方便以后自己粘贴复制用，有兴趣的可以去看看官网。

项目结构

│  rich_text.html
│
├─css
│      wangEditor-fullscreen-plugin.css
│
└─js
        wangEditor-fullscreen-plugin.js

源码

代码很简单，注释也很详细，直接看就好了。

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<!--适配手机-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>富文本编辑器</title>
	<!-- 引入全屏 CSS，如不需要全屏功能可注释掉 -->
	<link rel="stylesheet" href="css/wangEditor-fullscreen-plugin.css" />
	<style>
		/* table 样式 */
		table {
			border-top: 1px solid #ccc;
			border-left: 1px solid #ccc;
		}

		table td,
		table th {
			border-bottom: 1px solid #ccc;
			border-right: 1px solid #ccc;
			padding: 3px 5px;
		}

		table th {
			border-bottom: 2px solid #ccc;
			text-align: center;
		}

		/* blockquote 样式 */
		blockquote {
			display: block;
			border-left: 8px solid #d0e5f2;
			padding: 5px 10px;
			margin: 10px 0;
			line-height: 1.4;
			font-size: 100%;
			background-color: #f1f1f1;
		}

		/* code 样式 */
		code {
			display: inline-block;
			*display: inline;
			*zoom: 1;
			background-color: #f1f1f1;
			border-radius: 3px;
			padding: 3px 5px;
			margin: 0 3px;
		}

		pre code {
			display: block;
		}

		/* ul ol 样式 */
		ul,
		ol {
			margin: 10px 0 10px 20px;
		}

		#editor .w-e-text-container {
			height: 800px;
		}
	</style>
</head>

<body>
	<div id="editor">

	</div>

	<div id="code">

	</div>

	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
	<!--全屏使用 JS，如不需要全屏功能可注释掉-->
	<script type="text/javascript" src="js/wangEditor-fullscreen-plugin.js"></script>
	<script type="text/javascript">
		var E = window.wangEditor;
		var editor = new E('#editor')

		//配置信息
		var config = editor.customConfig;

		// 自定义配置颜色（字体颜色、背景色）
		config.colors = [
			'#000000',
			'#eeece0',
			'#1c487f',
			'#4d80bf',
			'#c24f4a',
			'#8baa4a',
			'#7b5ba1',
			'#46acc8',
			'#f9963b',
			'#ffffff'
		]

		//lang配置项配置多语言
		config.lang = {
			'设置标题': 'title',
			'正文': 'p',
			'链接文字': 'link text',
			'链接': 'link',
			'上传图片': 'upload image',
			'上传': 'upload',
			'创建': 'init',
			'设置列表': 'set something'
			// 还可自定添加更多
		}

		// 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
		config.emotions = [{
			// tab 的标题
			title: '表情',
			// type -> 'emoji' / 'image'
			type: 'image',
			// content -> 数组
			content: [{
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif",
				alt: "[草泥马]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif",
				alt: "[神马]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif",
				alt: "[浮云]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif",
				alt: "[给力]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif",
				alt: "[围观]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif",
				alt: "[威武]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif",
				alt: "[熊猫]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif",
				alt: "[兔子]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif",
				alt: "[奥特曼]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif",
				alt: "[囧]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif",
				alt: "[互粉]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif",
				alt: "[礼物]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ac/smilea_thumb.gif",
				alt: "[呵呵]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0b/tootha_thumb.gif",
				alt: "[嘻嘻]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/laugh.gif",
				alt: "[哈哈]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/14/tza_thumb.gif",
				alt: "[可爱]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/kl_thumb.gif",
				alt: "[可怜]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a0/kbsa_thumb.gif",
				alt: "[挖鼻屎]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f4/cj_thumb.gif",
				alt: "[吃惊]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/shamea_thumb.gif",
				alt: "[害羞]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c3/zy_thumb.gif",
				alt: "[挤眼]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/29/bz_thumb.gif",
				alt: "[闭嘴]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/71/bs2_thumb.gif",
				alt: "[鄙视]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/lovea_thumb.gif",
				alt: "[爱你]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9d/sada_thumb.gif",
				alt: "[泪]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/19/heia_thumb.gif",
				alt: "[偷笑]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8f/qq_thumb.gif",
				alt: "[亲亲]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/b6/sb_thumb.gif",
				alt: "[生病]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/mb_thumb.gif",
				alt: "[太开心]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/17/ldln_thumb.gif",
				alt: "[懒得理你]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/98/yhh_thumb.gif",
				alt: "[右哼哼]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/zhh_thumb.gif",
				alt: "[左哼哼]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a6/x_thumb.gif",
				alt: "[嘘]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/cry.gif",
				alt: "[衰]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/73/wq_thumb.gif",
				alt: "[委屈]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9e/t_thumb.gif",
				alt: "[吐]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f3/k_thumb.gif",
				alt: "[打哈欠]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/27/bba_thumb.gif",
				alt: "[抱抱]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7c/angrya_thumb.gif",
				alt: "[怒]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/5c/yw_thumb.gif",
				alt: "[疑问]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a5/cza_thumb.gif",
				alt: "[馋嘴]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/88_thumb.gif",
				alt: "[拜拜]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/e9/sk_thumb.gif",
				alt: "[思考]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/24/sweata_thumb.gif",
				alt: "[汗]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7f/sleepya_thumb.gif",
				alt: "[困]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6b/sleepa_thumb.gif",
				alt: "[睡觉]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/90/money_thumb.gif",
				alt: "[钱]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0c/sw_thumb.gif",
				alt: "[失望]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/cool_thumb.gif",
				alt: "[酷]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8c/hsa_thumb.gif",
				alt: "[花心]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/49/hatea_thumb.gif",
				alt: "[哼]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/36/gza_thumb.gif",
				alt: "[鼓掌]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/dizzya_thumb.gif",
				alt: "[晕]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1a/bs_thumb.gif",
				alt: "[悲伤]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/62/crazya_thumb.gif",
				alt: "[抓狂]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/h_thumb.gif",
				alt: "[黑线]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/yx_thumb.gif",
				alt: "[阴险]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/nm_thumb.gif",
				alt: "[怒骂]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/hearta_thumb.gif",
				alt: "[心]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ea/unheart.gif",
				alt: "[伤心]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/pig.gif",
				alt: "[猪头]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d6/ok_thumb.gif",
				alt: "[ok]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/ye_thumb.gif",
				alt: "[耶]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/good_thumb.gif",
				alt: "[good]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c7/no_thumb.gif",
				alt: "[不要]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d0/z2_thumb.gif",
				alt: "[赞]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/come_thumb.gif",
				alt: "[来]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/sad_thumb.gif",
				alt: "[弱]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/lazu_thumb.gif",
				alt: "[蜡烛]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/cake.gif",
				alt: "[蛋糕]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d3/clock_thumb.gif",
				alt: "[钟]"
			}, {
				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1b/m_thumb.gif",
				alt: "[话筒]"
			}]
		}]

		editor.customConfig.onchange = function (html) {
			// html 即变化之后的内容
			$('#code').text(html)
		}

		// 或者 var editor = new E( document.getElementById('editor') )
		editor.create();

		//富文本编辑器wangEditor的全屏插件，适用于V3,在wangEditor的create方法调用后，再调用插件的初始化方法
		E.fullscreen.init('#editor');
	</script>
</body>

</html>

全屏插件

CSS

wangEditor-fullscreen-plugin.css

@CHARSET "UTF-8";

.w-e-toolbar {
	flex-wrap: wrap;
	-webkit-box-lines: multiple;
}

.w-e-toolbar .w-e-menu:hover{
	z-index: 10002!important;
}

.w-e-menu a {
	text-decoration: none;
}

.fullscreen-editor {
	position: fixed !important;
	width: 100% !important;
	height: 100% !important;
	left: 0px !important;
	top: 0px !important;
	background-color: white;
	z-index: 9999;
}

.fullscreen-editor .w-e-text-container {
	width: 100% !important;
	height: 95% !important;
}

._wangEditor_btn_fullscreen{
	color: #999;
}

._wangEditor_btn_SourceCode{
	color: #999;
}

JS

wangEditor-fullscreen-plugin.js

window.wangEditor.fullscreen = {
	// editor create之后调用
	init: function(editorSelector) {
		//添加查看全屏按钮
		$(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_fullscreen" href="###" οnclick="window.wangEditor.fullscreen.toggleFullscreen(\'' + editorSelector + '\')">全屏</a></div>');
		//添加查看源码按钮
		$(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_SourceCode" href="###" οnclick="window.wangEditor.fullscreen.toggleSourceCode(\'' + editorSelector + '\')">源码</a></div>');

	},
	toggleFullscreen: function(editorSelector) {
		$(editorSelector).toggleClass('fullscreen-editor');
		if($(editorSelector + ' ._wangEditor_btn_fullscreen').text() == '全屏') {
			$(editorSelector + ' ._wangEditor_btn_fullscreen').text('退出全屏');
		} else {
			$(editorSelector + ' ._wangEditor_btn_fullscreen').text('全屏');
		}
	},
	toggleSourceCode: function(editorSelector) {
		$('#code').text(editor.txt.html());
	}
};

这两个是直接使用的CDN

  • jquery.min.js

  • wangEditor.min.js

效果

在这里插入图片描述

不敲代码的攻城狮
关注
专栏目录
前端html使用wangEditor富文本编辑器
slow097的博客
08-31 961
基本使用 1.下载 CDN 链接 https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js 2.使用 js 外链引入 <div id="div1"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div> <!-- 引入 wangEditor.min.js --> <script typ
在html中加入wangEditor富文本控件
JackWu blog
11-08 1788
1，下载文件 https://github.com/wangfupeng1988/wangEditor/releases 进入release文件夹下找到wangEditor.js或者wangEditor.min.js即可 2，demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
HTML——实现富文本编辑器wangEditor的使用
L19541216的博客
05-05 8732
HTML——实现富文本编辑器wangEditor的使用 文章目录HTML——实现富文本编辑器wangEditor的使用一.导入wangEditor.JS二.直接引用文档链接三.包管理工具（node和bower 的下载）Node.js下载安装及环境配置bower的安装和使用引入实现 背景：最近在写小说项目，关于发布文章需要用到富文本编辑器，由于还没学到Vue，最实用的还是用wangEditor富文本编辑器。 官方文档：http://www.wangeditor.com/ 使用手册：创建一个编辑器 · wang
富文本编辑器wangEditor的基本使用
最新发布
weixin_47683973的博客
10-11 662
这里面我是没有全局注入，因为富文本编辑器用的地方也不多，没必要全局注入，有需要的便宜也可以自行封装，上面是简单的封装标题的一些小功能，这里面Boot.registerMenu(insertField1Conf)是单独引入，官网上面也有多个引入的方法，可以去官网直接cv,然后效果图如下。，如果要更深层的去使用，可以去看里面的高级功能，好的。不多说了，开始使用，项目还是老套的vue2,先去使用npm去下载编辑器。官网上面是有教怎么使用的，如果用的是js就是我写的这种，ts的话官网也有，记得看清楚，否则会报错。
wangEeditor写入HTML,wangEditor富文本编辑器基本使用方法
weixin_32821811的博客
06-05 1784
1.用script标签引入wangEditor.js2.初始化编辑器 代码如下//编辑器var E = window.wangEditor;var commentDiv = new E('#commentDiv');//开启本地上传图片选项commentDiv.customConfig.uploadImgServer = '${ctx}/WangUpload'; //上传URLcommentDi...
【wangEditor富文本编辑器】富文本三种使用方法，html使用富文本，html套vue脚手架使用富文本，vue使用富文本【简单易用，复制即用】
seeeeeeeeeee的博客
10-07 3817
富文本编辑器功能是很多人都要使用的市面上有很多的编辑器可以供选择，但是很多编辑器会有点复杂，或者文档看起来难受。我最近做了一个需求，是需要在html文件上写富文本编辑器。但是我看了以前用的富文本，没找到如何在html上引入使用。就感觉不是很方便，所以后面找到了这个wangEditor富文本编辑器发现这个非常的简单，而且有html的版本文档介绍，对新手比较友好所以今天就专门写一个帖子记录一下三种使用方法。
关于 WangEditor 富文本编辑器中 html 内容的设置与获取以及 Html 中 doctype的意义
本博客记录了从2014年以来在工作学习中遇到的技术问题、解决方法以及部分个人人生经历、经验等内容。
04-07 422
wangEditor的官网上有对设置内容和获取内容的说明，见链接：https://www.kancloud.cn/wangfupeng/wangeditor3/335775 但是在操作时碰到了其它的问题，上述文档中的设置内容片段代码截图如下：虽然整个detail里的内容都像文档上一样，展现了出来，但是设置出来的内容如上图，所有的源码以字符形式展现出来了。设置的代码中的内容是实体化的字符。
特别好用的前端html富文本编辑器wangEditor个人使用案例
weixin_43837660的博客
11-10 1421
基本满足了项目需求，特别是图片大小手动拉伸大小特别友好，现在将做的demo小案例贴出来，仅供大家参考~（后附全部源码，即开即用）因公司项目后台管理平台需要，找了好多前端富文本编辑器感觉都差强人意，特别是几年不更新的百度富文本编辑器，各种爆红，最后发现了。
H5移动端，富文本编辑器 wangEditor
12-20
移动端富文本编辑器，非常好用，后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器，非常好用，后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器，非常好用，后台...
移动端html富文本编辑器,PC/移动端的富文本编辑器wangEditor的使用
weixin_42502448的博客
06-18 2610
在刚开发的项目之中，在移动端/PC端，需要一个富文本编辑器，要求：简单-轻量-实用。比较了几种编辑器后，选择了wangEditor。移动端的截图(手机效果好些)：image.pngPC端的截图：image.png；在wangEditor的官网(http://www.wangeditor.com/)中，提供了一些常用的工具，可以按需来配置，还可以自己二次封装：image.png。先说配置：在PC端直...
HTML前端wangEditor富文本编辑器demo（jQuery）
02-14
wangEditor就是这样一个强大的富文本编辑器，它专为JavaScript和jQuery设计，同时也能很好地融入Vue等现代前端框架。本示例是一个基于jQuery的wangEditor应用，具有丰富的功能，包括图片可拖拽调整大小，以及方便地...
wangEditorhtml富文本编辑器开源版 v1.3.13.rar
07-10
wangEditorhtml编辑器由CSS和Js共同开发，与国产编辑器 百度ueditor 和 kindeditor 相比，它轻量、易用、UI设计精致漂亮。与国外编辑器 bootstrap-wysiwyg 和 simditor 相比，它文档易读、交流方便，更接地气。 　　它还会根据使用者的反馈不断完善，未来将支持移动版。
轻量富文本编辑器wangEditor集成源码
02-22
《轻量富文本编辑器wangEditor集成源码详解》 wangEditor是一款优秀的开源富文本编辑器，因其轻量级、易用性和强大的功能而在开发者中备受青睐。它提供了丰富的API和自定义配置，使得在各种应用场景下都能灵活集成...
html——简单文章发布html页面及富文本编辑器wangEditor的使用
知北行的博客
04-22 8043
实现结果截图： 说明： 1、主要组件使用了bootstrap4，富文本编辑器使用wangEditor，在使用前需要下载wangEditor的js文件，地址参考 wangEditor3使用手册 2、所用图片就导航栏的两张，可以自己换成自己的，这里就不贴了。 3、对于简单的文本编辑需求，wangEditor3使用简单，上手快，推荐使用。 下面直接上代码： <!DOCTYPE ...
wangEeditor写入HTML,轻量级富文本编辑器wangEditor结合vue使用方法示例
weixin_30991735的博客
06-05 1071
1、安装使用npm下载： `npm install wangeditor`2、 创建实例(1)基本用法：import e from 'wangeditor'export default {name: 'editor',mounted () {var editor = new e('#editor')editor.customconfig.onchange = (html) => {this....
java 图片上传控件_java+Word图片上传控件
weixin_39713538的博客
02-16 230
这种方法是servlet，编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码：(上传至ROOT/lqxcPics文件夹下)pagecontentType="text/html;charset=utf-8"%>pageimport="Xproer.*"%>pageimport="org.apache.c...
wangeditor v5 自定义html样式
Score666的博客
01-26 1577
由于wangeditor的设计，保存下来的html是无样式的，需要自己自定义，下面给出本人的自定义样式供参考（在官网的基础上进行改进）不是专业写前端的，若有写的不好的请见谅。
文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl + U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法
weixin_54048131的博客
03-27 961
wangEditor5教程06-展示HTML无样式怎么办_哔哩哔哩_bilibili
wangeditor生成带样式的html,wangEditor 粘贴网页代码，被解析成具体样式
weixin_42398050的博客
06-09 1942
能发图片就好了。那我详细说一下是怎么出现的吧！在其他网页上找一个textarea或者input text标签(不是文本)，然后复制到编辑器中去。编辑器中显示的是解析过后的，也就是长方形元素。正确的显示应该是文本，或者直接不能复制进去。下面是编辑器处理粘贴内容的源码，被我稍稍修改了下。没有出现上面所述问题。希望作者指导下，这样修改会不会带来其他问题。谢谢作者大大了！// 处理粘贴的内容functio...
vue富文本编辑器wangeditor使用
07-28
WangEditor 是一款基于 Vue.js 的富文本编辑器，它提供了丰富的功能和良好的用户体验。下面是使用 WangEditor 的基本步骤： 1. 安装 WangEditor：你可以通过 npm 或者 yarn 来安装 WangEditor。在项目的根目录下执行以下命令： ``` npm install wangeditor --save ``` 或者 ``` yarn add wangeditor ``` 2. 在需要使用编辑器的 Vue 组件中引入 WangEditor： ```javascript import WangEditor from 'wangeditor' ``` 3. 在 Vue 组件的 `mounted` 钩子函数中初始化和配置 WangEditor： ```javascript mounted() { const editor = new WangEditor("#editor") editor.config.uploadImgServer = '/upload' // 配置图片上传的接口地址 editor.create() } ``` 上述代码中的 `#editor` 是一个 HTML 元素的 ID，用来指定编辑器的容器。 4. 在 HTML 模板中添加编辑器的容器： ```html <div id="editor"></div> ``` 至此，你已经成功地集成了 WangEditor 富文本编辑器到你的 Vue 项目中。你可以通过配置 `editor.config` 对编辑器进行更多的个性化设置，比如自定义菜单、图片上传等功能。 注意：在使用 WangEditor 之前，请确保你已经正确引入并配置了 Vue.js。同时，为了使图片上传功能正常工作，你需要在后端实现一个图片上传接口，并将接口地址配置到 `editor.config.uploadImgServer` 中。 更多关于 WangEditor 的使用方法和配置，请参考官方文档：https://www.wangeditor.com/doc/
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值