大家好,又见面了,我是你们的朋友全栈君。
FCKEditor是一个专门使用在网页上的属于该房源代码的文字编辑器。它不需要太复杂的安装步骤即可使用,是一个轻量化的工具。可以和JavaScript、ASP.NET、JAVA、PHP等不同的编程语言结合。现在FCKEditor已经重新开发,并更名为CKEditor。
在我们的程序中使用FCKEditor的具体方法为:
1.将解压后的FCKEditor整个文件夹复制到项目的WebRoot路径下。
2.在使用FCKEditor的页面导入fckeditor.js文件
<script language="javascript" src="${pageContext.request.contextPath}/fckeditor/fckeditor.js" charset="utf-8"></script>
3.写一段JS代码,来显示FCKEditor
<script type="text/javascript">
$(function(){
var fck = new FCKeditor("content");//content为要替换的textarea的name属性
fck.Width = "99%";
fck.Height = "100%";
fck.ToolbarSet = "bbs";//指定工具栏的配置,bbs为我自己修改过的,如果不使用自定义配置文件,此处有Default,Basic两个选择
fck.BasePath = "${pageContext.request.contextPath}/fckeditor/";
fck.ReplaceTextarea();
});
</script>
我们可以根据自己的需要来修改JS代码,实现自己想要的效果。
因为我们有时候会涉及到数据的回显问题,一般我们都显示在textarea中,所以我们可以设置textarea的name属性和FCKEditor的content为相同的名称,这样我们在操作textarea的时候就像是在操作FCKEditor一样。
<textarea name="content" style="width:650px;height:200px"></textarea>
这样我们就实现了一个简单的页面编辑器的功能。
JS代码中各个参数具体作用(使用本js或者上文使用方法步骤3的代码都可以,两段代码大同小异)
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'content' ) ;//此参数会作为提交表单时的参数名
oFCKeditor.BasePath = "/fckeditor/" ;//一定要指定editor文件夹所在的路径,并且要以'/'结尾
oFCKeditor.Height = 300 ;//高度
oFCKeditor.Value = '' ;//默认的初始值
oFCKeditor.ToolbarSet="Basic";//指定工具栏的配置,默认为Default
//oFCKeditor.Create() ;//在当前位置生成并显示Fckeditor
oFCKeditor.ReplaceTextarea();//替换指定id或name属性的textarea为Fckeditor
</script>
使用自定义的配置文件
1.在fckconfig.js里将FCKConfig.CustomConfigurationsPath = ”修改为: FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath + “myconfig.js” 作用:告诉Fckeditor,我有个自定义的配置在该地址下的该文件。
2.在myconfig.js里写想修改的东西,例如:表情,Fckeditor菜单栏的减少等,模版在fckconfig.js里面有,参考着修改即可。没有修改的配置,Fckeditor默认使用自己的默认配置。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/105684.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...