為什么80%的碼農都做不了架構師？>>> ??

代碼如下：

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);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }

轉載于:https://my.oschina.net/Rayn/blog/309689

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Ext.js4.x 的面板中嵌入UEditor编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。