This answer explains how to, for example, remove the menubar and status bar for all form fields in tinyMCE:
tinymce.init({
selector: "textarea",
menubar:false,
statusbar: false,
..
});
My question is: how can I do that for individual text areas? ie I would like some to have status bars and others not to..
You need to give your textarea element an id and then use it in every configuration:
tinymce.init({
selector: "textarea#editor1",
menubar:false,
statusbar: false,
...
});
<textarea id="editor1"></textarea>
tinymce.init({
selector: "textarea#editor2",
// standard toolbar for editor 2
...
});
<textarea id="editor2"></textarea>
// and so on...
This way you tell tinyMCE for which textarea the configuration is in effect. Have a look at the advanced example on the tinyMCE site:
selector: "textarea#elm1",
Select only the textarea with ID elm1
UPDATE
Yes, it is possible. You need to set a unique id for all editors, but it is possible to select multiple id's at once like this:
<script type="text/javascript">
tinymce.init({
selector: "textarea#common1,textarea#common2",
theme: "modern",
height: 100,
menubar:false,
statusbar: false
});
tinymce.init({
selector: "textarea#comment_toolbox",
theme: "modern",
height: 100,
toolbar: false
});
</script>
</head>
<body>
<div width="100%" height="100%">
<textarea id="common1"></textarea>
<br/>
<textarea id="comment_toolbox"></textarea>
<br/>
<textarea id="common2"></textarea>
<br/>
</div>
</body>
The site looks as expected:
this is based off pasty's answer above, it keeps it as DRY as possible:
this.setupRichTextEditorSettings = function() {
var regularElements = ['eobjs','emats','eprocs','eclos','ehoms'];
var specialElements = ['comment_box'];
var convertToSelectors = function(elements) {
return $.map(elements, function(element) {
return "textarea#"+element;
});
};
var regularElementSelectors = convertToSelectors(regularElements);
var specialElementSelectors = convertToSelectors(specialElements);
tinymce.init({
selector: regularElementSelectors.join(','),
menubar: false,
statusbar: false
})
tinymce.init({
selector: specialElementSelectors.join(','),
menubar: false,
statusbar: false,
toolbar: false
})
};
Use a selector like this:
$('textarea#mytext').tinymce({
menubar:false,
statusbar: false,
..
});
Related
How do I change this orange colour?arrow to the colour, it is orange by default
$(document).ready(function() {
$('#laryngology_general').multiselect({
buttonClass:'btn btn-warning',
buttonWidth:'260px',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
includeSelectAllOption: false,
filterPlaceholder:'Search Here..'
});
using:
Lots of ways to do that, but one easy way would be to make your own class and replace buttonClass:'btn btn-warning' with buttonClass:'btn yourclasshere'
You should also read up on the classes in bootstrap: https://getbootstrap.com/docs/4.0/components/buttons/
I'm trying to paste any random text into the quill#1.3.7 editor, but all of my paste events are pretty much ignored. In addition, the cursor disappears - ie, the <div> loses focus.
Do I have to do something to get basic/default clipboard paste to work? According the docs, those should be turned on by default since they are required.
I have debug turned on, and this is what I see in Chrome.
Here is how I'm initializing the editor:
<div ref="editorElement" class="ql-editor" contenteditable="true"></div>
import Quill from 'quill';
#customElement('quill-editor')
export class QuillEditorComponent {
#bindable({ defaultBindingMode: bindingMode.twoWay }) value: string;
editorElement: any;
editor: Quill;
attached() {
var toolbarOptions = [/* removed for brevity */];
this.editor = new Quill(this.editorElement, {
debug: true,
modules: {
toolbar: toolbarOptions,
clipboard: {
matchVisual: false
}
},
placeholder: 'I have something to say...',
theme: 'snow'
});
this.editor.root.innerHTML = this.value;
}
}
UPDATE:
Filed an issue, as this seems to be a Chrome related issue:
https://github.com/quilljs/quill/issues/3512
I'm trying to implement a WYSIWYG editor and show on HTML your content, but I have two main problems... Let's to code...
"Register/Upload component .ts" (I'm using AngularEditor)
editorConfig: AngularEditorConfig = {
editable: true,
spellcheck: true,
height: 'auto',
minHeight: '300px',
maxHeight: 'auto',
width: 'auto',
enableToolbar: true,
showToolbar: true,
placeholder: 'Enter text here...',
sanitize: true,
toolbarPosition: 'top',
toolbarHiddenButtons: [
['strikeThrough', 'superscript', 'subscript'],
['heading', 'fontName', 'fontSize', 'color'],
['justifyFull', 'indent', 'outdent'],
['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
['paragraph', 'removeBlockquote'],
['textColor', 'backgroundColor'],
['insertImage', 'insertVideo'],
['link', 'unlink', 'image', 'video'],
['toggleEditorMode'],
],
};
"Register/Upload component .html"
<angular-editor
formControlName="description"
[config]="editorConfig"
></angular-editor>
QUESTION 1: Everything here works fine. But when I go to update the value, show a raw HTML inside the editor and not the formated text... How I can fix this?
I another problem, the innerHTML doesn't work with the data came from the database.
<div class="breaklines" [innerHTML]="prop.description | safeHtml"></div> <--- NOT WORK
<div class="breaklines" [innerHTML]="'<strong>text directly</strong>'"></div> <--- WORK, even the same content
I created the pipe to safe html:
import { Pipe, PipeTransform } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
#Pipe({ name: 'safeHtml', pure: false })
export class SafeHtml implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(content) {
return this.sanitizer.bypassSecurityTrustHtml(content);
}
}
QUESTION 2: Do I need handler my HTML save on database, before try bind it?
Thanks everybody!
UPDATE
I'm discovery why innerHTML doesn't work with the saved code. When I make get the code comes < instead of < in all HTML tags. Then I make a simple replace and everything work
this.desc = prop.description.replace(/</g, '<');
<div class="breaklines" [innerHTML]="desc | safeHtml"></div>
Now, I only need to know how I can format the html in the editor when I going to update an information... Thanks!
I do not think that saving your html in a database would change anything. It seems like you are currently sanitizing your input twice :
once in SafeHtml
once in your editor config sanitize: true,
You might try to set sanitize to false in the editor config ?
I am using an inline editor ipweditor tool which internally use tinyMCE editor. On their demo page it is using old version of tinyMCE which is not working in my IE. So I updated tinyMCE with latest version.
In old version of TinyMCE it was returning me defined content with all the HTML tags, while in new version it is returning me only text without HTML tags.
Here is the link of jsFiddle demo. Anyone know how do I configure tinyMCE so it return me HTML tags also.
HTML
<div style="display:none">
<form method="post" action="somepage">
<textarea name="content" style="width:100%"></textarea>
</form>
</div>
<div style="border: solid thin gray; padding:5px;">
<div class="my_text"><b> <span>Click me! I am editable and WYSIWYG!!!</span></b>
</div>
Javascript
$(document).ready(function () {
var ed = new tinymce.Editor('content', {
mode: "exact",
theme: "advanced",
plugins: "emotions,table",
theme_advanced_toolbar_location: "top",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
theme_advanced_buttons1: "bold,italic,underline,fontselect,fontsizeselect,forecolor,backcolor,|,code,",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
table_default_cellspacing: 0,
table_default_border: 1,
remove_linebreaks: false
});
$('.my_text').editable({
type: 'wysiwyg',
editor: ed,
onSubmit: function submitData(content) {
alert(content.current);
},
submit: 'save',
cancel: 'cancel'
});
});
It's always not preferable to make any modification in plugin library, but this really need some modification. The problem was with 'ipweditor.js' tool. It's creating new tinyMCE editor object internally and getting response in "text" format from tinyMCE.
var r =options.editor.getContent({format : 'text'});
We need to replace 'text' with 'html'
var r =options.editor.getContent({format : 'html'});
It's more preferable to make this format setting also dynamic so append a setting variable in inital settings and fetch value from there.
var defaults = {
onEdit: null,
onSubmit: null,
onCancel: null,
editClass: null,
submit: null,
cancel: null,
type: 'text', //text, textarea or select
submitBy: 'blur', //blur,change,dblclick,click
editBy: 'click',
editor: 'non',
options: null,
format:'text'
}
var options = $.extend(defaults, options);
and now retrieve using the format defined in setting.
var r =options.editor.getContent({format : options.format});
You can use content.previous. Here is a modified fiddle.
I try to create template and this template should be from 1 element - textarea, but this textarea should be extended to TinyMCE control.
I try to do it via following ascx control:
<textarea id="SubComment" name="SubComment" style="width: 80%">
<% = Html.Encode(ViewData.TemplateInfo.FormattedModelValue) %></textarea>
<script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,nonbreaking,xhtmlxtras,template,imagemanager,videoupload",
// Theme options
theme_advanced_buttons1: <% = txtAdvButtons %>,
theme_advanced_buttons2: "tablecontrols",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "",
theme_advanced_resizing: true,
onchange_callback: "changed",
// Example content CSS (should be your site CSS)
content_css: "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "js/template_list.js",
external_link_list_url: "js/link_list.js",
external_image_list_url: "js/image_list.js",
media_external_list_url: "js/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
},
setup: function(editor) {
editor.addButton('myupload', {
title: 'Insert image',
image: '/tiny_mce/plugins/imagemanager/pages/im/img/insertimage.gif',
onclick: function() {
mcImageManager.upload({
path: '{0}',
onupload: function(info) {
var i, html = '';
for (i = 0; i < info.files.length; i++)
html += '<img src="' + info.files[i].url + '" />';
editor.execCommand('mceInsertContent', false, html);
}
});
}
});
}
});
</script>
but when I try to use this template I see simple textarea. How to apply this javascript extention (it works correctly out of ascx control)?
Thanks
So I read up on the documentation for tinyMCE and it turns out that the code you posted there should be placed in the Head tag or another script file.
Change your textarea to this:
<textarea name="SubComment" class="tinyMCETextArea" style="width: 80%">
And in your tinyMCE initialization code:
$(function(){
tinyMCE.init({
/// all your options
editor_selector: "tinyMCETextArea",
/// More stuff
});
});