如何在小部件上保存数据属性（拖放）

问题描述 投票：1回答：1

我正在使用CKEditor 4.11.3，我正在使用自定义编辑器开发拖放功能。 我的目标是为给定的文档模板提供可替换的术语，例如：某人的地址。 这些信息来自表单中的其他字段，因此我需要一种方法来提供一些元信息，以便处理文档模板并进行替换。 例如：将我的小部件视为 <span class =“h-person”>姓名</ span> <span class =“h-person”>邮政编码</ span>， 我想在数据库上存储类似的东西 <span class =“h-person”data-bean-model =“person.fullName”>名称</ span> <span class =“h-person”data-bean-model =“person.homeAdress.zipCode”data-format-mask =“xx.xxx-xxx”>邮政编码</ span>

我已经尝试在paste事件中的dataValue上添加数据属性，但没有成功。即使在标识小部件的标记内手动保存附加信息时，在检索数据并识别小部件时，数据属性也会丢失。 下面是基于https://ckeditor.com/docs/ckeditor4/latest/examples/draganddrop.html的示例。

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="./ckeditor/ckeditor.js"></script>
</head>

<body>
<style>
    .columns {
        background: #fff;
        color: #000;
        padding: 20px;
        border: 1px solid #E7E7E7;
    }

    .columns:after {
        content: "";
        clear: both;
        display: block;
    }

    .columns>.editor {
        float: left;
        width: 65%;
        position: relative;
        z-index: 1;
    }

    .columns>.contacts {
        float: right;
        width: 35%;
        box-sizing: border-box;
        padding: 0 0 0 20px;
    }

    #contactList {
        list-style-type: none;
        margin: 0 !important;
        padding: 0;
    }

    #contactList li {
        background: #FAFAFA;
        margin-bottom: 1px;
        height: 56px;
        line-height: 56px;
        cursor: pointer;
    }

    #contactList li:nth-child(2n) {
        background: #F3F3F3;
    }

    #contactList li:hover {
        background: #FFFDE3;
        border-left: 5px solid #DCDAC1;
        margin-left: -5px;
    }

    .contact {
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .contact .u-photo {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }

    #editor1 .h-card {
        background: #FFFDE3;
        padding: 3px 6px;
        border-bottom: 1px dashed #ccc;
    }

    #editor1 {
        border: 1px solid #E7E7E7;
        padding: 0 20px;
        background: #fff;
        position: relative;
    }

    #editor1 .h-card .p-tel {
        font-style: italic;
    }

    #editor1 .h-card .p-tel::before,
    #editor1 .h-card .p-tel::after {
        font-style: normal;
    }

    #editor1 .h-card .p-tel::before {
        content: "(☎ ";
    }

    #editor1 .h-card .p-tel::after {
        content: ")";
    }

    #editor1 h1 {
        text-align: center;
    }

    #editor1 hr {
        border-style: dotted;
        border-color: #DCDCDC;
        border-width: 1px 0 0;
    }
</style>

<div class="columns">
    <div class="editor">
        <textarea name="editor1" id="editor1" rows="10" cols="80">
            <h1>The Annual Meeting of Fictional Characters</h1>
            <h3>Technical Announcement</h3>
            <p>We hereby have the pleasure to announce that the theme of this year&apos;s meeting is &quot;<strong>E&#x2013;ink Technology and Classical Fairy Tales</strong>&quot;. As every year, the event will be hosted in <em>The Wonderland</em> by <span class="h-card" data-bean-model="person.homeAdress.zipCode" data-format-mask="xx.xxx-xxx"><a class="p-name u-email" href="mailto:[email protected]">Alice</a> <span class="p-tel">+20 4345 234 235</span></span> and starts tomorrow at 8:00 GMT.</p>
            <h3>Speakers and Agenda</h3>
            <p>TBA.</p>
            <h3>Venue</h3>
            <p>For detailed information, please contact <span class="h-card" data-something="something1"><a class="p-name u-email" href="mailto:[email protected]">Huckleberry Finn</a> <span class="p-tel">+48 1345 234 235</span></span>.</p>
            <h3>Accommodation</h3>
            <p>Many thanks to <span class="h-card" data-bean-model="person.homeAdress.zipCode" data-format-mask="xx.xxx-xxx"><a class="p-name u-email" href="mailto:[email protected]">Robinson Crusoe</a> <span class="p-tel">+45 2345 234 235</span></span> who kindly offered his island to the guests of the annual meeting.</p>
            <hr>
            <p style="text-align: right;"><span class="h-card" data-bean-model="person.homeAdress.zipCode" data-format-mask="xx.xxx-xxx"><a class="p-name u-email" href="mailto:[email protected]">Little Red Riding Hood</a> <span class="p-tel">+45 2345 234 235</span></span></p>
        </textarea>
    </div>
    <div class="contacts">
        <h3>List of Droppable Contacts</h3>
        <ul id="contactList"></ul>
    </div>
</div>

<script>
    'use strict';
    var CONTACTS = [{
        name: 'Huckleberry Finn',
        tel: '+48 1345 234 235',
        email: '[email protected]',
        avatar: 'hfin',
        beanModel : 'person.homeAdress.zipCode',
        formatMask : 'xx.xxx-xxx'
    },
    {
        name: 'D\'Artagnan',
        tel: '+45 2345 234 235',
        email: '[email protected]',
        avatar: 'dartagnan',
        beanModel : 'person.homeAdress.zipCode',
        formatMask : 'xx.xxx-xxx'
    },
    {
        name: 'Phileas Fogg',
        tel: '+44 3345 234 235',
        email: '[email protected]',
        avatar: 'pfog',
        beanModel : 'person.homeAdress.zipCode',
        formatMask : 'xx.xxx-xxx'
    },
    {
        name: 'Alice',
        tel: '+20 4345 234 235',
        email: '[email protected]',
        avatar: 'alice',
        beanModel : 'person.homeAdress.zipCode',
        formatMask : 'xx.xxx-xxx'
    },
    {
        name: 'Little Red Riding Hood',
        tel: '+45 2345 234 235',
        email: '[email protected]',
        avatar: 'lrrh',
        beanModel : 'person.homeAdress.zipCode',
        formatMask : 'xx.xxx-xxx'
    },
    {
        name: 'Winnetou',
        tel: '+44 3345 234 235',
        email: '[email protected]',
        avatar: 'winetou',
        beanModel : 'person.homeAdress.zipCode',
        formatMask : 'xx.xxx-xxx'
    },
    {
        name: 'Edmond Dantès',
        tel: '+20 4345 234 235',
        email: '[email protected]',
        avatar: 'edantes',
        beanModel : 'person.homeAdress.zipCode',
        formatMask : 'xx.xxx-xxx'
    },
    {
        name: 'Robinson Crusoe',
        tel: '+45 2345 234 235',
        email: '[email protected]',
        avatar: 'rcrusoe',
        beanModel : 'person.homeAdress.zipCode',
        formatMask : 'xx.xxx-xxx'
    }
    ];

    CKEDITOR.plugins.add('hcard', {
        requires: 'widget',

        init: function(editor) {
            editor.widgets.add('hcard', {
                allowedContent: 'span(!h-card); a[href](!u-email,!p-name); span(!p-tel)',
                requiredContent: 'span(h-card)',
                pathName: 'hcard',

                upcast: function(el) {
                    return el.name == 'span' && el.hasClass('h-card');
                }
            });

            editor.addFeature(editor.widgets.registered.hcard);

            editor.on('paste', function(evt) {
                var contact = evt.data.dataTransfer.getData('contact');

                if (!contact) {
                    return;
                }

                evt.data.dataValue =
                    '<span class="h-card" data-bean-model="' + contact.beanModel + ' data-format-mask="' + contact.formatMask + '">' +
                    '<a href="mailto:' + contact.email + '" class="p-name u-email">' + contact.name + '</a>' +
                    ' ' +
                    '<span class="p-tel">' + contact.tel + '</span>' +
                    '</span>';
            });
        }
    });

    CKEDITOR.on('instanceReady', function() {
        CKEDITOR.document.getById('contactList').on('dragstart', function(evt) {
            var target = evt.data.getTarget().getAscendant('div', true);

            CKEDITOR.plugins.clipboard.initDragDataTransfer(evt);

            var dataTransfer = evt.data.dataTransfer;

            dataTransfer.setData('contact', CONTACTS[target.data('contact')]);
            dataTransfer.setData('text/html', target.getText());

            if (dataTransfer.$.setDragImage) {
                dataTransfer.$.setDragImage(target.findOne('img').$, 0, 0);
            }
        });
    });

    CKEDITOR.replace('editor1', {
        extraPlugins: 'hcard,sourcedialog,justify,format'
        , height: 400
    });
</script>

<script>
    'use strict';

    addItems(
        CKEDITOR.document.getById( 'contactList' ),
            new CKEDITOR.template(
                '<div class="contact h-card" data-contact="{id}" data-bean-model="{beanModel}" data-format-mask="{formatMask}">' +
                '<img src="assets/draganddrop/img/{avatar}.png" alt="avatar" class="u-photo" /> {name}' +
                '</div>'
            ),
        CONTACTS
    );

    function addItems( listElement, template, items ) {
        for ( var i = 0, draggable, item; i < items.length; i++ ) {
            item = new CKEDITOR.dom.element( 'li' );

            draggable = CKEDITOR.dom.element.createFromHtml(
                template.output( {
                    id: i,
                    name: items[ i ].name,
                    avatar: items[ i ].avatar,
                    beanModel: items[ i ].beanModel,
                    formatMask: items[ i ].formatMask
                } )
            );

            draggable.setAttributes( {
                draggable: 'true',
                tabindex: '0'
            } );

            item.append( draggable );
            listElement.append( item );
        }
    }
</script>
</body>

</html>

它需要将这些额外信息存储在数据库中，以便能够在以后从数据库中检索时再次执行替换。

ckeditor ckeditor4.x
1个回答
0
投票

得到它了！

在init函数内部，为allowedContent上的属性添加了规则[data-*]

editor.widgets.add('hcard', {
    allowedContent: 'span(!h-card)[data-*]; a[href](!u-email,!p-name); span(!p-tel)',
    requiredContent: 'span(h-card)',
    pathName: 'hcard',

见https://ckeditor.com/docs/ckeditor4/latest/guide/dev_allowed_content_rules.html

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.