Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: force paste as plain text #139 #140

Merged
merged 4 commits into from
Sep 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading