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>
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.
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.
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 : '',
So I'd like to create a polymer-element that usually just displays content, but when the edit-attribute is present then tinymce should appear inline.
This is what I have so far:
<polymer-element name="article-widget" attributes="edit">
<template>
<div id="content"><content></content></div>
</template>
<script>
Polymer('article-widget', {
edit: false,
ready: function() {
tinymce.init({
selector: "div#content",
theme: "modern",
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"]
],
add_unload_trigger: false,
schema: "html5",
inline: true,
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media",
statusbar: false,
});
}
})
</script>
</polymer-element>
As you can see right now I'm not even using the edit-attribute as a condition. I'm just trying to initialize tinyMCE, but it doesn't work. I'm guessing this is because tinyMCE can't get to the element via the selector, because the element is in a shadow-DOM. Am I correct?
So how else should I do this? I'm very surprised that I couldn't find anyone on Google who has tried to do the same thing.
I fixed it doing this:
<link rel="import" href="/js/bower_components/polymer/polymer.html">
<polymer-element name="article-widget" attributes="edit">
<template>
<content></content>
</template>
<script>
Polymer('article-widget', {
$tinymce: null,
edit: false,
initTinyMCE: function() {
if (this.$tinymce === null) {
this.$tinymce = $('<div>' + this.innerHTML + '</div>');
$(this).html(this.$tinymce);
this.$tinymce.tinymce({
theme: "modern",
skin: "light",
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"]
],
add_unload_trigger: false,
schema: "html5",
inline: true,
fixed_toolbar_container: "#toolbar",
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media",
statusbar: false,
menubar: false,
content_css : "/css/cake.generic.css",
});
}
},
destroyTinyMCE: function() {
if (this.$tinymce !== null) {
var content = this.$tinymce.attr('value');
this.$tinymce.remove();
this.$tinymce = null;
$(this).html(content);
}
},
ready: function() {
if (this.edit) {
this.initTinyMCE();
}
}
})
</script>
</polymer-element>