1. Home
  2. Docs
  3. TinyMCEv5
  4. plugins自製
  5. 輸入訊息Annotations

輸入訊息Annotations

[code]
<!DOCTYPE html>
<html lang="en">
<head>
<!–
<script src="https://cdn.tiny.cloud/1/mott8ilewgbu1tryzfu9q7sdcmn5qfqt19jixbvaqgaz6kjc/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
–>
<script src="https://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>
[/code]