`
Fangrn
  • 浏览: 822662 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

扩展 ExtJs的编辑器(HtmlEditor):插入图片

阅读更多

       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>
 
分享到:
评论
2 楼 Fangrn 2012-06-30  
我这个是在2,3上面测试使用的
1 楼 小汤姆 2012-06-14  
没有用啊,浏览器报错:
htmleditor.js:47Uncaught TypeError: Object [object Object] has no method 'add'


我用的是Ext JS4

相关推荐

    扩展ExtJs的HtmlEditor编辑器插入图片.pdf

    扩展ExtJs的HtmlEditor编辑器插入图片.pdf 扩展ExtJs的HtmlEditor编辑器插入图片是指在ExtJs框架中,使用HtmlEditor编辑器来实现图片的插入功能。HtmlEditor是ExtJs提供的一个富文本编辑器组件,提供了基本的文本...

    htmleditor扩展插入图片功能,使用Extjs+servlet请求实现

    在Web开发中,富文本编辑器(HTML Editor)是一个常用工具,它允许用户在网页上进行类似Word的文本编辑操作,包括插入图片、链接等。本文将深入探讨如何使用ExtJS框架结合Servlet来扩展HTML Editor的插入图片功能。 ...

    extjs htmleditor 图片上传和添加网络图片编辑器

    添加网络图片则是让用户输入图片的URL,HTMLEditor会直接插入这个URL到编辑器内容中。为了保证用户体验,可以添加一个验证步骤,检查URL是否有效,或者尝试预览图片,确保可以正确显示。 实现这些功能的具体步骤...

    Extjs_htmleditor插件

    ExtJS HTML Editor插件是基于ExtJS框架的一个富文本编辑器组件,用于在Web应用程序中创建和编辑HTML内容。这个插件提供了丰富的文本格式化工具,使得非技术用户也能轻松地进行图文混排,创建复杂布局,从而实现网页...

    完整的Extjs4 htmleditor上传图片插件(包括实例和用法)

    总的来说,这个资源为使用ExtJS4开发富文本编辑器的开发者提供了一套完整的解决方案,特别是对于需要在编辑器中插入图片的场景。通过学习和应用这份资料,开发者不仅可以掌握如何在ExtJS4的htmleditor中实现图片上传...

    TextArea_HTMLEditor 编辑器 learning extjs 中文

    EXTJS中的TextArea_HTMLEditor是用于创建富文本编辑器的组件,它基于IFrame技术,提供了丰富的编辑功能,如字体样式调整、段落格式化、插入图片、链接等。这个组件允许用户以WYSIWYG(所见即所得)的方式编辑HTML...

    Ext的CKEditor组件

    6. **图片上传**:CKEditor内置了图片上传功能,用户可以直接在编辑器中上传图片,这通常需要后端配合提供一个接收图片的接口。你可以通过配置CKEditor的图片上传选项来定制上传过程,比如设置上传URL、限制文件大小...

    在线所见即所得HTML编辑器的实现原理浅析

    除了基础的样式设置,更高级的编辑器还会提供更多的功能,比如插入图片、链接、列表、表格等。这些可以通过监听用户的键盘事件或使用按钮控件触发相应的命令执行。对于插入内容,可以使用`insertAtCursor`函数,根据...

Global site tag (gtag.js) - Google Analytics