Question

超链接在 Ext 中不可点击。 JS html 编辑器在下面的一段代码中。

我检查了 Answer ，这对我没有帮助。

脚本

    <!DOCTYPE html>
<html>

<head>
    <link      href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
        rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

<script type="text/javascript">
    Ext.onReady(function (){
        Ext.create('Ext.form.HtmlEditor',{
            width: 650,
            height: 150,
            renderTo: document.getElementById('htmlEditorId')
        });
    });
</script>
</head>
<body>
    <div id="htmlEditorId" />
</body>
</html>

输出：

在 DummyURL 中，我提供了一个有效值但仍然无法点击，甚至无法使用 Ctrl+点击。

我是 Ext 的新手。 JS 谁能帮我一下。

我可以对现有脚本进行哪些修改以使其正常工作。？

Answer 1

AFAIK 链接不仅在 WYSIWYG 编辑器中不可点击，而且在大多数文本处理应用程序中也是不可点击的。无论如何，您可以使用可点击的 html 创建一个预览面板，如下所示：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            viewModel: {
                htmlString: ''
            },
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                height: 200
            },
            bodyPadding: 5,
            items: [{
                xtype: 'panel',
                title: "Editor",
                flex: 1,
                items: [{
                    xtype: 'htmleditor',
                    bind: {
                        value: '{htmlString}'
                    }

                }]
            }, {
                xtype: 'panel',
                title: "Preview",
                bind: {
                    html: '{htmlString}'
                },
                margin: '5 0 0 0'
            }],

            renderTo: Ext.getBody()
        });
    }
});

Ext 中的超链接不可点击。 JS html 编辑器

1 个答案: