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.
Related
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>';
},
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 }'
}}
/>
I'm having difficulty understanding what I need to do, in order for getcontent to produce html that is identical to the content displayed in the tinymce window/frame/area.
I have tried with inline and iframe, but they both return identical results.
I've started using a skin, to try and ensure the formatting/styling are applied at load, but it makes no difference.
Can anyone tell me what I need to do, so that when I view (in a web browser) the html produced by getcontent, the result is visually identical to what I'm seeing in my tinymce viewer? Notably, font settings are not being retained. (e.g. by creating a file from getcontent result and opening it in a browser).
NB.. Tinymce is being loaded from a Filemaker database (file = Notes::Notes_RTE_html)
<!DOCTYPE html>
<html lang=’en’>
<head>
<meta charset=’utf-8’>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://website/TINY/tinymce/js/tinymce/tinymce.min.js'></script>
<script>
tinymce.init({
selector: '#GSNotes',
skin_url: 'https://website/TINY/GSNotes-skin/skins/ui/GSNotes-skin/',
content_css : 'https://website/TINY/GSNotes-skin/skins/content/GSNotes-skin/content.min.css',
inline: true,
inline_styles : true,
menubar: false,
statusbar: false,
contextmenu: false,
toolbar_location: 'bottom',
paste_data_images: true,
inline_boundaries: false,
link_context_toolbar: true,
toc_depth: 4,
toc_header: 'h3',
autosave_interval: '5s',
fontsize_formats: '0.5rem 0.75rem 0.85rem 0.9rem 1rem 1.1rem 1.2rem 1.4rem 1.7rem',
insertdatetime_formats: ['✏️ (%d/%m/%Y - %Hh%M)'],
plugins: 'table image imagetools quickbars searchreplace lists link autolink autosave paste media hr codesample insertdatetime toc blockquote ',
quickbars_insert_toolbar: '',
quickbars_selection_toolbar: ' bold italic underline strikethrough | blockquote | forecolor backcolor | link | removeformat',
toolbar: 'searchreplace insertdatetime | bullist numlist | hr | paragraphgroup fontgroup insertgroup | tocupdate | print preview restoredraft ',
toolbar_groups: {
fontgroup: {
icon: 'change-case',
tooltip: 'Fonts',
items: ' fontsizeselect '
},
paragraphgroup: {
icon: 'visualchars',
tooltip: 'Paragraph format',
items: 'h1 h2 h3 h4 | toc | alignleft aligncenter alignright alignjustify | indent outdent'
},
insertgroup: {
icon: 'image',
tooltip: 'Insert',
items: 'image media table paste codesample'
}
},
codesample_languages: [
{text: 'HTML/XML', value: 'markup'},
{text: 'JavaScript', value: 'javascript'},
{text: 'CSS', value: 'css'}
],
});
</script>
</head>
<body>
<div id= 'GSNotes' style='min-height: 550px; height: 98% ; font-family: Avenir Next ; font-size: 0.9rem ; line-height: 1.2rem ; color : #1D273D ; ' > " & Notes::Notes_RTE_html & " </div>
<script>
const saveTEXT = function() {
const textPlain = tinymce.get('GSNotes').getContent({ format: 'text' });
const textHTML = tinyMCE.get('GSNotes').getContent();
const jsonARR = { textPlain, textHTML};
FileMaker.PerformScriptWithOption ( 'RTE-exit' , JSON.stringify(jsonARR) , '5' ); }
</script>
</body>
</html>
TinyMCE does not contain the attached CSS in the result of the getContent() query. The editor works a bit differently.
By default, it outputs "clean" HTML, assuming that you have some CSS on the platform that defines its' appearance. To bring content in the editor to the same appearance as it should be on the platform, the content_css parameter is used.
Thus, if you need the content to have some styling after it is exported from TinyMCE, you will need to add the same CSS on your side, after it is exported. E.g., add
<link rel="stylesheet" href="https://website/TINY/GSNotes-skin/skins/content/GSNotes-skin/content.min.css">
I am using TinyMce from within a Windows Form through the Awesomium browser. I created a User Control like this that I am placing on the Windows Form:
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Drawing
Imports System.Data
Imports System.Text
Imports System.Windows.Forms
Imports System.IO
Imports Awesomium.Core
Imports Awesomium.Windows
Partial Public Class TinyMCE
Inherits UserControl
Public Sub New()
InitializeComponent()
End Sub
Public Property HtmlContent() As String
Get
Dim content As String = String.Empty
If Not WebCore.IsInitialized Then
WebCore.Initialize(New WebConfig() With {.LogLevel = LogLevel.Verbose})
Else
Dim html As JSValue = webBrowserControl.ExecuteJavascriptWithResult("GetContent")
content = html.ToString
End If
Return content
End Get
Set(value As String)
If WebCore.IsInitialized Then
Dim objResult As JSObject = webBrowserControl.ExecuteJavascriptWithResult("window")
objResult.InvokeAsync("SetContent", value)
End If
End Set
End Property
Public Sub CreateEditor()
If File.Exists(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "html\template\tinymce\js\tinymce\tinymce.min.js")) Then
webBrowserControl.Source = New Uri("file:///" & Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "html\template\tinymce.htm").Replace("\"c, "/"c))
Else
MessageBox.Show("Could not find the tinyMCE script directory. " & (Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "html\template\tinymce\js\tinymce\tinymce.min.js")), "Error", MessageBoxButtons.OK, MessageBoxIcon.[Error])
End If
End Sub
End Class
My HTML is fairly simplistic as far as the TinyMCE goes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>tinyMCE WYSIWYG Editor</title>
</head>
<script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>
<!-- Script functions to expose tinyMCE internals that get called from code using InvokeScript method. -->
<script type="text/javascript">
function GetContent() {
return tinyMCE.get('tinyMceEditor').getContent();
}
function SetContent(htmlContent) {
tinyMCE.get('tinyMceEditor').setContent(htmlContent);
}
</script>
<!-- TinyMCE -->
<script type="text/javascript">
tinymce.init({
selector: 'textarea',
menu: {
file: { title: 'File', items: 'newdocument' },
edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall' },
insert: { title: 'Insert', items: 'link media | template hr' },
view: { title: 'View', items: 'visualaid' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat' },
table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' },
tools: { title: 'Tools', items: 'spellchecker code' },
plantwatch: { title: 'My Menu', items: 'dataloop collectorloop processloop historian emailgroup alertgroup menusave' }
},
menubar : 'plantwatch file edit insert view format table tools',
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 imagetools codesample toc'
],
toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'forecolor backcolor emoticons | codesample',
image_advtab: true,
setup: function (editor) {
editor.addMenuItem('dataloop', {
text: 'Data Loop',
onclick: function () {
editor.insertContent('{LOOP:Data}');
}
});
editor.addMenuItem('collectorloop', {
text: 'Collector Loop',
onclick: function () {
editor.insertContent('{LOOP:Collector}');
}
});
editor.addMenuItem('processloop', {
text: 'Process Loop',
onclick: function () {
editor.insertContent('{LOOP:Process}');
}
});
editor.addMenuItem('historian', {
text: 'Historian Server Name',
onclick: function () {
editor.insertContent('{HistorianServerName}');
}
});
editor.addMenuItem('emailgroup', {
text: 'Email Group Name',
onclick: function () {
editor.insertContent('{EmailGroupName}');
}
});
editor.addMenuItem('alertgroup', {
text: 'Alert Group Name',
onclick: function () {
editor.insertContent('{AlertGroupName}');
}
});
}
});
</script>
<!-- /TinyMCE -->
<body>
<form method="post">
<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
<textarea name="tinyMceEditor" cols="1" rows="1" style="width:100%; height: 78%"></textarea>
</form>
</body>
</html>
I then have a button on my Windows Form that calls the following:
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
MsgBox(tinyMceEditor.HtmlContent)
End Sub
I would have expected that to return the content, but instead it is only returning the full text of the function itself, which is this:
function GetContent() {
return tinyMCE.get('tinyMceEditor').getContent();
}
It is returning that in string form, of course, since that is how my code structured it. I'm not sure why it isn't returning the HTML, though.
Right now you're just referencing the GetContent function so it's returning the definition, you need to call it to get the result.
Change:
Dim html As JSValue = webBrowserControl.ExecuteJavascriptWithResult("GetContent")
To:
Dim html As JSValue = webBrowserControl.ExecuteJavascriptWithResult("GetContent();")
I am using tinyMCE wysiwyg editor. I want to paste formatted text from MS Word by keeping the formation same in my editor.
tinymce.init({
selector: "textarea#main_content",
menubar:false,
height: 344,
min_height:344,
font_size: 20,
resize: false,
browser_spellcheck : true,
contextmenu: false,
'plugins': [
"link",
"searchreplace",
"paste"
],
paste_auto_cleanup_on_paste : true,
paste_word_valid_elements: "b,strong,i,em,h1,h2,u,p,ol,ul,li,a[href]",
paste_remove_styles: false,
paste_retain_style_properties: "all",
paste_preprocess : function(pl, o) {
o.content = strip_tags( o.content,'<b><u><i><p><br><a><ul><ol><li><strong><em><span><h1><h2><h3>');
},
paste_postprocess : function(pl, o) {
o.node.innerHTML = o.node.innerHTML;
},
toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link pasteword",
setup : function(ed) {
ed.on('keyup', function(e) {
window.clearTimeout(keyupTimer);
keyupTimer = setTimeout(function(){
updateTxtarea();
seo_validate(1);
instant_word_count();
},2000);
});
ed.on('focus', function(e) {
if($('.skin-toolbox-toggle').hasClass('toolbox-open')){
$('.skin-toolbox-toggle').trigger('click');
}
});
}
});
I am using the code above. Bold, italics, underlined, ul, li, hyperlink are working, these are ok but I need font-size, text-align, color also to remain same in my tinyMCE editor same as in MS word.
I have googled a lot but exact solution not found. Please help me....
paste_retain_style_properties: "all"
should be what you looking for, but as this does not work, maybe try to replace all with color font-size…
Or set paste_auto_cleanup_on_paste to false, as the documentation does not really specify what this actually does
Try adding "span" to the list of paste.word.valid.elements
I see that being used to contain color, size, and font info.