MatDialog triggered from tinymce not getting initialized until window resize - javascript

I am trying to open MatDialog from tinymce custom button but that matdialog is not getting initialized until I resize the window. I am aware that it is due to the method is written inside tinymce init json object and hence causing problem but don't know what to do:
in component class, I mentioned it like this:
tinyMceConfig: any = {
menubar: false, plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern'], toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code | link Upload',
setup: (editor) => {
editor.ui.registry.addButton('Upload', {
icon: 'browse',
onAction: ()=> {
const dialogRef: MatDialogRef<any> = this.dialog.open(UploadmediaComponent, { width: '95vw', disableClose: true, panelClass: 'uploadPanel'});
dialogRef.afterClosed().subscribe(res => {
if (!res) {
return;
}
res.forEach(image => {
console.log(image.url);
editor.insertContent(image.url);
});
});
}
});
}
};
In component:
<editor formControlName="popupText" name="popupText" apiKey="xxxx"
[init]="tinyMceConfig"></editor>
I had borken down this code further and separated setup part in ngOnInit but that made no difference.

Just to wrap the initialization of the dialog with ngZone.run and it worked perfect for me:
onAction: ()=> {
this.ngZone.run(()=> {
const dialogRef: MatDialogRef<any> = this.dialog.open(UploadmediaComponent, {
width: '95vw', disableClose: true, panelClass: 'uploadPanel'});
dialogRef.afterClosed().subscribe(res => {
if (!res) {
return;
}
res.forEach(image => {
editor.insertContent('<img src="' + image.url + '">');
});
});
});
}

Related

How to integrate lite-youtube in tinymce?

I'm trying to integrate the well-known lite-youtube plugin for writing tinymce's rich text.
And I did not succeed in understanding how to integrate the plugin into the system of tinymce, I would appreciate it if someone could help me with this, thanks
This is my code:
<script>
tinymce.init({
selector: '#myTextarea',
plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount image',
toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat | image | media',
language: 'he_IL',
image_class_list: [{title: 'Full size', value: 'great_picture_of_the_article'}],
image_dimensions: false,
link_class_list: [{title: 'Formatted link', value: 'link_to_external_site'}],
</script>
Here are the codes I tried to attach:
media_url_resolver: function (data, resolve) {
if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
var embedHtml = '<lite-youtube videoid=' + data.url +
'"></lite-youtube>';
resolve({html: embedHtml});
} else {
resolve({html: ''});
}
},
video_template_callback: function(data) {
return '<lite-youtube videoid="' + data.source1 + '"></lite-youtube>';
},

How to Integrate tinymce editor in ReactJs

I am new in Reactjs,working with nextjs and i am trying to integrate Editor
in my page but i am getting following error
"TypeError: editor1 is null"
How can i fix this ? I tried with following code, Where i am wrong ?
const handleSubmit = (e: any) => {
e.preventDefault();
let editor: any = null;
const content = editor.getContent();
const data = {
first: e.target.name.value,
last: e.target.cat_name.value,
content: content, // add the content to the data object
}
};
<Editor
onInit={(evt, ed) => editor = ed} // set the editor reference
initialValue="<p>This is the initial content of the editor.</p>"
init={{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
}}
/>

TinyMCE Remove Inserted Image Prefix?

I am using TinyMCE Laravel File Manager but Im having an issue whenever I add images. Photos I save are saved at public_html/photos, but when I add the images to the tinyMCE editor using Insert > Image. The editor shows a broken image since the src provided has a prefix of laravel-filemanager showing as
src="http://localhost:8000/laravel-filemanager/photos/user_icon_add.png"
Instead of
src="http://localhost:8000/photos/user_icon_add.png"
How do I remove the laravel-filemanager prefix for photos that I add?
Here are some configs of my lfm.php
'url_prefix' => 'laravel-filemanager',
'base_directory' => 'public_html',
'images_folder_name' => 'photos',
'files_folder_name' => 'files',
'shared_folder_name' => 'shares',
'thumb_folder_name' => 'thumbs',
Here's my tinyMCE js config
var editor_config = {
path_absolute: "{{ URL::to('/') }}/",
selector: "textarea",
plugins: ["advlist autolink lists link charmap print preview hr pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime nonbreaking save table contextmenu directionality", "emoticons paste textcolor colorpicker textpattern"],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link",
style_formats:
[
{
title: 'Bullet',
selector: 'ul',
classes: 'browser-default',
}
],
relative_urls: false,
file_browser_callback: function (field_name, url, type, win) {
var x = window.innerWidth || document.documentElement.clientWidth || document.getElementByTagName('body')[0].clientWidth;
var y = window.innerHeight || document.documentElement.clientHeight || document.grtElementByTagName('body')[0].clientHeight;
var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name' + field_name;
if (type = 'image') {
cmsURL = cmsURL + '&type=Images';
} else {
cmsUrl = cmsURL + '&type=Files';
}
tinyMCE.activeEditor.windowManager.open({
file: cmsURL,
title: 'Filemanager',
width: x * 0.8,
height: y * 0.8,
resizeble: 'yes',
close_previous: 'no'
});
}
};
tinymce.init(editor_config);
The app_url may not be correct in .env.
set your APP_URL in .env file

TinyMCE file manager object not found in laravel application

I just install UniSharp/laravel-filemanager but there's an issue with the file manager.
I am using editor on admin area so my routes are protected
Routes:
Route::group(['middleware' => ['auth', 'preventBackHistory']], function () {
Route::resource('/private-job', 'PrivateJob\privateJobController');
Route::resource('/newspaper', 'newspaper\newspaperController');
Route::resource('/scholarships', 'scholarship\ScholarshipController');
Route::resource('/foreign-jobs', 'AbroadJons\AbroadJobsController');
Route::group(['middleware' => 'role:admin'], function () {
Route::get('/items', 'ItemsController#index');
Route::post('/items/{result}', 'ItemsController#AddItems');
Route::post('/delete-items/{id}', 'ItemsController#DeleteItem');
Route::resource('/create-users', 'ACLEntrust\RegisterController');
Route::resource('/role', 'ACLEntrust\RoleController');
});
});
when i use this route demo works fine but when i use the editor in my custom form it shows object not found when i browse for image uploading :
http:localhost/abc/laravel-filemanager/demo
Custom textarea:
Job Description
<textarea name="job_desc" class="form-control my-editor">{!! `old('job_desc') !!}</textarea>`
</div>
<script>
var editor_config = {
path_absolute: "/",
selector: "textarea.my-editor",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern",
"link image"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
relative_urls: false,
file_browser_callback: function (field_name, url, type, win) {
var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
var y = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
if (type == 'image') {
cmsURL = cmsURL + "&type=Images";
} else {
cmsURL = cmsURL + "&type=Files";
}
tinyMCE.activeEditor.windowManager.open({
file: cmsURL,
title: 'Filemanager',
width: x * 0.8,
height: y * 0.8,
resizable: "yes",
close_previous: "no"
});
}
};
tinymce.init(editor_config);
</script>
<script>
Commands used to install package
composer require unisharp/laravel-filemanager:~1.8
Edit config/app.php
Unisharp\Laravelfilemanager\LaravelFilemanagerServiceProvider::class,
Intervention\Image\ImageServiceProvider::class,
'Image' => Intervention\Image\Facades\Image::class,
php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public
php artisan route:clear
php artisan config:clear

React TinyMCE call onChange two time

I add "file_picker_callback" to my TinyMCE, when I tying word to TinyMCE, function "onChange" is called two time and then, TinyMCE is lost focus. If I want to enter more words, I must focus to TinyMCE again
Anyone can help?
<TinyMCE
content={'' ?description == false: description}
config={{
plugins: 'advlist paste table textcolor image',
toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright | sizeselect | fontselect | fontsizeselect | forecolor | bullist | image',
forced_root_block: "",
selector: '#ProductDesc',
elementpath: false,
height: "300",
paste_retain_style_properties: "all",
file_browser_callback_types: 'image',
file_picker_callback: function (callback, value, meta) {
if (meta.filetype == 'image') {
var input = document.getElementById('my-file');
input.click();
input.onchange = function () {
var file = input.files[0];
var reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result, {
alt: file.name
});
};
reader.readAsDataURL(file);
};
}
}
}}
onChange={this.onChangeDesc}
/>

Categories

Resources