I am attempting to inject dynamic templates into my tinyMCE configuration prior to loading the element. The reason for this is because I want my users to save templates on their own and be able to utilize the templates whenever they access the editor.
Currently I have tried to use a resolver, but it appears that the editor will not load when I attempt to set the template configuration of the editor to the variable that is set after the resolver is initiated.
Resolver Code
resolve(): Observable<AnalyticsDataType[]> {
this.userData = this.authenticationService.getToken();
return this.campaignTemplateService.getEditorTemplates(this.userData.ID);
}
HTML Configuration
<div class="text-area">
<editor
ngIf="isLoaded"
id = 'file-picker'
[apiKey]="tinyMCEAPIKey"
initialValue="<p></p>"
[init]="tinyMCEConfig"
[(ngModel)]="htmlContent"
formControlName="body" ></editor>
</div>
Angular Component ngOnInit
ngOnInit(): void {
this.textEditorTemplates = this.route.snapshot.data['textEditorTemplates'];
}
Angular Component configuration variable
tinyMCEConfig = {
height: 500,
selector: 'editor#file-picker',
image_title: true,
automatic_uploads: true,
images_upload_url: this.postUploadImageRoute(),
file_picker_types: 'image',
menubar: 'file view insert format tools table help',
plugins: [
'preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons'
],
toolbar: ['undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | insertfile image media template link anchor codesample | ltr rtl'],
image_advtab: true,
image_list: [],
importcss_append: true,
image_caption: true,
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
templates: this.textEditorTemplates <-- This is where I am setting the templates
};;;
You may need to move the template code to an earlier line. Specifically before the HTML Configuration or Resolver code.
If I have time later today, I will take a look at what the specific code should be doing. I have limited experience with HTML (I only have one website), but I will try to help.
Related
I'm using tinymce editor in react app like above.
I'm trying to show
an editor to edit the HTML page which has many styles with flexbox in
internal styling.
But this editor does not support internal styling and removes all
styling forcing me to add it as inline styling
I don't want inline styling when user submits the page
. By the way I'm using initialvalue to provide my HTML template.
But internal styling works on normal html/css/js mode example
here.
export default function App() {
const editorRef = useRef(null);
const log = () => {
if (editorRef.current) {
console.log(editorRef.current.getContent());
}
};
return (
<>
<Editor
onInit={(evt, editor) => editorRef.current = editor}
initialValue={htmlTemplate}
init={{
height: 500,
menubar: false,
extended_valid_elements:
'style[*],div[class|contenteditable|ref|data|style]',
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 }'
}}
/>
<button onClick={log}>Log editor content</button>
</>
);
}
If you would like to apply CSS to editor content, you can do so with the content_css option (for internal styles) or the content_style option (for external stylesheets) in your config:
https://www.tiny.cloud/docs/tinymce/6/add-css-options/#content_css
https://www.tiny.cloud/docs/tinymce/6/add-css-options/#content_style
These options allow you to apply styling to editor content, but that styling is not then injected inline to the editor content. If you want it applied to the content when it is rendered later, you will need to load the same CSS/styling there too.
My editor saves full HTML structure even if my text-area is empty, here is what I have when I save my post with empty text-area in my database:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
it supposed to be null also even if I have content in my text-area still this HTML structure is in my db
Codes
text-area
<textarea class="form-control editor" name="description" id="description" cols="30" rows="10"></textarea>
script
<script>
var editor_config = {
path_absolute : "/",
selector: "textarea.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 codesample",
"fullpage toc tinymcespellchecker imagetools help"
],
toolbar: "insertfile undo redo | styleselect | bold italic strikethrough | alignleft aligncenter alignright alignjustify | ltr rtl | bullist numlist outdent indent removeformat formatselect| link image media | emoticons charmap | code codesample | forecolor backcolor",
external_plugins: { "nanospell": "http://xxxxxxxx/js/tinymce/plugins/nanospell/plugin.js" },
nanospell_server:"php",
browser_spellcheck: true,
relative_urls: true,
remove_script_host: false,
branding: 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: '<?= route('elfinder.tinymce4') ?>',// use an absolute path!
title: 'xxxxxx file manager',
width: 900,
height: 450,
resizable: 'yes'
}, {
setUrl: function (url) {
win.document.getElementById(field_name).value = url;
}
});
}
};
tinymce.init(editor_config);
</script>
Q:
How to avoid of having this HTML structure in my text-area? I just need my content tags and not HTML,Head,Body tags
You are using the fullpage plugin which causes TinyMCE to work with an entire HTML document:
https://www.tinymce.com/docs/plugins/fullpage/
If you don't want TinyMCE to manage the entire HTML document just don't load that plugin.
You can also do this when displaying your variable, even with the HTML tags: {{!! $your_variable !!}}
This gonna remove the HTML tags when displaying your variables. Generally is useful to save using the fullpage plugin, but that's up to you!
i already search for this <br data-mce-bogus="1"> but not find any working solution.
its happen randomly when my textarea is empty and i submit the form its sometimes return <br data-mce-bogus="1"> or stay empty.
i already try to clean this up from my php process by:
if(!empty($value) AND $value!='<br data-mce-bogus="1">'){
#input to database
}
is there any solution from the javascript ?
this how i init the tinymce:
tinymce.init({
selector:'textarea.tinymce-input',
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor textcolor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code help wordcount'
],
toolbar: 'insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
force_br_newlines : true,
forced_root_block : '',
});
It doesn't happen randomly. The value is set to '' only when you have clicked inside the text area once, and submiting the form or clicking somewhere outside without entering anything in the Tiny MCE text area.
The solution:
Try using a event listener for change in content field. Use 'setup:' for that, as shown below:
tinymce.init({
selector:'textarea.tinymce-input',
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor textcolor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code help wordcount'
],
toolbar: 'insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
force_br_newlines : true,
forced_root_block : '',
setup : function(ed) {
ed.on('blur change cut copy keyup paste', function(e){
var tinyMceData = tinyMCE.activeEditor.getContent({ format: 'raw' });
if(tinyMceData.indexOf('<br data-mce-bogus="1">') >= 0) {
tinyMceData = "";
tinyMCE.activeEditor.setContent('', { format: 'raw' });
}
//Here you can validate your other content related validations
});
}
});
Add the following lines in the tinyMCE.init
entity_encoding: 'raw',
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '',
I have a little problem with integrating tinyMCE in my project.
It is only visual, everything works, but I would like it to be a little more “nice looking”
There is an example I base myself on:
http://www.tinymce.com/tryit/full.php
And there is a result in application:
http://hpics.li/ea9de6c
As you can see, the size of buttons is just huge. (They are stretched)
Here are options I use for this textarea :
{
theme: "modern",
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 | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
language: 'fr_FR'
}
Thanks !
FYI, this is HTML declaration of this textarea, normally, it is not relevant, but just in case:
<textarea style="width: 100%; height: 200px;" data-bind="wysiwyg: SelectedBlog().Content, wysiwygConfig: Tools.Helper.TinyMceBlogOptions"></textarea>
I am using the following:
<textarea
data-ui-tinymce="tinymceOptions"
data-ng-disabled="modal.action=='delete'"
data-ng-model="modal.formData.text"
id="inputText"
rows="20"
required></textarea>
When the tinymce appears the height is just a few centimeters. How can I change the height of the default when it first appears?
Here is a list of the options I am using:
selector: "textarea",
plugins: [
"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table contextmenu template textcolor paste fullpage textcolor"
],
toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect fontselect fontsizeselect",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | code | inserttime preview | forecolor backcolor",
toolbar3: "table | hr removeformat | subscript superscript | charmap | print fullscreen | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
menubar: false,
toolbar_items_size: 'small',
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
from javascript
tinymce.init({
selector: 'textarea',
height: 200
});
OR from html
<textarea style="height: 200px;">
You should set height of container object in CSS:
#inputText {
height : 10000000px;
}
for tinyMCE version before 4.X then this code is working
tinyMCE.init({
...,
setup: function(editor) {
editor.onInit.add(function() {
var width = editor.getWin().clientWidth;
var height = 50;
editor.theme.resizeTo(width, height);
});
}
});
for tinyMCE version 4.X and after then this code is working
tinyMCE.init({
setup: function (ed) {
ed.on('init', function(args) {
var id = ed.id;
var height = 25;
document.getElementById(id + '_ifr').style.height = height + 'px';
});
}
});
For global height setting for TinyMCE, edit settings.py of Django project:
TINYMCE_DEFAULT_CONFIG = {'height': 120}
For per-widget settings, use mce_attrs in form class:
input = forms.CharField(widget=TinyMCE(mce_attrs={'height': 120}))
Tested with django-tinymce 2.7.0.
Under the hood: You can see string like "height": 120, in data-mce-conf attribute of the generated HTML for the textarea. Otherwise, something goes wrong.
It works for me (see setTimeout part)
$(function () {
window.init_tinymce = function (id, custom_config) {
var textarea = $('#' + id);
// Default TinyMCE configuration
var basic_config = {
mode: 'none',
plugins: "link",
menu: 'none',
toolbar: 'bold | formatselect | link'
};
tinymce.init($.extend(basic_config, custom_config));
...
setTimeout(function(){ //wait for tinymce to load
console.log('timeout');
$(tinymce.editors[0].iframeElement).contents().find('body')
.css('min-height', $(tinymce.editors[0].contentAreaContainer).height() * .9);
}, 1000);
};
});
Add this css to your custom style sheet otherwise it will decrease all existing editors' height.
.mce-edit-area iframe {
max-height: 200px;
}