Ext内置的编辑器功能相对还是很弱,例如插入图片,文件管理,这些都没有,表格编辑也很弱。我是个懒人(相信大多数程序员都是懒人)幸好Extjs官方论坛实在是太强大了,基本上是有求必应啊,社区氛围很好,貌似Ext官方有专门的团队来回复社区的问题。
      总之我就找到了扩展HtmlEditor插入图片功能的帖子,里面的代码有很多问题,我做了一些修改,算是正常了,目前只是简单的插入url图片,稍后我会扩展一个功能全面的plugin,包括管理上传的文件,文件管理等,不过这都是后话了,下面是代码和使用方法。

 
Ext.namespace('Ext.ux','Ext.ux.plugins');
Ext.ux.plugins.HtmlEditorImageInsert=function(config) {config=config||{};Ext.apply(this,config);this.init=function(htmlEditor) {this.editor=htmlEditor;this.editor.on('render',onRender,this);};this.imageInsertConfig={popTitle: config.popTitle||'Image URL',popMsg: config.popMsg||'Please select the URL of the image you want to insert:',popWidth: config.popWidth||350,popValue: config.popValue||''}this.imageInsert=function() {var range;if(Ext.isIE)range=this.editor.doc.selection.createRange();var msg=Ext.MessageBox.show({title: this.imageInsertConfig.popTitle,msg: this.imageInsertConfig.popMsg,width: this.imageInsertConfig.popWidth,buttons: Ext.MessageBox.OKCANCEL,prompt: true,value: this.imageInsertConfig.popValue,scope: this,fn: function(btn,text) {if(btn=='ok') {if(Ext.isIE)range.select();this.editor.relayCmd('insertimage',text);}}});var win=msg.getDialog()win.show.defer(200,win)}function onRender(){if( ! Ext.isSafari){this.editor.tb.add({itemId : 'htmlEditorImage',cls : 'x-btn-icon x-edit-insertimage',enableToggle : false,scope : this,handler : function(){this.imageInsert();},clickEvent : 'mousedown',tooltip : config.buttonTip || {title : '插入图片',text : '插入图片到编辑器',cls : 'x-html-editor-tip'},tabIndex :- 1});}}
}
 
使用方法:
<script type="text/javascript">
Ext.onReady(function(){Ext.QuickTips.init();new Ext.FormPanel({renderTo: 'form',defaultType: 'textfield',items: [{xtype:'htmleditor',fieldLabel:'some label',width: 650,height: 350,plugins: new Ext.ux.plugins.HtmlEditorImageInsert({popTitle: 'Image url?',popMsg: 'Please insert an image URL...',popWidth: 400,popValue: 'http://www.google.gr/intl/en_com/images/logo_plain.png'})}]});
});
</script>

转载于:https://www.cnblogs.com/jintan/archive/2009/06/29/1512955.html

扩展ExtJs的编辑器(HtmlEditor):插入图片相关推荐

  1. element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url

    vue-quill-editor默认的图片插入方式,是直接将图片转成base64编码,这样的结果是整个富文本的html片段十分冗余.我们的服务器端接收的post的数据大小都是有限制的,这样的话导致提交 ...

  2. CSDN使用MD编辑器修改插入的图片管理

    目录 一.修改大小 直接设置大小 按照比例缩小 使用HTML标记语言 二.多张图片排列 使用HTML标记语言 在MD编辑器中插入图片直接复制或者 [图片描述](url/xxx.1pg)后边加上 #pi ...

  3. UEditor 插入图片大于2M提示文件大小超出范围解决办法

    wordpress使用UEditor-KityFormula 编辑器时候插入图片的时候会提示附件大小超出范围等错误,这是因为UEditor编辑器里面有限制了图片附件大小最大不能超过2m的原因 解决办法 ...

  4. Markdown:如何修改插入图片的大小或比例

    在Markdown编辑器中插入图片有两种方法: 第一种插入图片方法 直接插入图片,即复制一张图片然后直接粘贴到编辑器里.不同编辑器的显式方式不同,有的是显式".png"的文件名,图 ...

  5. markdown插入图片的几个办法

    CSDN-markdown语法之如何插入图片 目录 图片上传方式 插入在线图片 插入本地图片 图片链接方式 行内式图片链接 参考式图片链接 几个问题探讨 问题1:图片上传和图片链接两种方式的区别 问题 ...

  6. CSDN-markdown语法之如何插入图片

    目录 图片上传方式 插入在线图片 插入本地图片 图片链接方式 行内式图片链接 参考式图片链接 几个问题探讨 问题1:图片上传和图片链接两种方式的区别 问题2:Markdown中如何指定图片的高和宽? ...

  7. Simditor 富文本编辑器多选图片上传、视频连接插入

    simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...

  8. 如何在notebook中的markdown中插入截取的图片_96编辑器教你如何在文章中插入图片、视频、音频!...

    一.如何插入图片 注意事项: 1.上传的每张图片大小请勿超过2M.如果文章内需要插入数量较多的图片,请先压缩每张图片至100kb左右,如果文章内插入较多的大图片可能会造成同步慢.生成不了图片,文章页面 ...

  9. PDF编辑器哪个好,如何在PDF中插入图片背景

    由于PDF文档不像Word那么容易编辑,并且具有较强的保密性,所以PDF文档的编辑需要借助其他第三方的PDF编辑器才能对PDF文件进行编辑,下面,我就教大家如何利用PDF编辑器在PDF中插入图片背景, ...

  10. 使用Typora编辑器编写md文档插入图片方法

    使用Typora编辑器编写md文档插入图片方法 截图粘贴到文档中: 图片右键,选择"复制图片到"将图片复制到md文档相对路径: 将图片路径修改为相对路径,并替换斜杆为"/ ...

最新文章

  1. 一起因网线问题引起的网络故障的解决过程
  2. 深入解读:KubeVela 与 PaaS 有何不同?
  3. php定时发送生日模块消息_Swoft 2.0.5 更新,新增高效秒级定时任务、异常管理组件...
  4. 80. 删除有序数组中的重复项 II
  5. 音视频技术的高光时刻: LiveVideoStackCon 2019上海 音视频技术大会
  6. HDLBits答案(18)_Verilog有限状态机(5)
  7. 《C#多线程编程实战(原书第2版)》——3.2 在线程池中调用委托
  8. SetWinEventHook和SetWindowsHookEx的异同[转]
  9. Task类的简单介绍
  10. python 如何封装dll_python怎么封装dll
  11. 自己做量化交易软件(37)小白量化实战10--操作方法与MetaTrader5高频策略的进化
  12. 捷联惯导系统模型及仿真(二)
  13. BAT、头条的时长战争:百度逆势领跑
  14. SpringBoot集成微信支付(二维码支付)
  15. 中望3D2022 草图综合训练
  16. bootstrap3 文件上传插件fileinput中文说明文档
  17. PS_一寸(2.5*3.5cm)照片排列在六寸(4*6)相片纸
  18. 嵌入式软件管培生每日总结-第6-7天
  19. 阿里云服务器更换Ubuntu操作系统并配置图形界面
  20. linux 取得文件行数

热门文章

  1. 史上最迷你人脸数据集olivettifaces基于卷积神经网络模型+迁移学习构建人脸识别模型实战
  2. Java并发工具类之CountDownLatch
  3. python 传递任意数量的实参
  4. c make干什么用得_CMake简单使用
  5. git add commit checkout 工作区 暂存区 远程仓库 区别
  6. python调用shell命令 批量执行python程序
  7. Kubernetes 小白学习笔记(13)--k8s集群路线-init流程
  8. php针探,php针探代码,这款针探可以检测你机器的(1/7)
  9. linux启动hbase_HBase集群环境配置
  10. 基于SSM的废品商城