auto apply some font whenever the user paste any data

2
votes

please help me with this.

I am using ck editor 4. The data is required in a particular font style, font size, and font color. The user will get the data from an external source and the user has to paste the data in the CKeditor.

so whenever the user will paste the data, he will have to apply style, size, and color. I want to automate this so that whenever some data is pasted in the CKeditor these styles are auto-applied.

is there any way to automate this? If yes, how?

I looked into the API docs and searched on google but couldn't find the answers.

2
ckeditorckeditor4.xckeditor5

2 Answers

1
votes

Look at CKEditor's Clipboard Integration.

You can customize the pasting of data on the paste event.

Here's a simple example of pasting text with bold and italic properties:

CKEDITOR.replace('editor', {
}).on('paste', function (evt) {
    evt.data.dataValue = '<span><b><i>' + evt.data.dataValue + '</i></b></span>';
});

Complete example:

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

<head>
    <meta charset="utf-8">
    <title>CKEditor: Customized Pasting</title>
    <script src="./node_modules/ckeditor4/ckeditor.js"></script>
</head>

<body>
    <textarea name="editor" id="editor" rows="10" cols="80">
    </textarea>

    <script>
        CKEDITOR.replace('editor', {
        }).on('paste', function (evt) {
            evt.data.dataValue = '<span><b><i>' + evt.data.dataValue + '</i></b></span>';
        });
    </script>

</body>

</html>

Demo:

custom-paste.gif

You can work on it further according to your own use-case and customize according to some existing styles or maybe write a custom plugin only to custom-paste your particular data to avoid overriding the default pasting behavior.

0
votes

you can customize the content when on paste event is occurred, use this code

CKEDITOR.replace('my_editor', {
}).on('paste', function (event) {
    event.data.dataValue = '<b><i>' + event.data.dataValue + '</i></b>';
});