FCKEditor学习笔记

最新推荐文章于 2025-12-02 21:20:38 发布

原创最新推荐文章于 2025-12-02 21:20:38 发布 · 613 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #fckeditor

j2EE UI 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了FCKEditor富文本编辑器的集成步骤与使用方法，包括如何下载并配置FCKEditor，通过两种方式实现富文本编辑器的创建：一是使用CKEDITOR.appendTo方法，二是替换textarea标签。

1.下载FCKEditor压缩包，解压到项目根目录中。

2.导入FCKEditor所需要的js可css文件

        <link rel="stylesheet" href="ckeditor/samples/sample.css"/>
	<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

3.创建FCKEditor文本框。

方法一：使用CKEDITOR.appendTo(“”，config,html) ，可以在指定的DOM对象中创建fckeditor文本框。

其中的属性 html 为初始化的时候fckeditor中的值，如果为html = “ddd”，则创建fckeditor时可以写入值“ddd”;

属性config 代表fckeditor初始化的配置信息。

	<script>
  		var editor, html = '';
		function createEditor() {
			if ( editor )
				return;
  			var config = {};
			editor = CKEDITOR.appendTo('editor', config, html );  // CKEDITOR.appendTo 可以在指定的DOM对象里创建一个editor
		}


  		function removeEditor(){
  			if(!editor) return;  //editor.getData();可以得到fckeditor文本框中的值
  			editor.destroy();
  			editor = null;
  		}
  	</script>
  
  	<body>
  		<input type="button" onclick="createEditor()" value="createEditor"/>
  		<input type="button" onclick="removeEditor()" value="removeEditor"/>
    		<div id="editor">
    	
   		</div>
    </body>

方法二：替换textarea 标签。

        <script>
  	  $(document).ready(function(){
  	  	CKEDITOR.replace("editor");
  	  });

  	</script>

       <textarea name="editor">
    	
       </textarea>