config_front.js
$(function() {
CKEDITOR.editorConfig = function( config )
{/*
config.language = 'zh-cn';
config.toolbar = 'Background';
config.toolbar_Background = [
['Bold','Italic','Underline','Strike','-','Subscript','Superscript','RemoveFormat'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl'],
['NumberedList','BulletedList','-','Outdent','Indent'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Link','Unlink'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
['Maximize','ShowBlocks']
];
config.resize_enabled = false;
config.font_names = 'Arial;Verdana;Times New Roman;Georgia;Tahoma;宋体;黑体;微软雅黑';
config.disableObjectResizing = false;
*/
config.language = 'zh-cn';
config.toolbar = 'Background';
config.toolbar_Background = [
['Bold','Italic','Underline','Strike','-','Subscript','Superscript','RemoveFormat'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
'/',
['FontSize'],
['TextColor','BGColor'],
['Link','Unlink','Table'],
['NumberedList','BulletedList','-','Outdent','Indent'],
['BidiLtr','BidiRtl']
];
//config.entities = false;
config.resize_enabled = false;
config.disableObjectResizing = false;
config.filebrowserImageUploadUrl = 'ckupload?type=Images';
};
editor = CKEDITOR.replace( 'caseText', { customConfig : 'config_front.js' }) ;
});
jsp:
<td colspan="2"><textarea class="w660 h100 mb10"
name="caseText"
onkeydown="if(this.value.length >2000) this.value=this.value.substr(0,2000);">
<c:out value="${cases.caseText}" escapeXml="true"></c:out> </textarea></td>
表单验证:我把表单所有属性列出来了,暂时只需要看 案例正文。
function save() {
/* 必检字段 */
var LastName = $("#LastName").val();// 客户姓氏
var title = $("#title").val();// 案例标题
var age = $("#age").val(); // 客户年龄
var occupation = $("#occupation").val();// 客户身份
var Income = $("#Income").val();// 月均收入
var AnnualPremium = $("#AnnualPremium").val();// 年缴保费
var CustomerDemand = $("#CustomerDemand").val();// 客户需求
var caseText = editor.document.getBody().getHtml();
// var caseText = $("#caseText").val();// 案例正文
var InsuranceCompany = $("#InsuranceCompany").val(); // 保险公司
var InsuranceProducts = $("#InsuranceProducts").val(); // 保险产品
var appellation = $("#appellation").val(); // 称谓
var sex = $("#sex").val(); // 性别
var id = $("#id").val(); // id
// 判断空
if ($.trim(title) == '') {
alert('案例标题');
return false;
}
if ($.trim(LastName) == '') {
alert('请输入姓氏');
return false;
}
if ($.trim(age) == '') {
alert('请选择年龄');
return false;
}
if ($.trim(occupation) == '') {
alert('请填写客户身份');
return false;
}
if ($.trim(Income) == '') {
alert('请填写月均收入');
return false;
}
if ($.trim(AnnualPremium) == '') {
alert('请填写年缴保费');
return false;
}
if ($.trim(CustomerDemand) == '') {
alert('请填写客户需求');
return false;
}
if (CustomerDemand.length > 200) {
alert("客户需求字数不能大于200字");
return;
}
if ($.trim(editor.document.getBody().getText()) == '') {
alert('请填写案例正文');
return false;
}
if (caseText.length > 2000) {
alert("案例正文字数不能大于2000字");
return;
}
if ($.trim(InsuranceCompany) == 0) {
alert('请填写保险公司');
return false;
}
if ($.trim(InsuranceProducts) == '') {
alert('请填写保险产品');
return false;
}
// 判断格式
if (!nameCheck('title')) {
alert('请填写正确格式的标题!');
return false;
}
if (!nameCheck('LastName')) {
alert('请正确输入姓氏');
return false;
}
if (!nameCheck('occupation')) {
alert('请填写客户身份');
return false;
}
if (!numCheck('Income')) {
alert('请填写月均收入');
return false;
}
if (!numCheck('AnnualPremium')) {
alert('请填写年缴保费');
return false;
}
if (!numCheck("Income")) {
alert('请填写月均收入!');
return false;
}
}
问题:我一进入页面之后报错,说我已经实例化了caseText,但是我只实例化一次啊。
解决方案:在页面中单独写个
<script>
var editor = CKEDITOR.replace( 'caseText', { customConfig : 'config_front.js' }) ;
</script>
即可, 把config_front.js的var editor = CKEDITOR.replace( 'caseText', { customConfig : 'config_front.js' }) ; 去掉即可。
还有其他的解决方式:
参考:http://www.toobull.com/
分享到:
相关推荐
最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...
Angular-CKEditor组件 在Angular应用程序中使用所见即所得。 安装 在您的应用程序中包括CKEditor javascript文件: [removed][removed] 安装ng2-ckeditor ... 请考虑CKEditor插件divarea的使用(请参阅
Ckeditor用于Vue.js 2 要求 > = 4 > = 2 安装 CDN < script src =" https://unpkg.com/vue-ckeditor2 " > </ script > NPM $ npm install vue-ckeditor2 --save 用法 本文档适用于v2.0 +。 如果您要...
ZK 页面用ckeditor时提示组件未定义,引入ckez.jar可解决
3. 在网页中使用 CKEditor 和 CKFinder: 4. 配置CKFinder进行上传图片,Flash等。 5.Ckfinder实现普通文件上传 ckfinder中实现文件上传后按当前时间改名 CKEditor 优化配置 精简Ckeditor 提速:禁用拼写检查 ...
<script type="text/javascript" src="ckeditor/ckeditor.js"> ``` 2. 创建编辑器容器: 在页面上需要显示编辑器的位置,放置一个HTML文本框或ASP.NET的TextBox控件,并为其添加"class=ckeditor"属性。例如: -...
可以通过`CKEDITOR.instances.editor.getData()`获取编辑器的当前内容。 5. **处理响应和错误**:在JSP中,你可能需要对用户的输入进行验证,或者在服务器返回错误时显示给用户。这通常涉及到AJAX请求和响应处理,...
4. 初始化CKEditor,通过JavaScript调用`CKEDITOR.replace()`方法,传入容器ID。 通过以上步骤,CKEditor就能在企业网站上运行起来,为用户提供强大的富文本编辑体验。总的来说,CKEditor以其丰富的功能、优秀的...
CKEDITOR.replace('editor1'); ``` #### 五、其他注意事项 - **加载数据**: 如果需要从数据库或其他来源加载数据到编辑器中,需要将数据编码为HTML并放入`<textarea>`元素内。 - **服务器端处理**: `name`属性...
2. `ckeditor.js`:CKEditor的主要JavaScript文件,包含了编辑器的核心功能。 3. `config.js`:CKEditor的配置文件,可以在这里设定编辑器的行为和外观。 4. `ckeditor_basic.js`、`ckeditor_source.js`、`ckeditor_...
CKEditor.NETwithSamples.sln中的示例代码展示了CKEditor在ASP.NET中的各种用法,如基本编辑、上传图片、插件使用等。通过这些示例,开发者可以快速了解如何在实际项目中应用CKEditor。 五、进一步优化与扩展 除了...
1. **富文本编辑**:CKEditor 5支持各种文本格式,包括字体、字号、颜色、列表、段落样式等。它还提供链接创建、引用块和代码片段插入等功能,满足多样化的内容编辑需求。 2. **图像管理**:在描述中提到,这个demo...
editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName)); editor.ui.addButton('Footnote', { label: 'Footnote or Citation', command: pluginName }); } }); ``` `editor.ui.addButton`...
CK 编辑器的配置文件位于 ckeditor/config.js 文件中,这个文件包含了许多配置参数,每个参数都有其特定的作用。 语言配置: config.language = 'zh-cn'; CK 编辑器支持多种语言,我们可以通过设置语言参数来选择...
1. **直观的用户界面**:CKEditor 4.x提供了一个易于使用的界面,使非技术用户也能轻松编辑文本。其布局清晰,工具栏上的按钮直观地表示各种格式化选项。 2. **强大的文本格式化**:支持多种字体、字号、颜色和样式...
将 js 文件'CKEditor.js'复制到您的项目中如果需要,请更改类名'Ext.ux.CKEditor' 添加要求: requires: ['Ext.ux.CKEditor' ]使用编辑器: Ext.create('Ext.panel.Panel', {width: 600,height: 400,...items: [{...
在插件中添加按钮和命令,可以使用`CKEDITOR.dialog.add`和`CKEDITOR.dialogCommand`来创建对话框,然后通过`editor.addCommand`和`editor.ui.addButton`来注册命令并创建按钮。例如,添加“脚注”功能: ```...
1. **源码**:CKEditor的JavaScript源代码,供开发者研究和定制。 2. **示例**:预设的编辑器实例,展示了CKEditor的各种使用方式和配置选项。 3. **文档**:详细的开发者指南和API参考,帮助开发者理解和使用...
首先,要使用CKeditor,你需要从其官方网站[http://ckeditor.com/](http://ckeditor.com/)下载所需版本。在这个例子中,我们使用的是v3.0.1版本。接下来,按照以下步骤在你的项目中集成CKeditor: 1. 在HTML文档的`...
3. **良好的跨平台和浏览器兼容性**:CKEditor能在各种操作系统(如Windows、Linux、Mac)和主流浏览器(如Chrome、Firefox、Safari、IE)上运行,确保了广泛的应用场景。 4. **性能优化**:CKEditor 3.6.2对代码...