wangEditor富文本编辑器,带预览功能

wangEditor基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费

更多配置请查阅官网文档:https://www.kancloud.cn/wangfupeng/wangeditor3/335782

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="hjl">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>wangEditor</title>
  <!--预览样式-->
  <style>
	
		#previewbox {
			position: fixed;
			z-index: 999999999;
			display: none;
			top: 0px;
			bottom: 100px;
			width: 300px;
			height: 1000px;
			background: url(../img/phone.png) no-repeat;
			margin: 0px 650px;
			background-size: contain;
			padding: 120px 25px 116px 25px;
		}

		.preview-title{
			font-size: 15px; font-weight: 700;
		}
		.preview-author{
			color: rgb(96, 127, 166); font-size: 12px;cursor:pointer;
		}
		.preview-date{
			color: rgb(140, 140, 140); font-size: 12px; font-style: normal;
		}
		.preview-content{
			height: 100%; padding-right: 0px;overflow-y: scroll;overflow-x: hidden;
		}
		.preview-close{
			top: 0px; width: 50px; height: 50px; right: -17px; font-size: 30px; font-weight: 700; position: absolute; cursor: pointer;
		}
		.preview-content::-webkit-scrollbar{
			width:2px;
		}

  </style>
	<!--只需要导入js  可以到官网下载对应的版本-->
	<script src="wangEditor.js" type="text/javascript"></script>
 </head>
 <body>

<div id="wangEditor"></div>
<!-- 预览 -->
<button type="button" class="btn btn-primary" id="viewButton"><i class="fa fa-eye"></i> 预览</button>
<div id="previewbox">
    <div id="previewContent" class="preview-content" style="height:50%"></div>
    <div onclick = "previewboxClose()" class="preview-close">X</div>
</div>

<script type="text/javascript">

    var E = window.wangEditor
    var editor = new E('#wangEditor');
	//定义上传图片名
    editor.customConfig.uploadFileName = 'file'
    // 配置服务器端地址上传图片地址
	/** 返回格式
		{
			// errno 即错误代码,0 表示没有错误。
			//       如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
			"errno": 0,

			// data 是一个数组,返回若干图片的线上地址
			"data": [
				"图片1地址",
				"图片2地址",
				"……"
			]
		}

	**/
    editor.customConfig.uploadImgServer = "/upload",
    editor.create();

	function previewboxClose(){
        $("#previewbox").hide();
        $("#previewContent").html("");
    }

	$("#viewButton").click(function(){
		previewboxShow();
	});

	function previewboxShow(){
        //获取输入的文本代码
		var sHTML = editor.txt.html();
		//console.log(sHTML);
        $("#previewContent").html(sHTML);
        $("#previewbox").show();
    }

	
</script>

 </body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章