Extjs 如何将Froala HTML编辑器与Ext JS Classic toolkit结合使用？_Extjs

Extjs 如何将Froala HTML编辑器与Ext JS Classic toolkit结合使用？

extjs

Extjs 如何将Froala HTML编辑器与Ext JS Classic toolkit结合使用？,extjs,Extjs,我想使用Froala WYSIWYG HTML编辑器和ExtJS经典应用程序。您能告诉我如何将Froala编辑器添加到我的经典应用程序中吗以下是如何将其添加到Ext JS 7 Classic应用程序中方向要在classic中使用Froala编辑器，需要做两件事。 1.将javascript资源导入到应用程序中 2.使用文本区域初始化Froala编辑器 HTML源代码 <!DOCTYPE html> <html> <head> <meta

我想使用Froala WYSIWYG HTML编辑器和ExtJS经典应用程序。您能告诉我如何将Froala编辑器添加到我的经典应用程序中吗

以下是如何将其添加到Ext JS 7 Classic应用程序中

方向

要在classic中使用Froala编辑器，需要做两件事。 1.将javascript资源导入到应用程序中 2.使用文本区域初始化Froala编辑器

HTML源代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <!-- Include Editor style. -->
    <link href='https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />

    <!-- Include JS file. -->
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/js/froala_editor.pkgd.min.js'></script>
</head>

<body>

</body>

</html>

Ext.application({
    name: 'Ext JS 7 Classic & Froala Example for Modern & Classic Themes',

    // You get a Froala license with the Ext JS enterprise edition.
    // Email Froala support to get your license.
    // https://wysiwyg-editor.froala.help/hc/en-us

    launch: function () {
        var editor;

        var htmlValue = '<p>The <a href="https://www.froala.com/wysiwyg-editor">Froala Editor</a> is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications.</p><p><br></p><p><img src="https://www.sencha.com/wp-content/uploads/2015/03/built-in-support-for-rpc-requestfactory-and-json.png" style="width: 300px;" class="fr-fic fr-dib fr-fil"></p>';

        var displayHtml = function () {
            var htmlContent = editor.html.get();
            Ext.Msg.alert('Status', htmlContent);
        }

        // Once the panel is ready, render the Froala HTML Editor
        var renderEditor = function () {
            editor = new FroalaEditor('#my-froala-editor-id1', {}, function () {
              // Call the method inside the initialized event.
              editor.html.set(htmlValue);
            });
        }

        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            fullscreen: true,
            margin: 20,
            items: [{
                xtype: 'panel',
                padding: 0,
                items: [{
                    xtype: 'textareafield',
                    id: 'my-froala-editor-id1',
                    width: '100%',
                    height: 400,
                    // Fix editor bottom clipping from panel margin...
                    margin: '0 0 80 0'
                }],
                listeners: {
                    boxready: renderEditor, // classic listener
                    painted: renderEditor, // modern listener
                }
            }, {
                xtype: 'button',
                text: 'Display HTML',
                margin: '5 0 10 0',
                handler: displayHtml, // classic listener
                listeners: {
                    tap: displayHtml, // modern listener
                }
            }]
        });

    }
});

Javascript源代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <!-- Include Editor style. -->
    <link href='https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />

    <!-- Include JS file. -->
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/js/froala_editor.pkgd.min.js'></script>
</head>

<body>

</body>

</html>

Ext.application({
    name: 'Ext JS 7 Classic & Froala Example for Modern & Classic Themes',

    // You get a Froala license with the Ext JS enterprise edition.
    // Email Froala support to get your license.
    // https://wysiwyg-editor.froala.help/hc/en-us

    launch: function () {
        var editor;

        var htmlValue = '<p>The <a href="https://www.froala.com/wysiwyg-editor">Froala Editor</a> is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications.</p><p><br></p><p><img src="https://www.sencha.com/wp-content/uploads/2015/03/built-in-support-for-rpc-requestfactory-and-json.png" style="width: 300px;" class="fr-fic fr-dib fr-fil"></p>';

        var displayHtml = function () {
            var htmlContent = editor.html.get();
            Ext.Msg.alert('Status', htmlContent);
        }

        // Once the panel is ready, render the Froala HTML Editor
        var renderEditor = function () {
            editor = new FroalaEditor('#my-froala-editor-id1', {}, function () {
              // Call the method inside the initialized event.
              editor.html.set(htmlValue);
            });
        }

        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            fullscreen: true,
            margin: 20,
            items: [{
                xtype: 'panel',
                padding: 0,
                items: [{
                    xtype: 'textareafield',
                    id: 'my-froala-editor-id1',
                    width: '100%',
                    height: 400,
                    // Fix editor bottom clipping from panel margin...
                    margin: '0 0 80 0'
                }],
                listeners: {
                    boxready: renderEditor, // classic listener
                    painted: renderEditor, // modern listener
                }
            }, {
                xtype: 'button',
                text: 'Display HTML',
                margin: '5 0 10 0',
                handler: displayHtml, // classic listener
                listeners: {
                    tap: displayHtml, // modern listener
                }
            }]
        });

    }
});

Ext.application({
名称：“Ext JS 7 Classic&Froala现代与经典主题示例”，
//您可以使用Ext JS enterprise edition获得Froala许可证。
//向Froala支持发送电子邮件以获取您的许可证。
// https://wysiwyg-editor.froala.help/hc/en-us
启动：函数（）{
变量编辑器；
var htmlValue='是一个用Javascript编写的轻量级WYSIWYG HTML编辑器，可为您的应用程序启用富文本编辑功能。

；
var displayHtml=函数（）{
var htmlContent=editor.html.get（）；
Ext.Msg.alert（'Status'，htmlContent）；
}
//面板准备好后，呈现Froala HTML编辑器
var renderditor=函数（）{
editor=new-FroalaEditor（'#my-froala-editor-id1'，{}，函数（）{
//在初始化事件内调用该方法。
editor.html.set（htmlValue）；
});
}
Ext.create（'Ext.panel.panel'{
renderTo:Ext.getBody（），
全屏：对，
差额：20，
项目：[{
xtype:'面板'，
填充：0，
项目：[{
xtype:'textareafield'，
id:'my-froala-editor-id1'，
宽度：“100%”，
身高：400，
//从面板边距修复编辑器底部剪辑。。。
边距：“0 80 0”
}],
听众：{
boxready:renderEditor，//经典侦听器
绘制：renderditor，//现代监听器
}
}, {
xtype:'按钮'，
文本：“显示HTML”，
边距：'5100'，
处理程序：displayHtml，//经典侦听器
听众：{
点击：displayHtml，//modern listener
}
}]
});
}
});

僧茶提琴示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <!-- Include Editor style. -->
    <link href='https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />

    <!-- Include JS file. -->
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/js/froala_editor.pkgd.min.js'></script>
</head>

<body>

</body>

</html>

Ext.application({
    name: 'Ext JS 7 Classic & Froala Example for Modern & Classic Themes',

    // You get a Froala license with the Ext JS enterprise edition.
    // Email Froala support to get your license.
    // https://wysiwyg-editor.froala.help/hc/en-us

    launch: function () {
        var editor;

        var htmlValue = '<p>The <a href="https://www.froala.com/wysiwyg-editor">Froala Editor</a> is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications.</p><p><br></p><p><img src="https://www.sencha.com/wp-content/uploads/2015/03/built-in-support-for-rpc-requestfactory-and-json.png" style="width: 300px;" class="fr-fic fr-dib fr-fil"></p>';

        var displayHtml = function () {
            var htmlContent = editor.html.get();
            Ext.Msg.alert('Status', htmlContent);
        }

        // Once the panel is ready, render the Froala HTML Editor
        var renderEditor = function () {
            editor = new FroalaEditor('#my-froala-editor-id1', {}, function () {
              // Call the method inside the initialized event.
              editor.html.set(htmlValue);
            });
        }

        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            fullscreen: true,
            margin: 20,
            items: [{
                xtype: 'panel',
                padding: 0,
                items: [{
                    xtype: 'textareafield',
                    id: 'my-froala-editor-id1',
                    width: '100%',
                    height: 400,
                    // Fix editor bottom clipping from panel margin...
                    margin: '0 0 80 0'
                }],
                listeners: {
                    boxready: renderEditor, // classic listener
                    painted: renderEditor, // modern listener
                }
            }, {
                xtype: 'button',
                text: 'Display HTML',
                margin: '5 0 10 0',
                handler: displayHtml, // classic listener
                listeners: {
                    tap: displayHtml, // modern listener
                }
            }]
        });

    }
});

在此处试用代码：