`
Donald_Draper
  • 浏览: 972168 次
社区版块
存档分类
最新评论

CKEditor 用法

    博客分类:
  • HTML
阅读更多
<script type="text/javascript">
$(function() {
		Cms.siteFlow("${base}", location.href, document.referrer);
		CKEDITOR.replace( 'contents' );
		/* CKEDITOR.editorConfig = function( config ) {config.language = 'en';}; */
	});
function checkForm() {
		var title = $("#title").val();
		if (title == "") {
			alert("请填写公告标题!");
			return false;
		}
		var content = $("#content").val();
		if (content == "") {
			alert("请填写公告内容!");
			return false;
		}
		 $("#pubInfoForm").submit();
		/* var imageUrl = $("#imageUrl").val();
		var contents = CKEDITOR.instances.contents.getData();
		alert(contents);
		  $.ajax({
            type:"POST",
            url:"${base}/notice/publicMarket.jspx",
            data:{title:title,
            	  imageUrl:imageUrl,
            	  contents:encodeURI(contents)},
            datatype: "html",
            success:function(data){
            }   ,
            error: function(){
                alert("系统错误!")
            }        
         }); */
</script>
<form id="pubInfoForm" action="${base}/notice/publicMarket.jspx" method="post">
设置textArea框
<textArea id="contents" name="contents" onKeyUp="if(this.value.length > 1000) this.value=this.value.substr(0,1000)" 
						 style="width:850px;height:300px;"></textArea>
</form>

注意:CKEiditor传过去有乱码
在后台处理
String s1 =StringUtils.replace(mInfo.getContents(), "“", "\\\"");
String s2 =StringUtils.replace(s1, "<", "<");
String s3 =StringUtils.replace(s2, ">", ">");
String s4 =StringUtils.replace(s3, ";", ";");
String s5 =StringUtils.replace(s4, "/", "\\/");
前台页面展现
CKEDITOR.instances.contents.setData('${mInfo.contents!}');
$("#contents").html('${mInfo.contents!}');
对CKEDITOR 自动换行的问题在config.js中配置规则,
CKEDITOR.on( 'instanceReady', function( ev ) { with (ev.editor.dataProcessor.writer) {
	setRules("p",  {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("h1", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("h2", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("h3", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("h4", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("h5", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("div", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("table", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("tr", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("td", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("iframe", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("li", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("ul", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );  
    setRules("ol", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} ); 
	}
}); 
分享到:
评论

相关推荐

    ckeditor使用方法

    ### CKEditor 使用方法详解 #### 引言 在现代网页设计与开发中,富文本编辑器已成为不可或缺的一部分,尤其在需要用户输入复杂格式文本的场景下。CKEditor作为一款广泛使用的开源富文本编辑器,提供了丰富的功能和...

    ckeditor使用方法.pdf

    ### CKEditor 使用方法详解 #### 一、简介 CKEditor是一款功能强大且广泛应用于Web开发中的富文本编辑器。它提供了丰富的编辑功能,如文本格式化、图片上传、表格操作等,大大提升了用户编辑文档的体验。本文档将...

    C# ckeditor 用法

    - 如果你有自定义配置需求,可以使用`CKEditor.Replace`或`CKEditor.Create`方法,例如: ```javascript CKEDITOR.replace('editor1', { filebrowserBrowseUrl: '@Url.Content("~/Scripts/ckeditor/filemanager/...

    ckeditor3.2编译器

    在提供的`ckeditor用法.txt`文件中,应该包含了ckeditor的详细使用教程和示例代码,可以参照这个文档来快速上手和理解ckeditor的使用方法。 总结来说,ckeditor3.2是网页内容编辑的理想选择,它以其强大的功能、...

    ckeditor的用法以及DLL

    这个压缩包文件可能包含了CKEditor的使用教程以及与DLL(动态链接库)相关的资料,DLL是Windows操作系统中用于封装可重用代码的库文件。 在深入讲解CKEditor的用法之前,我们先来理解DLL的作用。DLL文件是Windows...

    CKEditor使用介绍

    然后,找到你希望替换为CKEditor的`&lt;textarea&gt;`元素,并使用`CKEDITOR.replace()`方法将其转换为富文本编辑器: ```html &lt;textarea id="myEditor"&gt;&lt;/textarea&gt; CKEDITOR.replace('myEditor'); ``` 三、CKEditor...

    jsp中使用ckeditor

    1. `ckeditor-java-core-3.5.3-javadoc.jar`:这是CKEditor Java API的JavaDoc文档,包含了API的详细说明,用于开发者查阅API的使用方法。 2. `ckeditor-java-core-3.5.3.jar`:这是CKEditor Java库的核心文件,包含...

    ckeditor的用法

    通过使用CKEditor,开发者能够轻松地为用户提供一个直观且易于使用的文本编辑界面。 #### 二、CKFinder介绍及其配置 ##### 1. CKFinder概述 CKFinder是CKSource公司开发的一款文件管理器,主要用于配合CKEditor或...

    ckeditor及配置方法

    **ckeditor及配置方法** CKEditor是一款强大的富文本编辑器,广泛应用于网站内容管理、论坛、博客等场景,为用户提供了一种便捷的在线文本编辑体验。它支持多种语言,包括中文,且具有高度可定制性,可以满足不同...

    ckeditor的demo代码

    总的来说,这个"ckeditor的demo代码"主要展示了CKEditor的基本用法和核心概念,包括如何引入CKEditor库、创建编辑器实例、配置编辑器选项以及如何通过JavaScript与编辑器进行交互。对于初学者来说,这是一个很好的...

    ckeditor5_v19完整版

    `sample` 目录可能包含了示例代码或演示页面,让用户能够直观地了解编辑器的使用方法和功能特性。通过这些示例,用户可以学习如何配置编辑器、自定义工具栏、处理事件等高级功能。 `translations` 目录可能包含了...

    ckeditor使用

    ### CKEditor 使用详解 #### 一、CKEditor 简介 CKEditor(原名 FCKeditor)是一款功能强大且广泛使用的开源富文本编辑器。...对于开发人员来说,熟练掌握 CKEditor 的使用方法和配置技巧将极大地提高工作效率。

    CKEditor示例源码20121228

    描述中提到,该源码包含在.NET环境中集成CKEditor编辑器的方法,这意味着它可能是一个.NET项目的实例,展示了如何在ASP.NET或其他.NET框架的应用程序中使用CKEditor。"配置方法存放在docs文件夹下"这一信息提示,...

    asp.net 使用ckeditor5富文本编辑器包含图片上传全部代码

    // 返回成功信息,包括图片URL,供CKEditor5使用 return Json(new { success = true, url = Url.Content($"~/Content/Images/{fileName}") }); } return Json(new { success = false }); } ``` 为了使CKEditor...

    lineheight支持最新的ckeditor

    用法找见自己的ckeditor地址让后放到ckeditor/plugins/ 下,最后修改ckeditor/config.js,如果之前添加过工具则在 config.extraPlugins = 'gongju'; 这里面直接跟到后面 config.extraPlugins = 'gongju,lineheight'; ...

    ckeditor 3.3.1 编辑器使用说明

    本文主要介绍了CKEditor 3.3.1版本的一些基础使用方法,包括如何初始化编辑器、更改皮肤样式以及添加颜色选择器等功能。这些配置可以帮助开发者根据实际需求定制出符合项目要求的编辑器界面。当然,CKEditor的功能远...

    ckeditor4音频视频上传自定义插件

    API提供了各种方法和事件,如`CKEDITOR.instances`用于访问已创建的实例,`CKEDITOR.plugins.add`用于注册新插件,以及`editor.insertElement`用于插入元素到编辑器内容中。 2. **自定义按钮**:要添加音频和视频...

    c# mvc中使用ckeditor上传图片介绍

    以下是使用CKEditor在C# MVC中实现图片上传的详细步骤和关键知识点: 首先,你需要从CKEditor官网(http://ckeditor.com/builder)下载所需的插件。在网站上,你可以根据项目需求选择并定制编辑器的功能,例如仅...

    CKEditor 3.6.2中文文档

    通过本文介绍的知识点,开发者可以快速掌握如何安装、升级以及使用CKEditor的基本方法。无论是对于初次使用者还是希望进一步定制编辑器功能的高级用户来说,这些知识点都提供了必要的指导和支持。

Global site tag (gtag.js) - Google Analytics