How to integrate lite-youtube in tinymce? - javascript

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>';
},

Related

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 }'
}}
/>

MatDialog triggered from tinymce not getting initialized until window resize

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 + '">');
});
});
});
}

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

Tinymce not sending the content after submission

I'm not a professional programmer, I've had little experience working with Javascript and so this Tinymce is confusing me. Basically my client wants to update the content himself without touching the code, so I have to set up this Tinymce so he can edit the content directly on browser. I've followed the instruction to install Tinymce but when I click either save or submit, the editing frame refreshes itself and shows the same content without any change. Below is my code in the HTML page I want to edit. Other than this HTML page, I don't have any other php or html page. Please tell me what I need to do.
<script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: "textarea#elm1",
theme: "modern",
width: 800,
height: 600,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor"
],
content_css: "css/content.css",
toolbar: "save | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
setup: function (editor) {
editor.on('change', function () {
tinymce.triggerSave();
});
}
});
</script>
And this is my code for the form in the same HTML page:
<form method="post" action="news.html">
<textarea id="elm1">The content I wanna edit</textarea>
<input type="submit" name="submitform" value="Sendform"></form>
Thanks very much guys!!
UPDATE 1: From the first answer and from other answers I collected from the internet, I've managed to get my code like this, but it still doesn't work, the Submit button seems do to nothing when I click on it now.
In the HTML page:
<script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: "textarea#elm1",
theme: "modern",
width: 800,
height: 600,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor"
],
content_css: "css/content.css",
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
setup: function (editor) {
editor.on('change', function () {
tinymce.triggerSave();
});
}
});
</script>
<script type="text/javascript">
$(function(){
var url = "news.php";
$("#SubmitBtn").click(function(){
//"content" will PHP variable
$.post(url, { "page_content" : tinyMCE.activeEditor.getContent() }, function(respond){
if ( respond == ){
alert('Content saved to file');
return;
} else {
//Error message assumed
alert(respond);
}
});
});
});
</script>
The form:
<form method="post" action="news.php">
<textarea id="elm1" name="page_content">The content I wanna edit</textarea>
<input type="button" id="SubmitBtn" value="Submit"/>
</form>
In the PHP page:
<?php
if ( isset($_POST['page_content']) ){
//This is what you want - HTML content from tinyMCE
//just treat this a string
if ( save_html_to_file($_POST['page_content'], 'news.html') ){
//Print 1 and exit script
die(1);
} else {
die('Couldnt write to stream');
}
}
/**
*
* #param string $content HTML content from TinyMCE editor
* #param string $path File you want to write into
* #return boolean TRUE on success
*/
function save_html_to_file($content, $path){
return (bool) file_put_contents($path, $content);
}
<form method="post" action="news.html"> - in the action property, you need to change it to a PHP file (or whatever language you'd like), where you can write a script to process the data sent. What happens is that the data from TinyMCE will be sent in a variable to the server, and you need to save it to a database of some sort. I'm assuming news.html is a static page - it will have to run off of a database for the client to update it.
Do some research on saving and reading from a MySQL database with PHP, and saving data from a form.
You'd need to give your textarea a name -- <textarea id="elm1" name="page-content">
You would then access what was submitted in PHP like this:
$content = $_POST['page-content'];
and then you can save it to a database or whatever you wish.

Categories

Resources