Ext.js4.x 的面板中嵌入UEditor编辑器
為什么80%的碼農(nóng)都做不了架構(gòu)師?>>> ??
代碼如下:
var?activityHTMLId;
Ext.define("ActivityHTMLInfo",{
? ? extend:"Ext.panel.Panel",
? ? initComponent:function(){
? ? ? ? activityHTMLId = "activityHTML"+new Date().getTime() + "";
? ? ? ? Ext.apply(this,{
? ? ? ? ? ? items:[{
? ? ? ? ? ? ? ? html:"<div id='"+activityHTMLId+"'></div>"
? ? ? ? ? ? }],
? ? ? ? ? ? listeners:{
? ? ? ? ? ? ? ? render:function(){
? ? ? ? ? ? ? ? ? ? var ue = UE.getEditor(activityHTMLId, {
? ? ? ? ? ? ? ? ? ? ? ? height: 650
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? var activityContent = "";
? ? ? ? ? ? ? ? ? ? var activityId = this.up("form").getForm().getFieldValues("activityId").activityId;
? ? ? ? ? ? ? ? ? ? if(activityId){
? ? ? ? ? ? ? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? Ext.getCmp("activityDetail").setActiveTab(2);
? ? ? ? ? ? ? ? ? ? ? ? ? ? var record = Ext.getCmp("ActivityGridPanel").getSelectionModel().getLastSelected();
? ? ? ? ? ? ? ? ? ? ? ? ? ? var content = record.data.activityContent;
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(content)
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ue.setContent(content); ? ? //ue.execCommand('insertHtml', content);
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }, 600);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? this.doLayout();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? this.callParent();
? ? }
});
關于UEditor方面的東西,自行參考UEditor的API說明。
之所以用到settimeout,是由于,Ext在渲染的過程中,有沒有UEditor得不到這個渲染元素id 會報錯。所以進行了延遲渲染。
效果如圖:
______________________________________________________________________________
另一種方式:
items: {
? ? ? ? ? ? ? ? xtype: 'component',
? ? ? ? ? ? ? ? autoEl: {
? ? ? ? ? ? ? ? ? ? tag: 'div'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? id: win.editorId,
? ? ? ? ? ? ? ? listeners: {
? ? ? ? ? ? ? ? ? ? afterrender: function (c) {
? ? ? ? ? ? ? ? ? ? ? ? var ue = UE.getEditor(win.editorId, {
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? ue.addListener('ready', function (editor) {? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ue.setHeight(c.getHeight() - ue.container.firstChild.offsetHeight - 30);
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? beforedestroy: function (c) {
? ? ? ? ? ? ? ? ? ? ? ? UE.delEditor(editorId);
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? resize: function (c) {
? ? ? ? ? ? ? ? ? ? ? ? var ue = UE.getEditor(win.editorId);
? ? ? ? ? ? ? ? ? ? ? ? if (ue.isReady == 1 || ue.isReady) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ue.setHeight(c.getHeight() - ue.container.firstChild.offsetHeight - 30);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
轉(zhuǎn)載于:https://my.oschina.net/Rayn/blog/309689
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯,堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的Ext.js4.x 的面板中嵌入UEditor编辑器的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 感到疲惫心累的心情说说222个
- 下一篇: httpd协议概述