mohamedsabil83 / filament-forms-tinyeditor Goto Github PK
View Code? Open in Web Editor NEWA TinyMce Editor component for filament
License: MIT License
A TinyMce Editor component for filament
License: MIT License
When I drag a block that contains TinyEditor inside the Builder\Block , TinyEditor loses its content an focus and I am unable to edit it.
i dont know
2.14
8.2
9.0
No response
can you help
I trying to copy and paste bullet pointed text from MS Word , but it does not work but if I copy-paste from GoogleDocs or Pages in MacOS it works well.
2.0
8.2.0
10.31.0
Windows
I googled for the problem but there only says that need to buy some premium version of tiny mce.
I entered the edit or create records page but the editor will not be shown
use ->spa() on the panel
2
8.1
10.10
macOS, Windows, Linux
No response
It's not a bug report, but the other options were not working for me.
What I would like to do is use a server side file/image browser (e.g. https://unisharp.github.io/laravel-filemanager/) to insert images. How can I achieve that? So far I managed to show the media browser, but selecting any file does not have any affect, does not display the image in my text.
Thanks in advance.
Hello,
we added the plugin code (in plugins and toolbar config - default profile).
Although the button appeared and we are able to click it, in the popup we are unable to edit the source code. It seems like a css bug.
If I upload an image in the editor when creating a post, I have a problem that the path to the image starts with this "./../storage/upload/", but it should be "/storage/upload/".
If I open the post for editing and re-upload the file in the editor, it works fine.
This means that I have a problem only when creating a post.
I sue this construction
TinyEditor::make('content')
->fileAttachmentsDisk('local')
->fileAttachmentsVisibility('storage')
->fileAttachmentsDirectory('public/uploads')
1.7.2
8.2.3
10
No response
No response
Uploaded images are not saved to storage unless you switch focus from image to text and back to image.
To clarify, this happens when you paste an image from the clipboard.
First, the base64 code of the image is inserted into the html code, after switching focus from image to text and back, the file is uploaded to the server and the base64 code is replaced with a link.
I would like the upload to the server to start immediately after inserting the image from the buffer.
🔗
toolbox2.0.4
8.1.22
10.25.0
macOS
No response
JS errors in the TinyMCE version used in v1.7.5 - had to use that version because v2+ requires Filament v3 and I am on a v2 repo.
composer require mohamedsabil83/filament-forms-tinyeditor:^1.7.5
1.7.5
8.2
8.83.27
No response
Probably will postpone the need for this until I can just upgrade to V3, but any other lingering v2 users may also have this issue.
I'm trying to upload image using:
TinyEditor::make('content') ->fileAttachmentsDisk('local') ->fileAttachmentsVisibility('public') ->fileAttachmentsDirectory('public')
Path saved in db is: ../../storage/ while it needs to be either /storage or ../../../storage.
I'm using Laravel 10 and filament v3.
Is this expected, or I need to adjust path before saving in database?
P.S. When using edit feature, it correctly uploads and saves as : ../../../storage.
Thank you!
When I upload image in tinymce text editor it saves wrong path in database, while on edit works as expected.
2.1
8.2
10
Windows
No response
Implemented turbolinks following
https://filamentphp.com/tricks/hotwire-turbo-stimulus-with-vite
the form field intializes when hard reloading but dissapears when switching to different route
tinymce.min.js script load twice
Script should load once and only when it is used.
In a situation where the editor is embedded in a nested repeater field that has a sorting option, after changing the order of the elements, the editor breaks (the content in it disappears and the content area becomes inactive - you can't click on it and write). It seems that it is not being re-initialized correctly.
An example of a form configuration that causes this error:
Repeater::make('questions')
->label('FAQ categories')
->createItemButtonLabel('Add category')
->orderable()
->collapsible()
->schema([
TextInput::make('category')
->required(),
Repeater::make('questions')
->collapsible()
->orderable()
->schema([
TextInput::make('question')
->required(),
TinyEditor::make('answer')
->required(),
])
->columns(2)
])
->columns(2);
As above
1.5
8.1.13
9.19
Windows
No response
Not properly load with spatie-laravel-translatable-plugin after cople changing languges
when i change language first time works properply, after changing again get empty field:
and that in console
2
8.2
10
No response
No response
I use spatie-laravel-translatable-plugin that is responsible for language translations.
I use Arabic (RTL) and English (LTR).
However the direction stays same as the Layout language not the language of the translation package.
use spatie-laravel-translatable-plugin
make model field translatable by the spatie laravel package
use ar and en for the package
use TinyEditor in the form fields for the translatable field
change the language using the LocaleSwitcher action button
direction doesn't change for ar or en. It just keeps as the Panel Layout language direction.
2.0
8.1
10
macOS
I used to use Voyager Admin Panel and I override the directionality: 'rtl | ltr' using js when the language change and rebuild the tinyMCE editor on every click to language switcher.
However filament uses A different world with livewire and alpine witch I find harder to customize (for now at least).
Thank you.
It tried to make a GET call every time I load the page.
Is that normal?
Data is not saved in the tinyeditor field.
v2.0.5
8.2.10
10.22
No response
filament 3.0.63
protected function getFormActions(): array
{
return [
$this->getSaveFormAction(), // don't work
...
];
}
// original
protected function getSaveFormAction(): Action
{
return Action::make('save')
->label(__('filament-panels::resources/pages/edit-record.form.actions.save.label'))
->submit('save') // THIS problem
->keyBindings(['mod+s']);
}
// custom
protected function getSaveFormAction(): Action
{
return Action::make('save')
->action(function(){
$this->save(); // its work
});
}
Javascript errors occured after opening the table properties window.
Draw a table > Open Table Properties
^1.7
8.1.15
^9.19
No response
I'm not sure whether it's got anything to do with Alpine Focus, because I did a quick console.log and noticed
e.target.container.closest('.filament-modal')
is returning null
Hi , How can we see source code ? How can we add on toolbar?
2.0.1
8.1.22
10.19.0
macOS
No response
Like #23 this issue still persists. When re-ordering or removing a field from a repeater the content is gone.
Pacakge version v1.6.6
seems to introduce a bug (which i dont have in v1.6.5
!) :
Alpine Expression Error: expected expression, got '}'
Expression: "(() => {
window.addEventListener('DOMContentLoaded', () => initTinymce());
$nextTick(() => initTinymce());
const initTinymce = () => {
if (window.tinymce !== undefined && initialized === false) {
tinymce.init({
target: $refs.tinymce,
language: 'en',
skin: typeof theme != 'undefined' ? theme : 'light',
content_css: this.skin === 'dark' ? 'dark' : '',
max_height: 0,
menubar: true,
plugins: ['advlist autoresize codesample directionality emoticons fullscreen hr image imagetools link lists media table toc wordcount'],
toolbar: 'undo redo removeformat | formatselect fontsizeselect | bold italic | rtl ltr | alignjustify alignright aligncenter alignleft | numlist bullist | forecolor backcolor | blockquote table toc hr | image link media codesample emoticons | wordcount fullscreen',
toolbar_mode: 'sliding',
relative_urls: true,
remove_script_host: true,
convert_urls: true,
branding: false,
images_upload_handler: (blobInfo, success, failure, progress) => {
if (!blobInfo.blob()) return
$wire.upload(`componentFileAttachments.data.content`, blobInfo.blob(), () => {
$wire.getComponentFileAttachmentUrl('data.content').then((url) => {
if (!url) {
failure('Error uploading file')
return
}
success(url)
})
})
},
automatic_uploads: true,
templates: [],
setup: function(editor) {
editor.on('blur', function(e) {
state = editor.getContent()
})
editor.on('init', function(e) {
if (state != null) {
editor.setContent(state)
}
})
editor.on('OpenWindow', function(e) {
e.target.container.closest('.filament-modal').setAttribute('x-trap.noscroll', 'false')
})
editor.on('CloseWindow', function(e) {
e.target.container.closest('.filament-modal').setAttribute('x-trap.noscroll', 'isOpen')
})
function putCursorToEnd() {
editor.selection.select(editor.getBody(), true);
editor.selection.collapse(false);
}
$watch('state', function(newstate) {
// unfortunately livewire doesn't provide a way to 'unwatch' so this listener sticks
// around even after this component is torn down. Which means that we need to check
// that editor.container exists. If it doesn't exist we do nothing because that means
// the editor was removed from the DOM
if (editor.container && newstate !== editor.getContent()) {
editor.resetContent(newstate || '');
putCursorToEnd();
}
});
},
...
});
initialized = true;
}
}
// We initialize here because if the component is first loaded from within a modal DOMContentLoaded
// won't fire and if we want to register a Livewire.hook listener Livewire.hook isn't available from
// inside the once body
if (!window.tinyMceInitialized) {
window.tinyMceInitialized = true;
$nextTick(() => {
Livewire.hook('element.removed', (el, component) => {
if (el.nodeName === 'INPUT' && el.getAttribute('x-ref') === 'tinymce') {
tinymce.get(el.id)?.remove();
}
});
});
}
})()"
Filament should load the tinymce.min.js asset. But I'm getting a 404 error.
When you install your plugin in filament and you go to the page where the editor is included.
1.7.1
8.2.4
10.4.1
macOS
Maybe the error is here: https://github.com/mohamedsabil83/filament-forms-tinyeditor/blob/main/src/FilamentFormsTinyeditorServiceProvider.php#L45
If you change the path to…
'filament-forms-tinyeditor' => asset('vendor/mohamedsabil83/filament-forms-tinyeditor/resources/dist/tinymce/tinymce.min.js'),
… filament will find the right asset file and send it to the browser. In this function filament checks if the asset file exists in the composers vendor directory. If the file is not exists, filament will throw a 404.
I get an error "Undefined variable $getHintAction" when trying to use in Filament admin panel.
The editor is being use like the below:
TinyEditor::make('body')->height(900)->required()->label('Editor')->reactive()
Commenting out the lines below in tiny-editor.blade.php fixes the issue.
:hint-action="$getHintAction()"
:hint-color="$getHintColor()"
:hint-icon="$getHintIcon()"
after add code : TinyEditor::make('text')->required(), - and after write text into editor - i get error : field is required. But text exist in editor
after add code : TinyEditor::make('text')->required(), - and after write text into editor - i get error : field is required. But text exist in editor
2
8.2
10
No response
No response
Hi,
I have upload image in the content. Then it successfully saved. But when I go to the edit page it use wrong URL:
http://local.dev/admin/storage/sDaZKcLKYCG0pCScdKwTIba3p3PBrhdoovCqoMEC.jpg
the right URL is http://local.dev/storage/sDaZKcLKYCG0pCScdKwTIba3p3PBrhdoovCqoMEC.jpg . without /admin
Any solution?
Thank you in advance
When disabling dark mode in a panel, the editor does not load since it can't find a default value for "theme", it should default to "light".
File:
vendor/mohamedsabil83/filament-forms-tinyeditor/resources/views/tiny-editor.blade.php
Line:
24
Disable dark mode and it will fail loading:
public function panel(Panel $panel): Panel { return $panel ->default() ... ->darkMode(false) ... }
2
8.1
10
No response
No response
When TinyEditor used inside a Builder or Repeater Filament component and I drag and drop it the TinyEditor field cleared and can't be edit.
Make a Filament Form, put inside Repeater Component and use TinyEditor in this Component. Next make some repeated fields of the Repeater, put some text inside and try to change thier order.
1.7.4
8.1
9
Linux
Moving the iFrame editor around the DOM is not supported in Tiny. They offer to use remove() and init() instead
I’m not sure if this is a bug here or in TinyMCE itself (if at all) – I don’t have a full TinyMCE install anywhere to test with.
For semantic reasons (and for reasons of CSS styling), I don’t want my editor to use <em>
and <strong>
for italicised and bolded text, so I’ve added the following to override TinyEditor to use <i>
and <b>
instead, based on the formats
documentation:
'profiles' => [
'base' => [
'custom_configs' => [
'formats' => [
'bold' => [
[
'inline' => 'b',
'remove' => 'all'
],
[
'inline' => 'strong',
'remove' => 'all'
]
],
'italic' => [
[
'inline' => 'i',
'remove' => 'all'
],
[
'inline' => 'em',
'remove' => 'all'
]
]
]
],
],
]
I expected this to consistently convert all <strong>
and <em>
tags/elements to <b>
and <i>
tags/elements, respectively, both when viewing, editing and saving using TinyEditor, and when I’m editing text in the editor now, the correct tags are in fact used: the indicator at the bottom shows P » B
instead of P » STRONG
, and when I inspect the actual element in the browser, I can confirm that it is a <b>
element, not a <strong>
element.
But as soon as I save the resource, the <i>
and <b>
tags are transformed into <em>
and <strong>
tags again, so when I reload the page after saving, the same element that was <b>
before is now suddenly a <strong>
element.
Add formats
overrides as per above and use the Bold and Italic functionality to format it. Confirm that the status bar at the bottom of the editor correctly says P » I/B
. Save the Filament resource you’re editing and reload the page, and the formatting has been reset to P » EM/STRONG
.
1.7.4
8.1.12
9.52.10
macOS, Windows
When the record containing the text is deleted or the photo in the text is removed from it, the photo file remains but it should be deleted.
Maybe the photos and files that are being uploaded could be managed with spatie/medialibrary - would be so much better.
just add and remove the photo
2
8.2
10
No response
No response
How can I select px instead of pt in the editor?
I don't want to use the font size in pt, I want to select pixels.
1.7
8.0
8
macOS
No response
Hello!
First of all, thank you for your great effort and awesome TinyMCE plugin.
I have more a question rather than a bug:
Is there a way to reduce the number of publicated assets, especially lang files ?
To be honest, I dont need all of them. The "eng" will be enough.
Can you provide a solution to optimize publishing?
Thanks!
php artisan vendor:publish --tag="filament-forms-tinyeditor-assets"
expected behaviour:
the number of lang files reduced.
1.7.3
8.1
10.0
No response
No response
Here is the form schema:
public static function getFormSchema(): array
{
return [
Card::make()
->schema([
Forms\Components\FileUpload::make('image')->image()->maxSize(4096)->label('Avatar'),
TinyEditor::make('content'),
TextInput::make('author_name')->required(),
TextInput::make('author_listings')->required(),
]),
];
}
The field is rendered correctly in Chrome, however, it doesn't load in Firefox:
PHP 8.2.11
Laravel 10.29.0
Filament 3.0.85
filament-forms-tinyeditor 2.0.9
I installed and changed the standard Filament's RichEditor (RichEditor works fine) to TinyEditor I get this error:
Undefined variable $getHintAction
[resources / views / vendor / filament-forms-tinyeditor / tiny-editor.blade.php
just install it and try to use it as described in the docs
2.0.9
8.2.11
10.29.0
macOS
No response
I have a problem when trying to add an upload files to the link I add:
file_picker_types: 'file image media',
file_picker_callback: (callback, value, meta) =>{ ...},
but this doesn't add the upload to the filepicker
php artisan vendor:publish --tag="filament-forms-tinyeditor-config"
add
'profiles' => [
'default' => [
'plugins' => 'advlist autoresize codesample directionality emoticons fullscreen hr image link lists media table wordcount',
'toolbar' => 'undo redo removeformat | formatselect fontsizeselect | bold italic | rtl ltr | alignjustify alignright aligncenter alignleft | numlist bullist | forecolor backcolor | blockquote table hr | image link media codesample emoticons | wordcount fullscreen',
'upload_directory' => null,
'custom_configs' => [
'file_picker_types' => 'file image media',
'file_picker_callback' => '(callback, value, meta) =>{ ...}',
],
], ...
1.7.4
8.2
10.13.5
Linux
No response
Hello, the error is the following: When an image is uploaded to the s3 disk, it is displayed perfectly while it is in the window. But, once the record is saved and the window is refreshed, the image does not appear.
This is the code in the Filamenphp Resource
And that in console
Any help?
1.7.5
8.1.10
9.48.0
No response
I am using filamentphp v2
When I commit and pull to my production machine, the TinyEditor fields do not appear. There is space on the screen for them, but they are just blank. (I ran composer update after installation)
Is it possible that I have not some of the assets needed to display the fields?
I can't see the TinyEditor field on my production machine.
``
1.7.5
8.1.7
10.18.0
Linux
No response
I have a problem with the file upload, I want to convert the image to webp but I can't change the source code. Is there an easy way?
I want to add this: images_upload_url: '/convert',
Current
8.1.0
10.0.0
macOS
No response
Not a bug but I cant request feature. Thanks for the great package
Missing in the doc if using filament forms standalone include this step.
php artisan vendor:publish --tag="filament-forms-tinyeditor-assets"
Also if using filament forms standalone skip step:
php artisan filament:assets
Install on standalone filament forms using steps.
2.0.0
8.1
9.0.0
No response
No response
Hi,
when i upload image and then delete the record. the image still exists in the storage. any help?
thank you in advance
Steps to reproduce:
I believe this is connected with this: tinymce/tinymce#5169 or this: froala/react-froala-wysiwyg#122 (comment) and the solution would be using this code on Tinymce instance:
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
e.stopImmediatePropagation();
}
});
Unfortunately I couldn`t figure this out.
I try to see source code and I get that error
Just use codemirror and try to see source code
1.7.1
8.1
v9
Linux
No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.