CKEditor——实现自定义表单

2 CKEdtior的加载

1、下载CKEditor完整版，粘贴到javascri中

2、在要加载CKEditor的页面中，定义一个容器控件（最好是DIV）

<div id="txteditor" name="txteditor">

<%= 初始化的值%>

</div>

//加载CKEditor

window.onload = function () {

CKEDITOR.replace(‘txteditor‘,

{

toolbar: ‘MyToolbar‘//和配置文件中的工具栏名称保持一致

});

};

3 工具栏配置

3.1 配置文件 config.js

在配置文件中设置工具栏要显示的按钮，按钮是在/Scripts/ckeditor/plugins中自己编写的JS文件。

下面的橙色字体为编写的JS文件中控件的命令。

CKEDITOR.editorConfig = function (config) {

//注册自定义控件

//cudataview

config.extraPlugins += (config.extraPlugins ? ‘,cu_cudataviewdiv‘ : ‘cu_cudataviewdiv‘);

//cutext

config.extraPlugins += (config.extraPlugins ? ‘,cu_cutextdiv‘ : ‘cu_cutextdiv‘);

//linkbutton

config.extraPlugins += (config.extraPlugins ? ‘,cu_linkbuttona‘ : ‘cu_linkbuttona‘);

//cubutton

config.extraPlugins += (config.extraPlugins ? ‘,cu_buttona‘ : ‘cu_buttona‘);

//curadiolist

config.extraPlugins += (config.extraPlugins ? ‘,cu_curadiolistdiv‘ : ‘cu_curadiolistdiv‘);

//cucheckboxlist

config.extraPlugins += (config.extraPlugins ? ‘,cu_cucheckboxlistdiv‘ : ‘cu_cucheckboxlistdiv‘);

//cudate

config.extraPlugins += (config.extraPlugins ? ‘,cu_dateinput‘ : ‘cu_dateinput‘);

//span

config.extraPlugins += (config.extraPlugins ? ‘,cu_spanlabel‘ : ‘cu_spanlabel‘);

//label

config.extraPlugins += (config.extraPlugins ? ‘,cu_labellabel‘ : ‘cu_labellabel‘);

//img

config.extraPlugins += (config.extraPlugins ? ‘,cu_imgimg‘ : ‘cu_imgimg‘);

//cuselect

config.extraPlugins += (config.extraPlugins ? ‘,cu_cuselectdiv‘ : ‘cu_cuselectdiv‘);

//cutextarea

config.extraPlugins += (config.extraPlugins ? ‘,cu_cutextareainput‘ : ‘cu_cutextareainput‘);

//curadio

config.extraPlugins += (config.extraPlugins ? ‘,cu_curadioinput‘ : ‘cu_curadioinput‘);

//cucheckbox

config.extraPlugins += (config.extraPlugins ? ‘,cu_cucheckboxinput‘ : ‘cu_cucheckboxinput‘);

//cufile

config.extraPlugins += (config.extraPlugins ? ‘,cu_fileinput‘ : ‘cu_fileinput‘);

//cuhidden

config.extraPlugins += (config.extraPlugins ? ‘,cu_hiddeninput‘ : ‘cu_hiddeninput‘);

//cupassword

config.extraPlugins += (config.extraPlugins ? ‘,cu_passwordinput‘ : ‘cu_passwordinput‘);

//text

config.extraPlugins += (config.extraPlugins ? ‘,cu_textinput‘ : ‘cu_textinput‘);

//自定义工具栏

config.toolbar = ‘MyToolbar‘;

config.toolbar_MyToolbar = [[‘Source‘, ‘-‘, ‘Table‘], [‘JustifyLeft‘, ‘JustifyCenter‘, ‘JustifyRight‘, ‘JustifyBlock‘], [‘TextColor‘, ‘BGColor‘], [‘Font‘, ‘FontSize‘], [‘Maximize‘],

‘/‘,

[‘cu_dateinput‘, ‘-‘, ‘cu_cutextareainput‘, ‘-‘, ‘cu_curadioinput‘, ‘-‘, ‘cu_cucheckboxinput‘, ‘-‘, ‘cu_fileinput‘, ‘-‘, ‘cu_hiddeninput‘, ‘-‘, ‘cu_passwordinput‘, ‘-‘, ‘cu_textinput‘],

[‘cu_cutextdiv‘, ‘-‘, ‘cu_cudataviewdiv‘, ‘-‘, ‘cu_curadiolistdiv‘, ‘-‘, ‘cu_cucheckboxlistdiv‘, ‘-‘, ‘cu_cuselectdiv‘],

[‘cu_buttona‘, ‘-‘, ‘cu_linkbuttona‘], [‘cu_spanlabel‘, ‘-‘, ‘cu_labellabel‘],

[‘cu_imgimg‘]

];

}；

4 自定义控件

4.1 创建文件

在如图目录下添加自定义控件的文件，

cubutton.js：编辑页面

plugin.js：按钮、事件命令JS

cubutton.png：图标

4.2 plugin.js—按钮、事件方法

cu_buttona：事件、按钮命令，和自定义标签HTML保持一致

cubuttonDialog：编辑页面的名称，对应cubutton.js中的页面名称

cu_buttonaGroup：右键编辑菜单组

cu_buttonaItem：右键编辑菜单组项

//cubutton控件

(function () {

CKEDITOR.plugins.add(‘cu_buttona‘,

{

//初始化按钮

init: function (editor) {

//按钮事件

var pluginName = ‘cu_buttona‘;

editor.addCommand(pluginName, new CKEDITOR.dialogCommand(‘cubuttonDialog‘)); //定           义打开我们的对话窗口的编辑命令。

//注册控件，在工具条上显示控件

editor.ui.addButton(‘cu_buttona‘,

{

//控件的Title

label: ‘cubutton控件‘,

//按钮事件名称

command: pluginName,

icon: this.path + ‘images/cubutton.png‘ //按钮图片

});

//双击打开编辑窗口

editor.on(‘doubleclick‘, function (evt) {

var element = evt.data.element;

if (element.is(‘cu_buttona‘))

evt.data.dialog = ‘cubuttonDialog‘;

});

if (editor.contextMenu) {

// 添加上下文菜单组与编辑缩写项目。

editor.addMenuGroup(‘cu_buttonaGroup‘);

editor.addMenuItem(‘cu_buttonaItem‘, {

label: ‘CUButton编辑‘,

icon: this.path + ‘images/cubutton.png‘, //按钮图片

command: ‘cu_buttona‘,

group: ‘cu_buttonaGroup‘

});

// cu_buttona：自定义标签，和cubutton.js中的控件标签保持一致

editor.contextMenu.addListener(function (element) {

if (element.getAscendant(‘cu_buttona‘, true)) {

return { cu_buttonaItem: CKEDITOR.TRISTATE_OFF };

}

});

}

CKEDITOR.dialog.add(‘cubuttonDialog‘, this.path + "dialogs/cubutton.js"); //注册我们的对              话框的文件 - this.path是插件文件夹路径

}

}

);

})();

4.3 cubutton.js—编辑页面

cubuttonDialog：编辑页面名称

contents：tab页，可设置多个tab页

elements：tab页中的参数

children：tab中的控件

onShow：页面加载，其中的cu_buttona就是自定义标签的HTML

onOk：提交事件

CKEDITOR.dialog.add(‘cubuttonDialog‘,

function (editor) {

return {

// 对话窗口的基本特性：标题，最小尺寸.

title: ‘cubutton编辑页‘,

minWidth: 300,

minHeight: 300,

// 对话窗口内容定义.

contents: [

//第1个TAB(横向排列)

{

id: ‘customattribute‘,

label: ‘属性‘,

elements: [{

type: "hbox",

children: [{

type: "text",

label: ‘ID‘,

id: "ID",

width: ‘120px‘,

"default": "cubutton",

validate: CKEDITOR.dialog.validate.notEmpty("ID不能为空"),

// 验证检查字段是否不为空。

setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。

this.setValue(element.getAttribute("ID"));

},

commit: function (element) { // 提交时的事件

var id = this.getValue();

if (id) element.setAttribute(‘ID‘, id);

else if (!this.insertMode) element.removeAttribute(‘ID‘);

element.setText(this.getValue()); //显示内容

}

},

{

type: "text",

id: "Name",

label: ‘Name‘,

width: ‘120px‘,

"default": "cubutton",

validate: CKEDITOR.dialog.validate.notEmpty("Name不能为空"),

// 验证检查字段是否不为空。

setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。

this.setValue(element.getAttribute("Name"));

},

commit: function (element) { // 提交时的事件

var id = this.getValue();

if (id) element.setAttribute(‘Name‘, id);

else if (!this.insertMode) element.removeAttribute(‘Name‘);

}

}]

},

//1(横向排)

{

type: "hbox",

widths: ["50%", "50%"],

children: [{

type: "text",

label: ‘HTML标签类型‘,

id: "htmltype",

width: ‘120px‘,

"default": "linkbutton",

setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。

this.setValue(element.getAttribute("htmltype"));

},

commit: function (element) { // 提交时的事件

var id = this.getValue();

if (id) element.setAttribute(‘htmltype‘, id);

else if (!this.insertMode) element.removeAttribute(‘htmltype‘);

}

},{

type: "text",

label: ‘控件类型(cutype)‘,

id: "cutype",

width: ‘120px‘,

"default": "linkbutton",

setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。

this.setValue(element.getAttribute("cutype"));

},

commit: function (element) { // 提交时的事件

var id = this.getValue();

if (id) element.setAttribute(‘cutype‘, id);

else if (!this.insertMode) element.removeAttribute(‘cutype‘);

}

}]

},

{type: "hbox",

children: [

{

type: "text",

label: ‘按钮样式(plain)‘,

id: "plain",

setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。

this.setValue(element.getAttribute("plain"));

},

commit: function (element) { // 提交时的事件

var id = this.getValue();

if (id) element.setAttribute(‘plain‘, id);

else if (!this.insertMode) element.removeAttribute(‘plain‘);

}

}]

},

//2(横向排)

{

type: "hbox",

children: [

{

type: "text",

label: ‘class‘,

id: "class",

"default": "",

setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。

this.setValue(element.getAttribute("class"));

},

commit: function (element) { // 提交时的事件

var id = this.getValue();

if (id) element.setAttribute(‘class‘, id);

else if (!this.insertMode) element.removeAttribute(‘class‘);

}

}]

},

//5(横向排)

{

type: "hbox",

children: [

{

type: "text",

label: ‘显示图标‘,

id: "iconcls",

width: ‘100px‘,

"default": "icon-ok",

setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。

this.setValue(element.getAttribute("iconcls"));

},

commit: function (element) { // 提交时的事件

var id = this.getValue();

if (id) element.setAttribute(‘iconcls‘, id);

else if (!this.insertMode) element.removeAttribute(‘iconcls‘);

}

},{

type: "text",

label: ‘值‘,

id: "value",

setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。

this.setValue(element.getAttribute("value"));

},

commit: function (element) { // 提交时的事件

var id = this.getValue();

if (id) element.setAttribute(‘value‘, id);

else if (!this.insertMode) element.removeAttribute(‘value‘);

}

}]

},

{

type: "textarea",

label: ‘custyle‘,

id: "custyle",

// 验证检查字段是否不为空。

setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。

this.setValue(element.getAttribute("custyle"));

},

commit: function (element) { // 提交时的事件

var id = this.getValue();

if (id) element.setAttribute(‘custyle‘, id);

else if (!this.insertMode) element.removeAttribute(‘custyle‘);

}

}

]

},

//第二个TAB(横纵向排列)

{

id: ‘cufunction‘,

label: ‘方法‘,

elements: [{

type: "hbox",

widths: ["50%", "50%"],

children: [{

type: "text",

label: ‘双击事件‘,

id: "cuondblclick",

setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。

this.setValue(element.getAttribute("cuondblclick"));

},

commit: function (element) { // 提交时的事件

var id = this.getValue();

if (id) element.setAttribute(‘cuondblclick‘, id);

else if (!this.insertMode) element.removeAttribute(‘cuondblclick‘);

}

},

{

type: "button",

id: "selcuondblclick",

label: ‘选择双击事件‘,

onClick: function () {

openselclick();

var dialog = this.getDialog(); //当前打开的窗口

if (sFunction != "" && sFunction != undefined) {

dialog.getContentElement("cufunction", "cuondblclick").setValue(sFunction); //设置cuondblclick控件的值

}

}

}]

},

{

type: "hbox",

widths: ["50%", "50%"],

children: [{

type: "text",

id: "cuonclick",

label: ‘单机事件‘,

setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。

this.setValue(element.getAttribute("cuonclick"));

},

commit: function (element) { // 提交时的事件

var id = this.getValue();

if (id) element.setAttribute(‘cuonclick‘, id);

else if (!this.insertMode) element.removeAttribute(‘cuonclick‘);

}

},

{

type: "button",

id: "selcuonclick",

label: ‘选择单机事件‘,

onClick: function () {

openselclick();

var dialog = this.getDialog(); //当前打开的窗口

if (sFunction != "" && sFunction != undefined) {

dialog.getContentElement("cufunction", "cuonclick").setValue(sFunction); //设置cuondblclick控件的值

}

}

}]

}]

}],

// 加载对话框时调用。

onShow: function () {

// 获得从编辑器的选择。

var selection = editor.getSelection();

// 获取元素的选择开始。

var element = selection.getStartElement();

// 获得<cubutton>元素最靠近选择，如果有的话。

if (element) element = element.getAscendant(‘cu_buttona‘, true); //自定义的控件标签

// 创建一个新的<cubutton>元素，如果它不存在。

if (!element || element.getName() != ‘cu_buttona‘) {

element = editor.document.createElement(‘cu_buttona‘);

// 标志以供日后使用的插入模式。

this.insertMode = true;

} else this.insertMode = false;

// 存储所述参考<cubutton>元件中的内部属性，以备后用。

this.element = element;

// 调用所有对话框窗口元素的设置方法，这样他们就可以加载元素属性。

if (!this.insertMode) this.setupContent(this.element);

},

// 调用此方法一旦用户点击OK按钮，确认对话框。

onOk: function () {

// 此功能的上下文是对话框对象本身。

var dialog = this;

// 创建一个新的<cubutton>元素。

var cubutton = this.element;

// 调用commit所有对话窗口元素的方法，因此<cubutton>元素被修改。

this.commitContent(cubutton);

// 最后，如果在插入模式下，插入的元素融入到编辑器的插入位置。

if (this.insertMode) editor.insertElement(cubutton);

}

};

});

4.4 双击事件

在plugin.js中的初始化事件中添加双击事件

//双击打开编辑窗口

editor.on(‘doubleclick‘, function (evt) {

var element = evt.data.element;

if (element.is(‘cu_cucheckboxinput‘))

evt.data.dialog = ‘cucheckboxDialog‘;

});

4.5 右键菜单

在plugin.js中的初始化事件中添加双击事件

if (editor.contextMenu) {

// 添加上下文菜单组与编辑缩写项目。

editor.addMenuGroup(‘cu_cucheckboxinputGroup‘);

editor.addMenuItem(‘cu_cucheckboxinputItem‘, {

label: ‘CUCheckbox编辑‘,

icon: this.path + ‘images/cucheckbox.png‘, //按钮图片

command: ‘cu_cucheckboxinput‘,

group: ‘cu_cucheckboxinputGroup‘

});

//和cucheckbox.js中的控件标签保持一致

editor.contextMenu.addListener(function (element) {

if (element.getAscendant(‘cu_cucheckboxinput‘, true)) {

return { cu_cucheckboxinputItem: CKEDITOR.TRISTATE_OFF };

}

});

}

4.6 ckeditor.js

自定义的控件，要在ckeditor.js中注册，

注册方法：

查找abbr标签，按照abbr的注册方式注册自定义的控件。

ckeditor.js的注册是为了使用双击打开编辑页、右键菜单打开编辑页。

4.7 CKEditor外部事件调用编辑框

var editor = CKEDITOR.instances.txteditor; // txteditor：被CKEditor替换的标签ID

editor.execCommand("cu_cutextdiv");// cu_cutextdiv：要执行的打开页面的命令，在plugin.js中定义的命令

时间： 2024-11-03 21:28:15

CKEditor——实现自定义表单的相关文章

Drupal创建自定义表单，上传文件代码

Drupal中创建自定义表单,用来上传文件,对上传文件做一些操作.以下是放在Module中的代码: 一.菜单建立表单路径 /** Implementation of hook_menu(). */ function moduleName_menu () { $items = array(); $items['admin/import'] = array( 'title' => 'title', 'page callback' => 'drupal_get_form', 'page argume

struts2 自定义表单

自定义表单一定会涉及<s:iterator/>迭代,一个复杂的自定义表单可能会嵌套n多层迭代. 比如一个自定义一个问卷调查页面涉及3个模型:一个Survey代表一个调查,一个Page代表一个页面,一个Question代表一个问题.每个问题中会包含不同的表单元素,就会涉及迭代. 3个模型类如下: Survey package com.atguigu.surveypark.model; import java.util.Date; import java.util.HashSet; import

Infopath自定义表单实现列表字段联动

以前做一个项目,为了实现两字段联动录入的功能,采用了Infopath来自定义表单完成,具体方法如下: 例如,首先我们有一个数据源列表Country,里面有连个字段,一个是Country,一个是Province,存放着所有的源数据, 我们现在有一个LinkageList,用来输入信息,里面也有两个字段,一个是国家,一个是省会 现在我们需要在LinkageList列表中添加数据时,实现国家和省会联动,即如果你国家选择了China,那么省会就只有三个选择Guangdong,Hubei,Hunan供你选

activiti自定义流程之整合（三）：整合自定义表单创建模型

本来在创建了表单之后应该是表单列表和预览功能,但是我看了看整合的代码,和之前没有用angularjs的基本没有什么变化,一些极小的变动也只是基于angularjs的语法,因此完全可以参考之前说些的表单列表展示相关的内容,这里也就直接进入到下一个步骤,创建流程模型了. 在之前的创建流程模型一节里,我讲代码比较多,实际上在这里还有很重要的一个环节没有细说,那就是自定义流程图,画流程图的过程也是有不少需要注意的事项的,在这一节我会适当的以截图加解释进行说明. 而在创建流程模型的过程中,因为之前也是用j

dedecms(织梦)自定义表单后台显示不全

我们常用dedecms 自定义表单做留言功能.但是偶尔会遇到这样一个问题,就是 在前台提交表单后..后天显示不全.特别是中文字符  都不会显示, 比如下图: 这是因为  如果你织梦是gbk的话那就对了 是htmlspecialchars这个函数的原因 默认是utf8 如果不想换php版本的话就把htmlspecialchars($str);替换为htmlspecialchars($str, ENT_COMPAT ,'GB2312'); 所以 要在后台模板 wwww.baidu.com/dede/

dede自定义表单制作

dede自定义表单制作和制作留言板的原理差不多,就是如果有自己制作了一个网页专题的话需要接受前台提交来的表单,可以参照这种的! 首页在后台-核心-频道模型-自定义表单-增加新的自定义表单 里添加一个表单! 接下来就是填写自定义表单的各项值了,其实这里不懂的话都默认就好,只是自定义表单的名字作为记号写个差不多的,然后就是公开与否,如果前台提交来的数据不想让别人看到就可以直接选不公开!当然这个不公开最好是最后制作完毕在选,因为接下来要在前台浏览并复制一些代码,如果不公开是不能在前台看的! 填写好确定

织梦自定义表单通过ajax提交的实现方法

自定义表单通过ajax判断,提交不用跳转页面,提高用户体验.具体方法如下: html表单代码部分,就提交按钮改成botton,,添加onclick事件 表单代码: <form action="javascript:;" enctype="multipart/form-data" method="post"> <input type="hidden" name="action" value=

【从零开始学BPM，Day3】自定义表单开发

[课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第三天课程] 1.课程概要 Step 1 软件下载:H3 BPM10.0全开放免费下载:http://bbs.h3bpm.com/read.php?tid=861&fid=11 Step 2 安装资料:参考本博的"安装资料"分类 Step 3 产品在线帮助浏览:http://bbs.h3bpm.com/read.php?tid=286&

[转] 两种自定义表单设计方案

无涯 原文 两种自定义表单设计方案 [原创] 2006-12 最近参与一个项目,客户要求提供自定义表单的功能.主要的要求是:能够对表单的字段进行增删改,对显示表单的格式可以灵活定制.由于客户的表单变动可能比较频繁,所以决定实现自定义表单功能.初步设想出以下两种自定义表单的解决方案,目前只涉及到表单的显示方案. 请大家讨论一下两种方案的优劣,使用哪种较好.也欢迎大家提出更好的解决方案. HTML模板方案 概述:采用HTML模板方式.对于每一种样式的表单定义HTML模板:在模板中定义Web页面的HT