i am having trouble with tinyMCE, when i put <script type="text/javascript" src="/scripts/tiny_mce/tiny_mce.js"> to <head>, and put init code before the <textarea class="tinyMceEditor">, it works fine.
the init code is like this:
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "tinyMceEditor",
plugins : "inlinepopups,advlink",
convert_urls : false,
theme : "advanced",
theme_advanced_buttons1 : "link,unlink",
width: "602",
height: "175",
theme_advanced_statusbar_location : "none"});
But now, i want to defer the loading of tiny_mce.js, when user click a button on the first time, the tiny_mce.js will be loaded, and then append the <textarea class="tinyMceEditor"> to <body>, then do the init work with the previous code, but this time, it won't init the tinyMCE editor, it only shows the <textarea class="tinyMceEditor">
googled, but find nothing related to this, anyone has met this problem?
Any suggestion will be appreciated.
i looked into chrome web developer tools and found that if i dynamically load the tinymce.js, other js needed like en.js, editor_template.js, editor_plugin.js etc won't be loaded. even when i add these js files to dynamically loading, the tinymce still can't be inited.
thank you for your help, i watched in firebug, and i do get the tinymce.js loaded before append <textarea to <body>, then i append the <textarea>, and do the tinymce init(), i am using LazyLoad(jQuery plugin) to dynamically load the js files.
here is what i did
if(typeof TinyMCE == "undefined"){
//dynamically load the tinymce.js
LazyLoad(['tinymce.js'],function(){
//callback function, called after tinymce is loaded
$('body').append('<textarea class="TinyMceEditor"/>');
tinyMCE.init({init settings});
});
}
if i don't load tinymce.js dynamically, just put a <script> tag in <head>, the tinyMCE can be inited , but when i load tinymce.js dynamically, it doesn't work. Any idea with this?
after a day's work, finally found the solution, just put
window.tinymce.dom.Event.domLoaded = true;
before
tinymce.init();
then the tinymce can be inited correctly.
I resolved this issue by creating a separate coffee script file. Then I declared below function with window scope to access in views.
window.initialize_tiny_mce = () ->
if (typeof tinymce != 'undefined' && tinymce != null)
tinymce.remove();
tinymce.init
height: '180'
menubar: false
statusbar: false
cleanup: true
selector: '.new-tinymce-printable-html'
plugins: [ 'autolink link image code lists advlist' ]
toolbar: 'styleselect | bold underline italic | bullist numlist outdent indent | link image | code'
browser_spellcheck: true
setup: (editor) ->
editor.on 'keyup', ->
tinymce.triggerSave()
editor.on 'change', ->
console.log editor.getContent()
return
return
Then in view partial, I called this function:
:coffeescript
initialize_tiny_mce()
Now dynamically created element is assigned a tinymce editor.
Related
I am using v5 of TinyMCE. By default, the style selected is 'Paragraph', as shown in this image :
[tinyMCE toolbar, as the user sees before he mades any format configuration]
But I know my users will all prefer to use 'Div' style. So I would like 'Div' to be selected by default. The toolbar should therefore appear like in this image :
[tinyMCE toolbar, as I want it to be configured by default]
Is it possible ?
I haven't find my answer in tinyMCE documentation.
Same question if you want for instead "bold" button to be selected by default, etc.
Thank you !
To replace the default <p> blocks with <div>, use forced_root_block: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#forced_root_block/
tinymce.init({
// ...
forced_root_block : 'div'
});
To select the bold button by default, you could use execCommand: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
tinymce.init({
// ...
setup: function(editor) {
editor.on('init', function() {
this.execCommand('Bold');
});
}
});
Example fiddle combining both: https://fiddle.tiny.cloud/YShaab/1
I have content with placeholder such as [[name]], [[lastname]].
I want everything from [[ until ]] gets highlight, for example in yellow background while the real content that will be save in DB is still plain text.
For easier to understand, please take a look at this link. https://ckeditor.com/docs/ckeditor4/latest/features/placeholder.html
It is placeholder plugin for CKEditor. And here is working sample. https://ckeditor.com/docs/ckeditor4/latest/examples/placeholder.html
Currently I use textpattern plugin for TinyMCE and this code.
tinymce.init({
// options...
'textpattern_patterns': [
{'start': '[[', 'end': ']]', 'cmd': 'KPHW'}
],
'setup': function(editor) {
editor.addCommand('KPHW', function(ui, v) {
let contentText = editor.selection.getContent({ format: 'text' });
editor.execCommand('mceInsertContent', false, '<span style="background-color: yellow;">[[' + contentText + ']]</span>');
});
}
});
But it replace plain text [[placeholder]] with <span style="background: yellow;">[[placeholder]]</span> which is wrong.
Found this variable plugin https://github.com/ziktar/tinymce-variable.
Still have some bugs but is most active.
I'm using Reactjs together with the tinyMCE 4.1.10 html editor (together with the code plugin) and bootsrap css + js elements. A fairly working setup after a few quirks with the editor have been removed (manual destruction if the parent element unmounts)
Now the question: The textarea input of the code plugin does not receive any focus, click or key events and is basically dissabled. Setting the value via javascript works just fine, but it does not function as a normal html input.
It is opened as the following:
datatable as react components
opens bootsrap modal as react component
initializes tinymce on textareas inside of the modal
loads the code plugin (which itself then is not accepting any kind of input anymore)
My initilization of the editor looks like this:
componentDidMount: function(){
tinymce.init({
selector: '.widget-tinymce'
, height : 200
, resize : true
, plugins : 'code'
})
}
My guess would be, that react.js is somehow blocking or intersepting the events here. If I remove the react modal DOM, it is just working fine.
Does anybody has an idea, what is causing this or how to simply debug it further?
Thx a lot!
if you are using Material UI. disable Material UI Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}
What does your html/jsx look like in your component?
My guess is that react might be treating your input as a Controlled Component
If you're setting the value attribute when you render, you'll want to wait, and do that via props or state instead.
Alright, so it turned out that bootstrap modals javascript is somehow highjacking this. In favor of saving some time I decided not to dig realy into this but just to create my own modal js inside of the jsx.
Aparently there is also React Bootstrap, but it looks at the moment to much beta for me in order to take this additional dependency in.
The final code looks like this, in case it becomes handy at some point:
Modal = React.createClass({
show: function() {
appBody.addClass('modal-open');
$(this.getDOMNode()).css('opacity', 0).show().scrollTop(0).animate({opacity: 1}, 500);
}
, hide: function(e){
if (e) e.stopPropagation();
if (!e || $(e.target).data('close') == true) {
appBody.removeClass('modal-open');
$(this.getDOMNode()).animate({opacity: 0}, 300, function(){
$(this).hide();
});
}
}
, showLoading: function(){
this.refs.loader.show();
}
, hideLoading: function(){
this.refs.loader.hide();
}
, render: function() {
return (
<div className="modal overlay" tabIndex="-1" role="dialog" data-close="true" onClick={this.hide}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={this.hide} data-close="true" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title" id="myModalLabel">{this.props.title}</h4>
</div>
<div className="modal-body" id="overlay-body">
{this.props.children}
<AjaxLoader ref="loader"/>
</div>
</div>
</div>
</div>
);
}
})
Best wishes
Andreas
Material UI: disable Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}
How to disable HTML Clean Up while in the editor mode? I'm in a need of allowing css format & inline html in code. The idea is to disable parser and html clean up action when pasting the code and entering the Editor for editing. Thanks.
You can provide an identity function as the parser attribute upon initializing the wysihtml5 editor. The below script is a coffeescript snippet that disables the cleanup completely.
enableWysiwyg: ->
#$el.find('textarea').wysihtml5
"style": false
"font-styles": false #Font styling, e.g. h1, h2, etc. Default true
"emphasis": true #Italics, bold, etc. Default true
"lists": false #(Un)ordered lists, e.g. Bullets, Numbers. Default true
"html": true #Button which allows you to edit the generated HTML. Default false
"link": false #Button to insert a link. Default true
"image": false #Button to insert an image. Default true,
"color": false #Button to change color of font
parser: (html) -> html
JavaScript version of the above code:
$('textarea').wysihtml5({
"style": false,
"font-styles": false,
"emphasis": true,
"lists": false,
"html": true,
"link": false,
"image": false,
"color": false,
parser: function(html) {
return html;
}
});
Actually, this is what the parser rules are for.
You can attach your custom rules to the included var wysihtml5ParserRules before instantiate the editor object or just create your own rules object and give to the editor's constructor.
For example, to allow the h1 and h3 tag in addition to the tags allowed in the distributed simple example rules, you'd need to set up as follows:
<form>
<div id="toolbar" style="display: none;">
<a data-wysihtml5-command="bold" title="CTRL+B">bold</a> |
<a data-wysihtml5-command="italic" title="CTRL+I">italic</a>
<a data-wysihtml5-action="change_view">switch to html view</a>
</div>
<textarea id="textarea" placeholder="Enter text ..."></textarea>
<br><input type="reset" value="Reset form!">
</form>
<!-- The distributed parser rules -->
<script src="../parser_rules/simple.js"></script>
<script src="../dist/wysihtml5-0.4.0pre.min.js"></script>
<script>
// attach some custom rules
wysihtml5ParserRules.tags.h1 = {remove: 0};
wysihtml5ParserRules.tags.h3 = {remove: 0};
var editor = new wysihtml5.Editor("textarea", {
toolbar: "toolbar",
parserRules: wysihtml5ParserRules,
useLineBreaks: false
});
</script>
Now, when you enter/paste <title>test</title> into the editor, while you're in the editor mode, and then switch to html view, you'll get <title>test</title>. And when you switch back to editor view, you'll get <title>test</title> again.
That was the general part.
Now, in your case, I'm not sure if it's the best idea to work with 121 custom parser rules (the count of HTML tags to handle) or if it wouldn't be better to take the time and dig into the source code to find a more performant solution (doesn't make much sense to tell a parser to actualy just return the input string anyway, right?). Furthermore, you said you want to allow CSS as well. So your custom parser rules will even extend.
Anyway, as a starting point, feel free to use my custom parser rule set from here: https://github.com/eyecatchup/wysihtml5/blob/master/parser_rules/allow-all-html5.js.
I've been looking for hours to find a plugin that would add somthing like "padding: 5px" to an image. Does everyone do this through plain html? Our customer need a way to add this simply with the use of a button or right click context menu. Any suggestions/solutions or do I have to develop this myself?
Suggestions concerning other products than TinyMCE is not necessary.
The easiest to use is to add a custom stylesheet which only need to be set as a parameter (content_css). Example code snippet for the tinymce configuration:
...
theme: 'advanced',
content_css: "http://my_server/my_css/my_custom_css_file.css",
...
This css should contain something like the following
img {
padding-left: 5px;
}
The code for the tinymce button is a bit more complex (but if wised i can post it as well) and the css gets set using the following
$(ed.get('my_editor_id').getBody()).find('img').css('padding-left','5px');
UPDATE: Button code:
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
ed.addButton ('wrap_div', {
'title' : 'my title',
'image' : 'my_image.png',
'onclick' : function () {
ed.getBody().find('img').css('padding-left','5px');
}
});
});
}
});