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

最新推荐文章于 2019-11-14 11:00:10 发布

suweierxing

最新推荐文章于 2019-11-14 11:00:10 发布

阅读量1k

点赞数

分类专栏： java学习文章标签：编辑器 java js function

本文链接：https://blog.csdn.net/suweierxing/article/details/46333279

版权

java学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

之前在写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="btnShow" type="button" value="显示"/>
    <input id="btnHide" type="button" value="隐藏"/>-->
    <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());
	}
}

下面是一个需要的编辑器包。
自己刚开始学习可能说的不对，请谨慎，哈哈。

suweierxing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 将一个text文本框动态改变为一个文本编辑器

之前在写js文件时常喜欢把js文件作为外部文件加载到html文件中，但今天同事介绍一种新的写法，可以把自己编写的js文件放到一个js库中，打个比方在java编程时我们会使用libary库，我们可以将自己写的类放到libary库中，这样做的好处可以减少加载的次数，进一步提高网站的交互性。今天先介绍常见的一种写法：html页面：
复制链接

扫一扫