vue中使用wangeditor的簡單實踐

wangeditor開發文檔

https://www.kancloud.cn/wangfupeng/wangeditor3/332599

1簡單操作

1.1.創建一個簡單的帶編譯器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
    </div>

    <!-- 注意， 只需要引用 JS，無需引用任何 CSS ！！！-->
    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()
    </script>
</body>
</html>

效果圖：

1.2.創建一個帶有中間隔離帶編譯器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor 菜單和編輯器區域分離</title>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="div1" class="toolbar">
    </div>
    <div style="padding: 5px 0; color: #ccc">中間隔離帶</div>
    <div id="div2" class="text"> 可使用 min-height 實現編輯區域自動增加高度
        <p>請輸入內容</p>
    </div>

    <script type="text/javascript" src="./release/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor1 = new E('#div1', '#div2')  // 兩個參數也可以傳入 elem 對象，class 選擇器
        editor1.create()
    </script>
</body>
</html>

效果圖：

1.3.1.獲取編輯器的文本

<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor</title>
</head>
<body>


	<div id="div1">
		<p>wangEditor 富文本編輯器</p>
	</div>

	<button id="btn1">獲取html</button>
	<button id="btn2">獲取text</button>

	<script type="text/javascript" src="./release/wangEditor.min.js"></script>
	<script type="text/javascript" src="./release/wangEditor-fullscreen-plugin.css"></script>
	<script type="text/javascript" src="./release/wangEditor-fullscreen-plugin.js"></script>

	<script type="text/javascript">
		var E = window.wangEditor
		var editor = new E('#div1')
		editor.create()

		document.getElementById('btn1').addEventListener('click', function () {
			// 讀取 html
			alert(editor.txt.html())
		}, false)

		document.getElementById('btn2').addEventListener('click', function () {
			// 讀取 text
			alert(editor.txt.text())
		}, false)

	</script>

</body>
</html>

效果圖：

1.3.2將輸入到編輯器中的文本動態轉換成html

<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor 菜單和編輯器區域分離</title>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 400px;
        }
		/* 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;
		}
    </style>
</head>
<body>
    <div id="div1" class="toolbar">
    </div>
    <div style="padding: 5px 0; color: #ccc">中間隔離帶</div>
    <div id="div2" class="text"> 可使用 min-height 實現編輯區域自動增加高度
        <p>請輸入內容</p>
    </div>

	<textarea id="text1" style="width:100%; height:200px;"></textarea>

	<script type="text/javascript" src="./release/jquery.js"></script>
    <script type="text/javascript" src="./release/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#div1', '#div2')  // 兩個參數也可以傳入 elem 對象，class 選擇器

		var $text1 = $('#text1')
        editor.customConfig.onchange = function (html) {
            // 監控變化，同步更新到 textarea
            $text1.val(html)
        }
        editor.create()
        // 初始化 textarea 的值
        $text1.val(editor.txt.html())


    </script>
</body>
</html>

效果圖：

1.4.獲取獲取 JSON 格式的編輯器的內容

<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor</title>
</head>
<body>


	<div id="div1">
		<p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
		<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" style="max-width:100%;"/>
	</div>
	<button id="btn1">getJSON</button>

	<script type="text/javascript" src="./release/wangEditor.min.js"></script>
	<script type="text/javascript">
		var E = window.wangEditor
		var editor = new E('#div1')
		editor.create()

		document.getElementById('btn1').addEventListener('click', function () {
			var json = editor.txt.getJSON()  // 獲取 JSON 格式的內容
			var jsonStr = JSON.stringify(json)
			alert(json)
			alert(jsonStr)
		})
	</script>
</body>
</html>

效果圖：

2.參數的配置

2.1.

自定義菜單

編輯器創建之前，可使用editor.customConfig.menus定義顯示哪些菜單和菜單的順序。注意：v3 版本的菜單不支持換行摺疊了（因爲換行之後菜單欄是在太難看），如果菜單欄寬度不夠，建議精簡菜單項。

<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor</title>
</head>
<body>


	<div id="div1">
		<p>歡迎使用 wangEditor 富文本編輯器</p>
	</div>

	<script type="text/javascript" src="./release/wangEditor.min.js"></script>

	<script type="text/javascript">
		var E = window.wangEditor
		var editor = new E('#div1')
		// 自定義菜單配置
		editor.customConfig.menus = [
			'head',
			'bold',
			'italic',
			'underline'
		]
		editor.create()
	</script>


</body>
</html>

效果圖：

編輯默認的菜單配置如下
 [
    'head',  // 標題
    'bold',  // 粗體
    'fontSize',  // 字號
    'fontName',  // 字體
    'italic',  // 斜體
    'underline',  // 下劃線
    'strikeThrough',  // 刪除線
    'foreColor',  // 文字顏色
    'backColor',  // 背景顏色
    'link',  // 插入鏈接
    'list',  // 列表
    'justify',  // 對齊方式
    'quote',  // 引用
    'emoticon',  // 表情
    'image',  // 插入圖片
    'table',  // 表格
    'video',  // 插入視頻
    'code',  // 插入代碼
    'undo',  // 撤銷
    'redo'  // 重複
]

2.2.配置字體顏色、背景色

<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor</title>
</head>
<body>


	<div id="div1">
		<p>wangEditor 富文本編輯器</p>
	</div>

	<script type="text/javascript" src="./release/wangEditor.min.js"></script>

	<script type="text/javascript">
		var E = window.wangEditor
		var editor = new E('#div1')
		// 自定義配置顏色（字體顏色、背景色）
		editor.customConfig.colors = [
			'#000000',
			'#eeece0',
			'#1c487f',
			'#4d80bf',
			'#c24f4a',
			'#8baa4a',
			'#7b5ba1',
			'#46acc8',
			'#f9963b',
			'#ffffff',
			'#nksdfn'//自定義添加
		]
		editor.create()
	</script>


</body>
</html>

效果圖：

2.3.配置表情

<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor</title>
</head>
<body>


	<div id="div1">
		<p>wangEditor 富文本編輯器</p>
	</div>

	<script type="text/javascript" src="./release/wangEditor.min.js"></script>

	<script type="text/javascript">
		var E = window.wangEditor
		var editor = new E('#div1')

		// 表情面板可以有多個 tab ，因此要配置成一個數組。數組每個元素代表一個 tab 的配置
		editor.customConfig.emotions = [
			{
				// tab 的標題
				title: '默認',
				// type -> 'emoji' / 'image'
				type: 'image',
				// content -> 數組
				content: [
					{
						alt: '[壞笑]',
						src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
					},
					{
						alt: '[舔屏]',
						src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
					}
				]
			},
			{
				// tab 的標題
				title: 'emoji',
				// type -> 'emoji' / 'image'
				type: 'emoji',
				// content -> 數組
				content: ['😀', '😃', '😄', '😁', '😆','@']//向'emoji'標題中添加一個@符號
			}
		]

		editor.create()
	</script>

</body>
</html>

效果圖：

2.4.配置字體

<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor</title>
</head>
<body>


	<div id="div1">
		<p>wangEditor 富文本編輯器</p>
	</div>

	<script type="text/javascript" src="./release/wangEditor.min.js"></script>

	<script type="text/javascript">
		var E = window.wangEditor
		var editor = new E('#div1')
		// 自定義字體
		editor.customConfig.fontNames = [
			'宋體',
			'微軟雅黑',
			'Arial',
			'Tahoma',
			'Verdana'
		]
		editor.create()
	</script>

</body>
</html>

效果圖：

3.上傳圖片

<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor</title>
</head>
<body>


	<div id="div1">
		<p>wangEditor 富文本編輯器</p>
	</div>

	<script type="text/javascript" src="./release/wangEditor.min.js"></script>

	<script type="text/javascript">
		var E = window.wangEditor
		var editor = new E('#div1')

		// 下面兩個配置，使用其中一個即可顯示“上傳圖片”的tab。但是兩者不要同時使用！！！
		 editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存圖片，可以貼截圖
		// editor.customConfig.uploadImgServer = '/upload'  // 上傳圖片到服務器

		// 隱藏“網絡圖片”tab
		//editor.customConfig.showLinkImg = false

		editor.create()
	</script>

</body>
</html>

效果圖：

vue中使用wangeditor的簡單實踐

DAPPER 事務 TRANSACTION

批量插入百萬數量級的數據到mysql的解決方案

在CentOS7系統上安裝mysql

vue中使用wangeditor的簡單實踐

java逐行讀取超大文件

使用mycat後jpa踩到的坑（記錄）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結