輸入訊息Annotations – 柯博文老師

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    <script src="httpsss://cdn.tiny.cloud/1/mott8ilewgbu1tryzfu9q7sdcmn5qfqt19jixbvaqgaz6kjc/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    -->
    <script src="httpsss://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="../../../system/libs/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>

    <script>


        var settings = {
            selector: 'textarea#richTextArea_ww_powenko_com',
            toolbar: ['annotate-alpha'],
            menubar: false,
            height: '750px',
            content_style: '.mce-annotation { background-color: darkgreen; color: white; } ' + 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',

            setup: function (editor) {
                editor.ui.registry.addButton('annotate-alpha', {
                    text: 'Annotate',
                    onAction: function() {
                        var comment = prompt('Comment with?');
                        editor.annotator.annotate('alpha', {
                            uid: 'custom-generated-id',
                            comment: comment
                        });
                        editor.focus();
                    },
                    onSetup: function (btnApi) {
                        editor.annotator.annotationChanged('alpha', function (state, name, obj) {
                            console.log('Current selection has an annotation: ', state);
                            btnApi.setDisabled(state);
                        });
                    }
                });

                editor.on('init', function () {
                    editor.annotator.register('alpha', {
                        persistent: true,
                        decorate: function (uid, data) {
                            return {
                                attributes: {
                                    'data-mce-comment': data.comment ? data.comment : '',
                                    'data-mce-author': data.author ? data.author : 'anonymous'
                                }
                            };
                        }
                    });
                });
            }
        };

        tinymce.init(settings);






    </script>
</head>
<body>
<textarea id="richTextArea_ww_powenko_com">

  <p>Right click on the example image below will show the newly configured context menu.</p>

  <p>Right Clicking on text should not invoke the context menu</p>
</textarea>
www.powenko.com
</body>
</html>
TinyMCEv5
