html编辑器自定义脚本,CKeditor富文本编辑器使用技巧之添加自定义插件的方法
本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法。分享给大家供大家参考,具体如下:
首先就是在CKeditor的plugins目录下新建一个目录qchoice:
qchoice目录下的结构如下:
然后, images中如下:
dialogs中如下:
我们先来看plugins.js文件的内容:
(function() {
CKEDITOR.plugins.add("qchoice", {
requires: ["dialog"],
init: function(a) {
a.addCommand("qchoice", new CKEDITOR.dialogCommand("qchoice"));
a.ui.addButton("qchoice", {
label: "qchoice",//调用dialog时显示的名称
command: "qchoice",
icon: this.path + "images/qchoice.jpg"//在toolbar中的图标
});
CKEDITOR.dialog.add("qchoice", this.path + "dialogs/qchoice.js")
}
})
})();
再来看qchoice.js文件的内容:
CKEDITOR.dialog.add('qchoice', function (editor) { //要和plugin.js 中的command 一致
var escape = function (value) {
return value;
};
return {
title: '', //对话框标题
minWidth: 500, //对话框宽度
minHeight: 600,//对话框高度
contents: [{ //对话框内容
id: 'choice',
name: 'choice',
label: '插入选择题答案',
title: '插入选择题答案',
elements: [{
id: 'rdType_1',
type: 'radio', //表单元素类型:单选按钮
items: [['中国赞','[中国赞]'],['广告','[广告]'],['doge','[doge]'],['喵喵','[喵喵]'],['二哈','[二哈]'],['抱抱','[抱抱]'],['哼','[哼]'],['思考','[思考]'],['生病','[生病]'],['偷乐','[偷乐]']]
},
{
id: 'rdType_2',
type: 'radio', //表单元素类型:单选按钮
items: [['笑cry','[笑cry]'],['馋嘴','[馋嘴]'],['拜拜','[拜拜]'],['右哼哼','[右哼哼]'],['左哼哼','[左哼哼]'],['怒骂','[怒骂]'],['鄙视','[鄙视]'],['笑而不语','[笑而不语]']]
},
{
id: 'rdType_3',
type: 'radio', //表单元素类型:单选按钮
items: [['害羞','[害羞]'],['费解','[费解]'],['挖鼻','[挖鼻]'],['悲伤','[悲伤]'],['打脸','[打脸]'],['抓狂','[抓狂]'],['哈哈','[哈哈]'],['傻眼','[傻眼]'],['好喜欢','[好喜欢]'],['好爱哦','[好爱哦]']]
},
{
id: 'rdType_4',
type: 'radio', //表单元素类型:单选按钮
items: [['失望','[失望]'],['good','[good]'],['弱','[弱]'],['耶','[耶]'],['来','[来]'],['握手','[握手]'],['加油','[加油]'],['haha','[haha]'],['拳头','[拳头]'],['男孩儿','[男孩儿]']]
},
{
id: 'rdType_5',
type: 'radio', //表单元素类型:单选按钮
items: [['话筒','[话筒]'],['礼物','[礼物]'],['飞机','[飞机]'],['干杯','[干杯]'],['围脖','[围脖]'],['钟','[钟]'],['肥皂','[肥皂]'],['浪','[浪]'],['女孩儿','[女孩儿]'],['照相机','[照相机]']]
},
{
id: 'rdType_6',
type: 'radio', //表单元素类型:单选按钮
items: [['熊猫','[熊猫]'],['喜','[喜]'],['绿丝带','[绿丝带]'],['威武','[威武]'],['弗莱见钱眼开','[弗莱见钱眼开]'],['看涨','[看涨]'],['看跌','[看跌]'],['奥特曼','[奥特曼]'],['兔子','[兔子]']]
}
,
{
id: 'rdType_7',
type: 'radio', //表单元素类型:单选按钮
items: [['顶','[顶]'],['米奇喜欢','[米奇喜欢]'],['米奇飞吻','[米奇飞吻]'],['米奇大哭','[米奇大哭]'],['米奇比心','[米奇比心]'],['笑哈哈','[笑哈哈]'],['羞嗒嗒','[羞嗒嗒]'],['憧憬','[憧憬]'],['酷','[酷]']]
}
,
{
id: 'rdType_8',
type: 'radio', //表单元素类型:单选按钮
items: [['月亮','[月亮]'],['围观','[围观]'],['蛋糕','[蛋糕]'],['微风','[微风]'],['音乐','[音乐]'],['猪头','[猪头]'],['鲜花','[鲜花]'],['太阳','[太阳]'],['Aloha','[Aloha]'],['赞啊','[赞啊]'],['求关注','[求关注]']]
}
,
{
id: 'rdType_9',
type: 'radio', //表单元素类型:单选按钮
items: [['哈欠','[哈欠]'],['泪','[泪]'],['怒','[怒]'],['闭嘴','[闭嘴]'],['疑问','[疑问]'],['白眼','[白眼]'],['吐','[吐]'],['黑线','[黑线]'],['委屈','[委屈]'],['下雨','[下雨]'],['伤心','[伤心]']]
}
,
{
id: 'rdType_10',
type: 'radio', //表单元素类型:单选按钮
items: [['作揖','[作揖]'],['星星','[星星]'],['半星','[半星]'],['空星','[空星]'],['草泥马','[草泥马]'],['浮云','[浮云]'],['沙尘暴','[沙尘暴]'],['给力','[给力]'],['骷髅','[骷髅]'],['最右','[最右]']]
}
,
{
id: 'rdType_11',
type: 'radio', //表单元素类型:单选按钮
items: [['太开心','[太开心]'],['挤眼','[挤眼]'],['衰','[衰]'],['感冒','[感冒]'],['可怜','[可怜]'],['汗','[汗]'],['色','[色]'],['可爱','[可爱]'],['钱','[钱]'],['ok','[ok]'],['NO','[NO]'],['蜡烛','[蜡烛]']]
}
,
{
id: 'rdType_12',
type: 'radio', //表单元素类型:单选按钮
items: [['吃狗粮','[吃狗粮]'],['蚁人','[蚁人]'],['黄蜂女','[黄蜂女]'],['吃瓜','[吃瓜]'],['允悲','[允悲]'],['坏笑','[坏笑]'],['困','[困]'],['互粉','[互粉]'],['睡','[睡]'],['并不简单','[并不简单]']]
}
,
{
id: 'rdType_13',
type: 'radio', //表单元素类型:单选按钮
items: [['阴险','[阴险]'],['嘘','[嘘]'],['嘻嘻','[嘻嘻]'],['爱你','[爱你]'],['吃惊','[吃惊]'],['污','[污]'],['鼓掌','[鼓掌]'],['给你小心心','[给你小心心]'],['心','[心]'],['赞','[赞]']]
}
,
{
id: 'rdType_14',
type: 'radio', //表单元素类型:单选按钮
items: [['微笑','[微笑]'],['偷笑','[偷笑]'],['舔屏','[舔屏]'],['亲亲','[亲亲]'],['摊手','[摊手]'],['跪了','[跪了]'],['晕','[晕]'],['米奇爱你','[米奇爱你]'],['带着微博去旅行','[带着微博去旅行]']]
}]
}],
onOk: function () { //点击确定按钮出发onOK事件。以下代码主要目的是构造一个select下拉框
qtype_1 = this.getValueOf('choice', 'rdType_1');
qtype_2 = this.getValueOf('choice', 'rdType_2');
qtype_3 = this.getValueOf('choice', 'rdType_3');
qtype_4 = this.getValueOf('choice', 'rdType_4');
qtype_5 = this.getValueOf('choice', 'rdType_5');
qtype_6 = this.getValueOf('choice', 'rdType_6');
qtype_7 = this.getValueOf('choice', 'rdType_7');
qtype_8 = this.getValueOf('choice', 'rdType_8');
qtype_9 = this.getValueOf('choice', 'rdType_9');
qtype_10 = this.getValueOf('choice', 'rdType_10');
qtype_11 = this.getValueOf('choice', 'rdType_11');
qtype_12 = this.getValueOf('choice', 'rdType_12');
qtype_13 = this.getValueOf('choice', 'rdType_13');
qtype_14 = this.getValueOf('choice', 'rdType_14');
rtn = "";
if(qtype_1 != null){
rtn += qtype_1;
}
if(qtype_2 != null){
rtn += qtype_2;
}
if(qtype_3 != null){
rtn += qtype_3;
}
if(qtype_4 != null){
rtn += qtype_4;
}
if(qtype_5 != null){
rtn += qtype_5;
}
if(qtype_6 != null){
rtn += qtype_6;
}
if(qtype_7 != null){
rtn += qtype_7;
}
if(qtype_8 != null){
rtn += qtype_8;
}
if(qtype_9 != null){
rtn += qtype_9;
}
if(qtype_10 != null){
rtn += qtype_10;
}
if(qtype_11 != null){
rtn += qtype_11;
}
if(qtype_12 != null){
rtn += qtype_12;
}
if(qtype_13 != null){
rtn += qtype_13;
}
if(qtype_14 != null){
rtn += qtype_14;
}
if (rtn != "") {
rtns = ""+rtn+"";
editor.insertHtml(rtns);
}
else {
return false;
}
}
};
});
function htmlEncode(str) {
var temp = document.createElement("div");
(temp.textContent != null) ? (temp.textContent = str) : (temp.innerText = str);
var output = temp.innerHTML;
temp = null;
return output;
}
之后就是config.js配置文件的内容了:
/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' },
{ name: 'extent', items: ["qchoice"] }
];
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select','Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
["qchoice"]
];
config.image_previewText=' ';
config.filebrowserImageUploadUrl = 'uploadFiles';
// config.extraPlugins = 'justify';
config.extraPlugins += (config.extraPlugins ? ',justify' : 'justify');
config.extraPlugins += (config.extraPlugins ? ',qchoice' : 'qchoice');
// config.extraPlugins="linkbutton";
//
// config.extraPlugins="ilink";
//
// config.extraPlugins="ijuzi";
// config.extraPlugins="iti";
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.image_previewText=' ';
config.entities = false;
};
好啦,到这里,自定义插件就算是放入成功了。咱们自定义的插件主要的逻辑结构就是在qchoice.js文件中,可以改变它的内容,来实现不同的功能。
好啦,本次记录就到这里了。
希望本文所述对大家JavaScript程序设计有所帮助。
html编辑器自定义脚本,CKeditor富文本编辑器使用技巧之添加自定义插件的方法相关推荐
- luffcc项目-08-课程详情页、CKEditor富文本编辑器、课程详情页面、后台接口
课程详情页 一.CKEditor富文本编辑器 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带h ...
- 关于ckeditor富文本编辑器上传图片返回“不正确的服务器响应”的解决方案
最新由于项目需要,使用了ckeditor富文本编辑器,需要上传图片.在使用过程中突然发现,原来的ckeditor返回图片地址的方式返回"不正确的服务器响应".当时感觉好奇怪啊.明明 ...
- ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传
项目开发需要用到在线编辑和图片上传,最终讨论使用ckeditor,原因就是其丰富的API.考虑到最新版本ckeditor5可能不够稳定,我们选择使用ckedtior4.9.2版本.官网链接:ckedi ...
- ckeditor富文本编辑器的使用和图片上传
项目开发需要用到在线编辑和图片上传,最终讨论使用ckeditor,原因就是其丰富的API.考虑到最新版本ckeditor5可能不够稳定,我们选择使用ckedtior4.9.2版本.官网链接:ckedi ...
- 使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言 在一些页面中,进行 发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器 使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
- php 富文本编辑器,开发php接入富文本编辑器KindEditor笔记 | 小灰灰博客
在做开发的时候,想使用富文本编辑器,小灰灰找了好几个富文本编辑器最终选择了kindeditor编辑器,轻量级的,文件不是很大解压之后也才1M多,而且小灰灰喜欢kind带的清除格式以及一键排版功能,个人 ...
- html5富文本编辑器图片,漂亮的富文本编辑器WYSIWYG
插件描述: 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg .先来看看官方对这款编辑器的相关功能描述吧. 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg .先来看看官方对这款编 ...
- yii2 html编辑器,浅析Yii2集成富文本编辑器redactor实例教程
在上篇文章给大家介绍了如何在yii2中集成百度编辑器umeditor以及如何解决umeditor上传图片问题. 今天我们来谈谈yii2集成另外一个强大好用的富文本编辑器Redactor,个人觉得Red ...
- html页面引入富文本编辑器,Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
最新文章
- poj2566Bound Found尺取法进阶(java)
- linux 页面内容输出,Node.js 一个简单的页面输出
- 【Spring】Spring 如何解决循环依赖问题
- android 编程 输入矩阵,Android中Matrix的pre post set方法理解
- webAppbuilder微件使用教程3 地理处理微件
- TopJUI Combobox 联动
- 利用华为ENSP模拟器分析和配置中小型企业网络的综合实验(下)
- 电脑提示MSVCP140.dll文件丢失的解决方法
- 解决mysql ERROR 2002 (HY000): Can't connect to local MySQL server through socket错误的方法
- 用批处理文件实现同步到个人时间服务器,局域网内时间同步net time的使用
- Android 悬浮窗基本使用
- Java 9~Java 17主要更新了什么?
- HTML给汉字头部添加拼音的标签
- 解决Grails2.0-M1下 Intellij IDEA 中Controller等无法自动重新加载的BUG
- 移动端SEO优化指南:详解移动站点收录、排名规则
- 网线还能这样玩???(哈哈哈,记一次差点被揍事件)
- matlab 大小写转换
- Python爬虫学习(四)爬取图片素材网站素材
- Markdown如何设置字体颜色加粗倾斜
- 一篇文章带你深入理解 Object 类和 Class 类
热门文章
- Anaconda中安装pytorch,并在pycharm中配置【win10】
- QT5 文件读写操作
- Python编程基础:第一节 变量Variables
- hive表信息查询:查看表结构、表操作等--转
- solrCloud源码分析之CloudSolrClient
- MySQL之事务隔离级别--转载
- AI模型变身文豪:“看懂”新闻报道,命名图片更有文采
- 必读 | 六月份不容错过的十大重磅好文,机器学习和数据科学的小伙伴拿走不谢 原创 2017-07-10 爱收藏的 AI科技大本营 作者 | Flavian Hautbois 翻译 | AI科技大
- 透过认知智能剖析商业本质(iPIN CEO杨洋)丨硬创公开课
- Elasticsearch-05Elasticsearch之查询与过滤