Skip to content

Commit

Permalink
Merge pull request #140 from mostafaznv/dev
Browse files Browse the repository at this point in the history
feat: force paste as plain text #139
  • Loading branch information
mostafaznv authored Sep 25, 2024
2 parents 8a3cc38 + 6b7efe4 commit 3461b57
Show file tree
Hide file tree
Showing 8 changed files with 130 additions and 9 deletions.
2 changes: 2 additions & 0 deletions config/nova-ckeditor.php
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,8 @@

'content-lang' => 'en',

'force-paste-as-plain-text' => false,

'ui-language' => [
'name' => 'en',

Expand Down
2 changes: 1 addition & 1 deletion dist/js/field.js

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions docs/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
* [Height](advanced-usage/ckeditor-field-options/height.md)
* [Limit On Index](advanced-usage/ckeditor-field-options/limit-on-index.md)
* [Content Language](advanced-usage/ckeditor-field-options/content-language.md)
* [Force Paste as Plain Text](advanced-usage/ckeditor-field-options/force-page-as-plain-text.md)
* [Text Part Language](advanced-usage/ckeditor-field-options/text-part-language.md)
* [General HTML Support](advanced-usage/ckeditor-field-options/general-html-support.md)
* [Group Items In Overflow Mode](advanced-usage/ckeditor-field-options/group-items-in-overflow-mode.md)
Expand All @@ -52,6 +53,7 @@
* [Items](advanced-usage/configuration/toolbars/toolbar-1/items.md)
* [Options](advanced-usage/configuration/toolbars/toolbar-1/options.md)
* [Content Lang](advanced-usage/configuration/toolbars/toolbar-1/content-lang.md)
* [Force Past as Plain Text](advanced-usage/configuration/toolbars/toolbar-1/force-page-as-plain-text.md)
* [UI Language](advanced-usage/configuration/toolbars/toolbar-1/ui-language/README.md)
* [UI Language Name](advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-name.md)
* [UI Language Script](advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-script.md)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
description: forcePasteAsPlainText
---

# Force Paste as Plain Text

<table><thead><tr><th>Argument</th><th width="141">Type</th><th width="149" data-type="checkbox">Required</th><th>Default</th></tr></thead><tbody><tr><td>status</td><td>bool</td><td>false</td><td>true</td></tr></tbody></table>

In some cases, you might want to paste content from your clipboard as plain text, removing any HTML tags.

By default, CKEditor preserves the structure of the original content and ensures HTML is safely maintained. However, if you’d prefer to paste content without any formatting, as plain text, you can use the `forcePasteAsPlainText` function.



```php
use Mostafaznv\NovaCkEditor\CkEditor;

class Article extends Resource
{
public function fields(Request $request): array
{
return [
CkEditor::make(trans('Content'), 'content')
->forcePasteAsPlainText()
];
}
}
```

{% hint style="info" %}
This feature has been available since <mark style="color:red;">v7.5.0</mark>
{% endhint %}



Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
description: toolbars.toolbar-1.force-paste-as-plain-text
---

# Force Past as Plain Text

<table><thead><tr><th width="390">Property Name</th><th width="152.33333333333331">Type</th><th>Default</th></tr></thead><tbody><tr><td>toolbars.toolbar-1.force-paste-as-plain-text</td><td>bool</td><td>false</td></tr></tbody></table>

For certain cases, you may want to paste content from your clipboard as plain text, stripping away any HTML tags.

By default, when pasting content into the editor, CKEditor will try to maintain the original content’s structure and keep the HTML in a safe way. However, if you’d prefer to paste content without any formatting and only as plain text, you can set <mark style="color:red;">`toolbars.toolbar-1.force-paste-as-plain-text`</mark> to <mark style="color:red;">`true`</mark> in the configuration.



{% hint style="info" %}
This feature has been available since <mark style="color:red;">v7.5.0</mark>
{% endhint %}



32 changes: 29 additions & 3 deletions docs/getting-started/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ php artisan vendor:publish --provider="Mostafaznv\NovaCkEditor\FieldServiceProvi

#### 3. Prepare the migration, configurations and models

After publishing stubs, essential `Image`, `Video` and `Audio` classes will be created in the `app/Models` and `app/Nova/Resources` directories respectively. These classes are used for the `media-picker` in the CKEditor field.
After publishing stubs, essential `Image`, `Video`, `Audio` and `File` classes will be created in the `app/Models` and `app/Nova/Resources` directories respectively. These classes are used for the `media-picker` in the CKEditor field.

{% tabs %}
{% tab title="Image" %}
Expand Down Expand Up @@ -109,8 +109,30 @@ If you wish to modify the disk name, remember to update it in the `App\Nova\Reso
{% endhint %}
{% endtab %}
{% tab title="File" %}
You should create a disk in `config/filesystems.php`:
```php
'disks' => [
'file' => [
'driver' => 'local',
'root' => public_path('uploads/file'),
'url' => env('APP_URL') . '/uploads/file',
]
]
```
{% hint style="info" %}
If you wish to modify the disk name, remember to update it in the `App\Nova\Resources\File` class as well. The third argument of the make function in the FileUpload field corresponds to the disk name.
{% endhint %}
{% hint style="info" %}
This feature was introduced in version <mark style="color:red;">7.3.0</mark> of the NovaCKEditor
{% endhint %}
{% endtab %}
{% tab title="Migration" %}
**If you have chosen Larupload**, there is no need to make any changes to the migration file. You can refer to the [nova-video](https://github.com/mostafaznv/nova-video) and [larupload](https://github.com/mostafaznv/larupload) documentations for additional configuration options.
**If you have chosen Larupload**, there is no need to make any changes to the videos migration file. You can refer to the [nova-video](https://github.com/mostafaznv/nova-video) and [larupload](https://github.com/mostafaznv/larupload) documentations for additional configuration options.
**If you have chosen Laravel's file system**, you must make some changes to the migration file. In the migration file, replace the <mark style="color:red;">upload column</mark> with a <mark style="color:red;">string column</mark>.
Expand All @@ -134,7 +156,7 @@ class CreateVideosTable extends Migration
{% endtab %}
{% tab title="Model" %}
**If you have chosen Larupload**, there is no need to make any changes to the model. You can refer to the [nova-video](https://github.com/mostafaznv/nova-video) and [larupload](https://github.com/mostafaznv/larupload) documentations for additional configuration options.
**If you have chosen Larupload**, there is no need to make any changes to the `Video` model. You can refer to the [nova-video](https://github.com/mostafaznv/nova-video) and [larupload](https://github.com/mostafaznv/larupload) documentations for additional configuration options.
**If you have chosen Laravel's file system**, you must make some changes to the model. Remove the Larupload <mark style="color:red;">trait</mark> and the <mark style="color:red;">attachments function</mark> from the model.
Expand Down Expand Up @@ -170,6 +192,10 @@ class Video extends Model
{% endtab %}
{% endtabs %}
#### 4. Migrate
```shell
Expand Down
24 changes: 19 additions & 5 deletions resources/js/fields/editor-field.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<default-field :field="currentField" :errors="errors" :full-width-content="true">
<template #field>
<textarea ref="editor" class="hidden" :id="currentField.attribute" :class="errorClasses" :value="value" />
<textarea ref="editor" class="hidden" :id="currentField.attribute" :class="errorClasses" :value="value"/>

<p v-if="currentField.helpText" v-html="currentField.helpText" class="help-text help-text mt-2" />
<p v-if="currentField.helpText" v-html="currentField.helpText" class="help-text help-text mt-2"/>

<media-browser
@select="$options[editorName].execute('mediaBrowser', $event)"
Expand Down Expand Up @@ -94,7 +94,7 @@ export default {
headers: {
...CkEditor.defaultConfig.simpleUpload.headers,
'X-Toolbar': this.currentField.toolbarName
'X-Toolbar': this.currentField.toolbarName
},
},
...toolbarOptions
Expand Down Expand Up @@ -128,6 +128,20 @@ export default {
if (this.currentField.readonly) {
editor.enableReadOnlyMode(this.$options[this.editorUUID]);
}
if (this.currentField.forcePasteAsPlainText) {
editor.editing.view.document.on('clipboardInput', (evt, data) => {
evt.stop()
editor.model.change(writer => {
writer.insertText(
data.dataTransfer.getData('text/plain'),
editor.model.document.selection.getFirstPosition()
)
})
})
}
})
.catch((e) => {
console.log(e)
Expand Down Expand Up @@ -170,7 +184,7 @@ export default {
if (Array.isArray(url)) {
const urls = url
for (let j = 0; j< urls.length; j++) {
for (let j = 0; j < urls.length; j++) {
urls[j] = RegexParser(urls[j])
}
Expand Down Expand Up @@ -320,7 +334,7 @@ export default {
<style lang="sass">
.ck.ck-reset_all, .ck.ck-reset_all *
// direction: ltr !important
// direction: ltr !important
.ck-content.ck-editor__editable
resize: vertical
Expand Down
22 changes: 22 additions & 0 deletions src/CkEditor.php
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,13 @@ class CkEditor extends Field
*/
public string $contentLanguage;

/**
* Force Paste As Plain Text
*
* @var bool
*/
public bool $forcePasteAsPlainText;

/**
* Text Part Language
*
Expand Down Expand Up @@ -208,6 +215,19 @@ public function contentLanguage(string $lang): self
return $this;
}

/**
* Set Force Paste As Plain Text
*
* @param bool $status
* @return $this
*/
public function forcePasteAsPlainText(bool $status = true): self
{
$this->forcePasteAsPlainText = $status;

return $this;
}

/**
* Set Text Part Language
*
Expand Down Expand Up @@ -331,6 +351,7 @@ public function jsonSerialize(): array
'height' => $this->height,
'indexLimit' => $this->indexLimit,
'contentLanguage' => $this->contentLanguage,
'forcePasteAsPlainText' => $this->forcePasteAsPlainText,
'textPartLanguage' => $this->textPartLanguage,
'htmlSupport' => $this->htmlSupport,
'uiLanguage' => $this->uiLanguage,
Expand Down Expand Up @@ -421,6 +442,7 @@ private function prepareToolbar(string $toolbar, array $items = null): void
$this->fileBrowser = $toolbar['browser']['file'] ?? false;
$this->snippetBrowser = $this->prepareSnippets($toolbar['snippets']);
$this->contentLanguage = $toolbar['content-lang'];
$this->forcePasteAsPlainText = $toolbar['force-paste-as-plain-text'] ?? false;
$this->textPartLanguage = $toolbar['text-part-language'] ?? $defaultTextPartLanguage;
$this->htmlSupport = $toolbar['html-support'] ?? $defaultHtmlSupport;
$this->uiLanguage = $toolbar['ui-language']['name'] ?? 'en';
Expand Down

0 comments on commit 3461b57

Please sign in to comment.