您的位置：首页 > Web前端 > JQuery

JQuery 将一个text文本框动态改变为一个文本编辑器

2015-06-02 18:06 661 查看

之前在写js文件时常喜欢把js文件作为外部文件加载到html文件中，但今天同事介绍一种新的写法，可以把自己编写的js文件放到一个js库中，打个比方在java编程时我们会使用

libary库，我们可以将自己写的类放到libary库中，这样做的好处可以减少加载的次数，进一步提高网站的交互性。

今天先介绍常见的一种写法：

html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1347.57">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Heiti SC Light'}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="myfooter.js">

</script>
</head>
<body>
<div id="divMsg">Hello World!</div>

<input id="btnChange" type="text" />

</body>
</html>

自己写的js页面
$(document).ready(function() {
$(document).mouseover(function(event){
searchClick(event.target);
});
});
function searchClick(target){

if($("#btnChange").is(target)){
var cke_config = {
toolbar : [ {
name : 'dyna-custom-tools',
items : [ 'Undo', 'Redo', 'Bold', 'Italic',
'Underline', 'Link', 'Unlink', 'Format',
'NumberedList', 'BulletedList', 'Indent',
'Outdent', 'RemoveFormat' ]
} ],
format_tags : 'p;h1;h2;h3;pre',
linkShowAdvancedTab : false,
title : false,
removePlugins : 'elementspath',
resize_enabled : false,
toolbarLocation : 'top',
height : 120,
disableAutoInline : true
};
$("#divMsg").html();

//下面的ckeditor是文本编辑器类，replase（）方法的作用是替换，一般情况下我们会在btnchange前加一个#来定位这个元素不过同事说在一个函数内部默认就会添加一个

#，如何再添不就多了吗

CKEDITOR.replace('btnChange',
cke_config);

alert($("#divMsg").html());
}
}

下面是一个需要的编辑器包。

自己刚开始学习可能说的不对，请谨慎，哈哈。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 编辑器 java js function

相关文章推荐

新的分享

章节导航