CKEditor自定义按钮插入服务端图片

CKEditor 富文本编辑器很好用,功能很强大,在加上支持服务端图片上传的CKFinder更是方便,

最近在使用CKFinder的时候发现存在很多问题,比如上传图片的时候,图片不能按时间降序排列,另外CKFinder是也是收费的,所以自己想实现一个简单的类似CKFinder的功能,

本节只讲在CKEditor实现服务器图片的插入插件实现方法。

CKEditor版本是 ## CKEditor 4.4.4

第一、定义插件

1.在ckeditor\plugins文件夹下,新建serverimg文件夹,

2.在serverimg下新建plugin.js 文件,

CKEDITOR.plugins.add(
 "serverimg",
 {
 requires: ["dialog"],
 lang: ["en"],
 init: function (editor) {
 editor.addCommand("serverimg", new CKEDITOR.dialogCommand("serverimg"));
 editor.ui.addButton(
 "serverimg",
 {
 label: "插入服务端图片",
 command: "serverimg",
 icon: this.path + "images/pic.png",
 toolbar: 'insert'
 });
 CKEDITOR.dialog.add("serverimg", this.path + "dialogs/code.js");
 }
 }
);

3.在serverimg下新建image,里面存放图标使用的图片pic.png

第二、定义插件中的对话框内容

1.在serverimg中新建dialogs文件夹,

2.在dialogs文件内,分别创建code.js (用于执行弹出对话框执行的js代码)和PicPreview.html(用于浏览服务器图片)

3.code.js 代码如下

CKEDITOR.dialog.add(
 "serverimg",
 function (editor) {
 var timestamp = Math.round(new Date().getTime() / 1000);
 var ckeditorPage = '../../ImgMgr/ImgBrowser.aspx?from=ckeditor&timestamp=' + timestamp;
 return {
 title: "插入代码",
 minWidth: 800,
 minHeight: 600,
 contents:
 [
 {
  id: "tab1",
  label: "",
  title: "",
  expand: true,
  padding: 0,
  elements:
  [
  {
  type: "html",
  html: "<iframe id='img_browser'name='img_browser' src='" + ckeditorPage + "'></iframe>",
  style: "width:100%;height:600px;padding:0;"// style='width:800px;height:600px'
  }
  ]
 }
 ],
 onOk: function () { 

 //插入富文本编辑器内容 window.frames["img_browser"].document.getElementById("hf_imgsrc");//
 var hf = document.getElementById('img_browser').contentWindow.document.getElementById("hf_imgsrc");
 if (hf != null) {
  var imgSrc = hf.value;
  editor.insertHtml("<img src='" + imgSrc + "' />"); //将select插入编辑器

 } else {
  alert("hf is null");
 }

 },
 //onHide: function () { document.getElementById('img_browser').contentDocument.location.reload(); },
 //resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT
 };
 }
);

4.说明,由于我在弹出的对话框中插入的是一个iframe,src正好是我自己做的一个浏览服务器图片的页面,当选中图片后,点击对话框中的确定按钮,即可获取图片路径,

最终包装成img ,插入到富文本编辑器里面 ,当然你可以做的更好,允许图片设置宽度和高度,这里就不在讲了。

第三、配置插件

上面的插件开发完成后,页面上并不会显示我们开发的插件,还需要配置下config.js,找到ckeditor文件下的config.js 打开,在配置里面增加config.extraPlugins = 'serverimg';

第四、最终效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • FCKeditor添加自定义按钮

    在FCKeditor目录里的fckconfig.js打开,找到FCKConfig.ToolbarSets["Default"] 这里的设置是配置功能按钮的,你需要的留下,不需要的可以删掉,也可以注释掉. 如需要多种配置,可以设置多个FCKConfig.ToolbarSets["你自己命个名name"] 后面跟配置详情.在引用编辑器的时候,以PHP为例:把fckeditor.php复制一个命名fckeditor1.php,在这里可以改配置.($this->Too

  • FCKeditor添加自定义按钮的方法

    增加按钮有以下几步: 1.为按钮增加图片: FCK的所有按钮图片是存放在一个图片文件里的,这一点比较独特,文件存放在相应皮肤目录下,如:/FCK/skins/silever/fck_strip.gif.通过Fireworks或Phtoshop打开该文件可以发现一个很长的图片,里面包含所有按钮的图片,现在您可以在该图片的最下面增加您自定义的按钮,注意,每个按钮的尺寸是16*16px. 2.为按钮增加功能代码: 增加按钮需要对FCK/editor/js目录中的两个核心文件进行修改:fckeditor

  • FCK编辑器(FCKEditor)添加新按钮和功能的修改方法

    需要修改的文件: fckconfig.js zh-cn.js en.js fckeditorcode_gecko.js || fckeditorcode_ie.js(针对IE以外的浏览器||针对ie浏览器,如果要支持两种浏览器,就这两个包都修改) 第一步:在Toolbar中添加功能按钮 fckconfig.js:FCKConfig.ToolbarSets["Default"] 中添加按钮名称 FCKConfig.ToolbarSets["Default"] = [

  • CKEditor自定义按钮插入服务端图片

    CKEditor 富文本编辑器很好用,功能很强大,在加上支持服务端图片上传的CKFinder更是方便, 最近在使用CKFinder的时候发现存在很多问题,比如上传图片的时候,图片不能按时间降序排列,另外CKFinder是也是收费的,所以自己想实现一个简单的类似CKFinder的功能, 本节只讲在CKEditor实现服务器图片的插入插件实现方法. CKEditor版本是 ## CKEditor 4.4.4 第一.定义插件 1.在ckeditor\plugins文件夹下,新建serverimg文件夹

  • 使用gd库实现php服务端图片裁剪和生成缩略图功能分享

    裁剪示例: 最终裁剪成的图片: 其中虚线框内就是要裁剪出来的图片,最终保存成100宽的图片.代码如下: 复制代码 代码如下: $src_path = '1.jpg';//创建源图的实例$src = imagecreatefromstring(file_get_contents($src_path)); //裁剪开区域左上角的点的坐标$x = 100;$y = 12;//裁剪区域的宽和高$width = 200;$height = 200;//最终保存成图片的宽和高,和源要等比例,否则会变形$fi

  • 基于PHP服务端图片生成缩略图的方法详解

    复制代码 代码如下: <?php//定义缩略图片尺寸$picSize = array(              '100_100'=> 1,              '200_100'=> 1           );$imagePath = "../image/";function parseUrl($url){   preg_match("/(?P<name>[\w\d]+)_w(?P<width>\d+)_h(?P<h

  • C#服务端图片打包下载实现代码解析

    一,设计多图片打包下载逻辑: 1,如果是要拉取腾讯云等资源服务器的图片, 2,我们先把远程图片拉取到本地的临时文件夹, 3,然后压缩临时文件夹, 4,压缩完删除临时文件夹, 5,返回压缩完给用户, 6,用户就去请求下载接口,当下载完后,删除压缩包 二,如下代码,ImageUtil using System; using System.Collections.Generic; using System.IO; using System.IO.Compression; using System.Li

  • Vue.js与 ASP.NET Core 服务端渲染功能整合

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oopsguy.com 我真的很喜欢在前端使用 Vue.js,Vue 服务端渲染直到第二个版本才被支持. 在本例中,我想展示如何将 Vue.js  服务端渲染功能整合 ASP.NET Core. 我们在服务端使用了 Microsoft.AspNetCore.SpaServices 包,该包提供 ASP.N

  • Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

    使用教程(注意细看总结部分,写了几点,希望有所帮助): 1.安装插件:npm install vue-quill-editor 2.安装插件依赖:npm install quill 3.main.js文件中引入: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' impor

  • IOS 开发之自定义按钮实现文字图片位置随意定制

    IOS 开发之自定义按钮实现文字图片位置随意定制 可能有些看到这篇文章的朋友会觉得很不屑:"按钮谁不会自定义?还需要看你的?" 也确实,按钮是我们项目中最常见的控件之一,天天在使用.对于不同类型的按钮,我们是否有更加简便的方法来实现需求是我们需要做的.这里我提出自己的两种方法,您可以对你自己平时自定义按钮的方法做一下对比,看看哪种方法更加简单. 多说一句,千万不要觉得知识简单,觉得自己会了,没必要学习.'往往简单的东西存在大智慧'(这个比给满分),知识都是慢慢积累出来的. 按钮是应用中

  • 在服务端(Page.Write)调用自定义的JS方法详解

    首先,我们应该可以先明确,为什么我们用Page.Write把自定义的JS方法输出到页面上为什么IE不能识别,会出现"XXX未定义"的错误.原因很简单,因为我们用Page.Write输出的脚本是出现在页面的最顶端.IE读到是javascript函数的时候,就开始执行,但是此时我们link的js文件并未被IE读入,所以IE无法识别我们定义在js文件里面的方法.那write alert为什么可以呢?因为alert是IE内嵌的脚本功能函数,不管有没有页面,IE都认得它.找到问题所在,自然就好解

  • ASP.NET MVC实现单个图片上传、限制图片格式与大小并在服务端裁剪图片

    本篇,在ASP.NET MVC4下实现单个图片上传,具体功能包括: 1.在客户端选择图片,并限制图片的大小和格式 2.在客户端上传图片,并显示预览图 3.在服务端限制图片的大小和格式 4.在服务端保存图片时,把图片裁剪成某个固定尺寸 本篇源码在:https://github.com/darrenji/FileUploadInMVC 实现的大致思路是: 客户端限制图片大小和格式,通过写一个jQuery插件来实现 服务端实现图片裁剪,通过使用ImageSize组件来实现 首先是一个用来承载上传信息的

  • bootstrap Table服务端处理分页(后台是.net)

    本文实例为大家分享了bootstrap Table服务端处理分页的具体代码,供大家参考,具体内容如下 要考虑函数可被可重复使用(调用),需要将可变化的变为参数封装起来 function HQCreatTables(ob) { var option = { method: 'get', dataType: "json", striped: true,//设置为 true 会有隔行变色效果 undefinedText: "空",//当数据为 undefined 时显示的

随机推荐