主题: 在做个查找替换的功能,只实现了IE的,非IE搞不出来,希望高手能指引一下
作者: ajsong, 发布日期: 2012-05-14 15:55:35, 浏览数: 3012

搜索到送葬者发的帖子,他跟我的思路是一样的
http://www.kindsoft.net/view.php?bbsid=5&postid=4899&pagenum=1

KindEditor.plugin('findreplace', function(K) {
	var self = this, name = 'findreplace', lang = self.lang(name + '.');
	self.plugin.findreplace = {
		edit : function() {
			var html = [
				'<div style="padding:10px 20px;">',
				//find
				'<div class="ke-dialog-row">',
				'<label for="find" style="width:60px;">' + lang.find + '</label>',
				'<input class="ke-input-text" type="text" id="find" name="find" value="" style="width:135px;" />',
				'<span class="ke-button-common ke-button-outer" style="float:right;">',
				'<input type="button" class="ke-button-common ke-button" name="findnext" style="width:90px;" n="0" value="' + lang.findnext + '" />',
				'</span>',
				'</div>',
				//replace
				'<div class="ke-dialog-row">',
				'<label for="replace" style="width:60px;">' + lang.replace + '</label>',
				'<input class="ke-input-text" type="text" id="replace" name="replace" value="" style="width:135px;" />',
				'<span class="ke-button-common ke-button-outer" style="float:right;">',
				'<input type="button" class="ke-button-common ke-button" name="replacethis" style="width:90px;" value="' + lang.replacethis + '" />',
				'</span>',
				'</div>',
				//matchcase
				'<div class="ke-dialog-row">',
				'<label for="matchcase"><input type="checkbox" id="matchcase" name="matchcase" />' + lang.matchcase + '</label>',
				'<span class="ke-button-common ke-button-outer" style="float:right;">',
				'<input type="button" class="ke-button-common ke-button" name="replaceall" style="width:90px;" value="' + lang.replaceall + '" />',
				'</span>',
				'</div>',
				//strict
				'<div class="ke-dialog-row">',
				'<label for="strict"><input type="checkbox" id="strict" name="strict" />' + lang.strict + '</label>',
				'<span class="ke-button-common ke-button-outer" style="float:right;">',
				'<input type="button" class="ke-button-common ke-button" name="close" style="width:90px;" value="' + lang.close + '" />',
				'</span>',
				'</div>',
				'</div>'
			].join('');
			var dialog = self.createDialog({
				name : name,
				width : 370,
				height : 180,
				title : self.lang(name),
				body : html,
				noButton : true
			}),
			div = dialog.div,
			findBox = K('[name="find"]', div),
			replaceBox = K('[name="replace"]', div),
			matchcaseBox = K('[name="matchcase"]', div),
			strictBox = K('[name="strict"]', div),
			findnextBtn = K('[name="findnext"]', div),
			replacethisBtn = K('[name="replacethis"]', div),
			replaceallBtn = K('[name="replaceall"]', div),
			closeBtn = K('[name="close"]', div);
			
			findBox.keyup(function(){
				findnextBtn.attr('n', '0');
			});
			findnextBtn.click(function(){
				if (findBox.val()=='') {alert(lang.nocontent);findBox[0].focus();return};
				var val = findBox.val().replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&/g, '&amp;'),
				val_r = val.replace(/\\/g, '\\\\').replace(/\(/g, '\\(').replace(/\)/g, '\\)')
				.replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/\{/g, '\\{').replace(/\}/g, '\\}'),
				html = self.html(),
				matchcase = matchcaseBox[0].checked ? 'g' : 'ig',
				pattern = strictBox[0].checked ? '\\b'+val_r+'\\b' : val_r;
				var matchs = html.match(new RegExp(pattern, matchcase)) || [];
				if (matchs.length==0) {alert(lang.nofind);return};
				var m, i = 0, l = html.length, n = parseInt(K(this).attr('n'));
				html = html.replace(new RegExp(pattern, matchcase), function($0, j){
					if (n==i) {
						if (n==matchs.length-1) {
							m = 0;
							findnextBtn.attr('gotofirst', 'yes');
						} else {
							if (findnextBtn.attr('gotofirst')) {alert(lang.gotofirst);findnextBtn.removeAttr('gotofirst')};
							m = n+1;
						}
						if (document.body.createTextRange) {
							var range = self.edit.doc.body.createTextRange();
							range.moveStart("character", -l);
							range.moveEnd("character", -l);
							range.moveStart("character", j);
							range.moveEnd("character", val.length);
							range.select();
						} else {
							/*
							var range = self.edit.doc.createRange();
							var s = window.getSelection();
							alert(s);
							while(window.find(val)){
								s.setSelectionRange(0,0);
							}
							cmd.range.selectNodeContents(div[0]);
							self.cmd.select();
							*/
							//alert(self.srcElement[0].setSelectionRange);
							//self.edit.doc.body.setSelectionRange(j, (j+val.length));
							//self.edit.doc.body.focus();
							//alert(self.cmd.selection().range.get(true));
							//self.cmd.selection().range.selectNodeContents();
							//self.cmd.select();
							//到了这里就完全没有头绪了,在网上找了很久,有一篇是使用 setSelectionRange 设置选中,但测试了一下,setSelectionRange 好像是不支持 iframe 的。。。
						};
						findnextBtn.attr('n', m);
					};
					i++;
					return $0;
				});
			});
			replacethisBtn.click(function(){
				if (findBox.val()=='') {alert(lang.nocontent);findBox[0].focus();return}
				if (self.selectedText()) self.insertHtml(replaceBox.val());
				findnextBtn.attr('n', '0');
			});
			replaceallBtn.click(function(){
				if (findBox.val()=='') {alert(lang.nocontent);findBox[0].focus();return};
				var val = findBox.val().replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&/g, '&amp;'),
				html = self.html(),
				matchcase = matchcaseBox[0].checked ? 'ig' : 'g',
				pattern = strictBox[0].checked ? '\b'+val+'\b' : val;
				findnextBtn.attr('n', '0');
				html = html.replace(new RegExp(pattern, matchcase), replaceBox.val());
				self.html(html);
				self.hideDialog().focus();
			});
			closeBtn.click(function(){
				self.hideDialog().focus();
			});
			
			var text = self.selectedText();
			if (text) {
				findBox.val(text);
			}
			findBox[0].focus();
		}
	};
	self.clickToolbar(name, self.plugin.findreplace.edit);
});
发表新帖 发表回复