• Javascript


    ExtJs - 整合百度文章编辑器(ExtJs UEditor)

    第一步:去官网下载最新版本的UEditor,UEditor下载

    第二步:在编辑器根目录创建一个Extjs-Editor.js,录入以下代码。

    目录结构如下

      

    Ext.define('App.ux.UEditor', {
        extend: 'Ext.form.field.Text',
        alias: ['widget.ueditor'],
        //alternateClassName: 'Ext.form.UEditor',
        fieldSubTpl: [
            '<textarea id="{id}" {inputAttrTpl}',
                '<tpl if="name"> name="{name}"</tpl>',
                '<tpl if="rows"> rows="{rows}" </tpl>',
                '<tpl if="cols"> cols="{cols}" </tpl>',
                '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
                '<tpl if="size"> size="{size}"</tpl>',
                '<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
                '<tpl if="readOnly"> readonly="readonly"</tpl>',
                '<tpl if="disabled"> disabled="disabled"</tpl>',
                '<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
        //            ' class="{fieldCls} {inputCls}" ',
                '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
                ' autocomplete="off">
    ',
                '<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>',
            '</textarea>',
            {
                disableFormats: true
            }
        ],
        ueditorConfig: {},
        initComponent: function () {
            var me = this;
            me.callParent(arguments);
        },
        afterRender: function () {
            var me = this;
            me.callParent(arguments);
            if (!me.ue) {
                //编辑器各项参数配置,参考UEditor.config.js
                me.ue = UE.getEditor(me.getInputId(), Ext.apply(me.ueditorConfig, {
                    //编辑器高度,可在此处修改,但不要在表单配置中修改,否则滚动条出现后工具栏会消失
                    initialFrameHeight:320,
                    initialFrameWidth: '100%',
                    autoHeightEnabled: false,
                    enableAutoSave: false,
                    saveInterval:0
                }));
                me.ue.ready(function () {
                    me.UEditorIsReady = true;
                });
    
                //这块 组件的父容器关闭的时候 需要销毁编辑器 否则第二次渲染的时候会出问题 可根据具体布局调整
                var win = me.up('window');
                if (win && win.closeAction == "hide") {
                    win.on('beforehide', function () {
                        me.onDestroy();
                    });
                } else {
                    var panel = me.up('panel');
                    if (panel && panel.closeAction == "hide") {
                        panel.on('beforehide', function () {
                            me.onDestroy();
                        });
                    }
                }
            } else {
                me.ue.setContent(me.getValue());
            }
        },
        //返回编辑器实例
        getEditor:function(){
            var me=this;
            return UE.getEditor(me.getInputId());
        },
        setValue: function (value) {
            var me = this;
            if (!me.ue) {
                me.setRawValue(me.valueToRaw(value));
            } else {
                me.ue.ready(function () {
                    me.ue.setContent(value);
                });
            }
            me.callParent(arguments);
            return me.mixins.field.setValue.call(me, value);
        },
        getRawValue: function () {
            var me = this;
            if (me.UEditorIsReady) {
                me.ue.sync(me.getInputId());
            }
            v = (me.inputEl ? me.inputEl.getValue() : Ext.value(me.rawValue, ''));
            me.rawValue = v;
            return v;
        },
        destroyUEditor: function () {
            var me = this;
            if (me.rendered) {
                try {
                    me.ue.destroy();
                    var dom = document.getElementById(me.id);
                    if (dom) {
                        dom.parentNode.removeChild(dom);
                    }
                    me.ue = null;
                } catch (e) { }
            }
        },
        onDestroy: function () {
            var me = this;
            me.callParent();
            me.destroyUEditor();
        }
    });
    View Code

    第三步:引入以下文件 (前三个是Extjs必须的文件,后三个是编辑器要使用的文件)

    <link href="../scripts/Extjs4.2/resources/css/ext-all-neptune.css" rel="stylesheet" />
    <script src="../scripts/Extjs4.2/ext-all.js"></script>
    <script src="../scripts/Extjs4.2/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" charset="utf-8" src="ExtJsEditor/utf8-net/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ExtJsEditor/utf8-net/ueditor.all.min.js"> </script>
    <script src="ExtJsEditor/Extjs-Editor.js"></script>

    第四部:创建formPanel 

    Ext.onReady(function () {
    
        //展开树的按钮
        Ext.create("Ext.button.Button", {
            id:"treeBtn",text: "选择父栏目", style: "background:red;border:none;", icon: "../Image/expand.png",
            handler: function () {
                this.border = false;
                var  columnLabel=Ext.getCmp("columnLabel")
                var treepanel = Ext.getCmp("dataTree");
                if (!window.counter) { window.counter = 1; }
                if (window.counter % 2 != 0) {
                    treepanel.show();//显示树
                    this.setIcon("../Image/expand.png");
                }
                else {
                    treepanel.hide();//隐藏树
                    this.setIcon("../Image/expand-down.png");
                }
                window.counter += 1;
            }
    
        });
    
        Ext.create("Ext.form.FormPanel", {
            id:"articleForm",
            renderTo: "articleEditor",
            title: '写文章',
             1000,
            style: "padding:10px;",
            frame: false,
            border: false,
            buttonAlign: "center",
            items: [
                {
                    xtype: "fieldset",
                    layout: "column",
                    defaultType: "textfield",
                    style:"margin-top:10px",
                     950,
                    border: false,
                    fieldDefaults: {
                        labelWidth: 40,
                        labelAlign: "left"
                    },
                    items: [
                            { fieldLabel: "标  题", name:"contenTitle", 930, }
                    ]
                },
                {
                    xtype: "fieldset",
                    layout: "column",
                    defaultType: "textfield",
                    style: "margin-top:10px",
                     950,
                    border: false,
                    fieldDefaults: {
                        labelWidth: 40,
                        labelAlign: "left"
                    },
                    items: [
                            { fieldLabel: "作  者", name: "contenAuthor",  930 }
                    ]
                },
                {
                    xtype: "fieldset",
                    layout: "column",
                    defaultType: "textfield",
                     950,
                    height:450,
                    border: false,
                    fieldDefaults: {
                        labelWidth: 40,
                        labelAlign: "left"
                    },
                    //编辑器
                    items: [
                        {
                            xtype: 'ueditor',
                            fieldLabel: '内  容',
                            id: "content",
                            //不要设置高度,否则滚动条出现后工具栏会消失
                             930
                        }
                    ]
                }
            ],
            buttons: [
                    { text: 'OK', style: "margin-top:20px", handler: function () {  } },
                    { text: "Cancel", style: "margin-top:20px", handler: function () { form.reset(); } }
            ]
        });
    
    });
    View Code

    获取编辑器的值

    Extjs-Editor.js中我定义了一个返回UEditor实例的方法,如下: 

    getEditor:function(){
            var me=this;
            return UE.getEditor(me.getInputId());
    }

    获取编辑器中的值

    要设置编辑器的其它项或获取html值等操作,可参考编辑器根目录下的Index.html源码。这里给个例子,比如获取纯文本:

    //找到表单面板中的表单,再find文本框,调用getEditor()即可获得编辑器实例,getContentTxt()获得纯文本
    Ext.getCmp("articleForm").getForm().findField("content").getEditor().getContentTxt()
    View Code

    解决下拉框不显示选项的问题

    打开编辑器根目录,搜索ueditor.config.js,打开该文件,查找被注释掉的zIndex,把值改为1100000同时去掉注释保存,问题解决。注:以下提供的包是已经更改过zIndex的文件。

     

    Extjs-UEditor下载(已配置好Extjs-Editor.js和zIndex)

  • 相关阅读:
    Spring Boot 系列(九)数据层-集成Spring-data-jpa
    Spring Boot 系列(八)@ControllerAdvice 拦截异常并统一处理
    Spring Boot 系列(七)Swagger2-生成RESTful接口文档
    Spring Boot 系列(六)web开发-Spring Boot 热部署
    Spring Boot 系列(五)web开发-Thymeleaf、FreeMarker模板引擎
    Spring Boot 系列(四)静态资源处理
    查看oracle中表的索引
    freemarker模板加载TemplateLoader常见方式
    servlet的生命周期详解
    eclipse 自动创建web.xml
  • 原文地址:https://www.cnblogs.com/myrocknroll/p/7209033.html
Copyright © 2020-2023  润新知