wangEditor3使用

最近做个社区。刚好用到这个插件就写一下

 

插入代码

不理解为什么作者把代码类型选择给去掉了，所以只能自己插入代码选择了

打开源码 2058 行，插入下面语句

this.codetype = editor.customConfig.codeType != null ? editor.customConfig.codeType.type : null;

你将会看到这样

然后滚到 Code的_createPanel函数，大概在2100行，插入一下代码

			var select = "";
			if (editor.customConfig.codeType != null) {
				var title = editor.customConfig.codeType.title == null ? "请选择代码类型:" : editor.customConfig.codeType.title;
				var select = "
" + title + "";
				for (var i = 0; i < _this.codetype.length; i++) {
					select = select + "" + _this.codetype[i] + "";
				}
				select = select + "
";
			}

修改生成模板

tpl: '
\n' + select + '' + value +
							'\n                        
\n                            \u63D2\u5165\n                        
\n                    
',

你将会看到

继续翻到 Code的_insertCode函数，修改为

		_insertCode: function _insertCode(value) {
			var _this = this;
			var editor = this.editor;
			var val = _this.codetype != null ? $('.codeType select').val() : "";
			editor.cmd.do('insertHTML', '
' + value + '

');
		},

它是这样的

ok，接下来使用前配置一下

		var E = window.wangEditor;
		var editor = new E('#div1')
		
		editor.customConfig.codeType={
			title:"选择代码类型:",
			type:[
					"c++","php","c#","java"
				]
		};
		
		editor.create();

然后是浏览结果

 

上传图片

 

先来一段简单的后端代码~

0,'data'=>$urls));
}else{
	echo json_encode(array('errno'=>1));
}

 

关于配置 editor.customConfig.uploadFileName

不知道是不是只有我遇到

选择多张图片上传的时候只能得到最后一张。

经检查是FormData插入数据时候使用同一个名字，然后文件覆盖了

所以。打开源码。。拉到大概 4288行的样子，修改为下面的样子就可以上传多张了

当然你可以不配置 editor.customConfig.uploadFileName

此时你就需要配置 editor.customConfig.uploadImgHooks 的 before

把文件名改为单次上传不重复就行

其他的回调只需要看官方文档就OK

 

表情

http://www.dtj.ink/wangEditor3Use/emotions.min.js

官方文档上放的2个链接整理合成的表情js，你只需要下面这样就行

		editor.customConfig.emotions = [{
				title: "微博表情",
				type: "image",
				content: weibo.toWangEditor()
			},
			{
				title: '新浪表情',
				type: 'image',
				content: xinlang.toWangEditor()
			}
		]

 

---

更新：

效果链接：http://www.dtj.ink/wangEditor3Use/
下载：https://download.csdn.net/download/qq_17813937/11215150

发现一个bug，如果当前行已经有字符，此时插入代码第一行不会计入
滚动到2142行的样子
把原来的
_this._insertCode(text);
修改为
_this._insertCode('\n'+text);

如果当前行没有任何字符，会在代码空一行，我认为这无伤大雅