I am currently passing in the TinyMCE source as a dependency, and then calling
tinyMCE.init({}); but it is not initializing TinyMCE. When I console.log TinyMCE, it returns a TinyMCE Object. Code sample below:
define([
'jQuery',
'Underscore',
'Backbone',
'TinyMCE'
], function($, _, Backbone, tinyMCE) {
tinyMCE.init({
mode: "exact",
elements: $('textarea'),
theme: "advanced",
theme_advanced_toolbar_location: 'top',
theme_advanced_buttons1: 'bold,italic,underline,bullist,numlist,link,unlink',
theme_advanced_buttons2: '',
theme_advanced_buttons3: '',
theme_advanced_toolbar_align: 'left',
plugins: 'paste,inlinepopups',
width: '100%',
height: textarea.attr('data-height'),
oninit: function () {
console.log('TargetTD :');
console.log(targetTD);
}
});
}
});
You can use 'shim' for requirejs 2.1.0 or higher, see example of main script below:
requirejs.config({
baseUrl: "js",
paths: {
tinyMCE: 'libs/tinymce/tiny_mce'
},
shim: {
tinyMCE: {
exports: 'tinyMCE',
init: function () {
this.tinyMCE.DOM.events.domLoaded = true;
return this.tinyMCE;
}
}
}
});
requirejs([
'tinyMCE'
], function (tinyMCE) {
console.log(tinyMCE);
// your code here
});
Edit: I added iimuhin’s snippet from below in the comments. It doesn’t seem to work without it; I added it because future searchers will appreciate avoiding the added IE headache.
Had the same problem. My solution was to use TinyMCE jQuery plugin instead of TinyMCE directly. This way it works fine.
define(['jquery', 'tiny_mce/jquery.tinymce'], function ($) {
$('textarea').tinymce({
script_url : 'js/tiny_mce/tiny_mce.js',
theme : 'advanced',
theme_advanced_buttons1 : 'fontselect,fontsizeselect,forecolor,bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,removeformat,indent,outdent,numlist,bullist,copy,paste,link',
theme_advanced_buttons2 : '',
theme_advanced_buttons3 : '',
theme_advanced_toolbar_location : 'top',
theme_advanced_toolbar_align : 'left'
});
});
You can implement tinyMCE as usual in a backbone view. But you must wait until the view's el is inserted in the dom before initializing tinyMCE. In javascript, there is now way to detect when element is inserted in the DOM. But when a backbone view is rended (Backbone.View.render()), the element will be inserted in the dom after the current browser's process. Use a "setTimeout" to initialize the the tiny mce element with 1 millisecond (which will simply execute the code in the next browser's process).
var FormTextArea = Backbone.View.extend({
template : _.template('<%=value%>'),
tagName: 'textarea',
className: "control-group",
render: function(){
this.$el.html(this.template(this.model.toJSON()));
setTimeout(_.bind(this.initMCE, this), 1);
return this;
},
initMCE: function(){
tinymce.init({selector: 'textarea'});
}
});
var v = new FormTextArea({
model: new Backbone.Model({value: '<h2>Heading 2</h2><p>A paragraph here</p>'})
});
$('body').append(v.render().el);
Here is a jsfiddle :
http://jsfiddle.net/pCdSy/10/
Related
I have created some generic component which I am using in different product. Now here I have one window and window controller which is generic and I am overriding window class to make use of that in our product.
My Generic window.
Ext.define('App.win.Panel', {
extend: 'Ext.window.Window',
closeAction:'destroy',
maximizable:true,
hideToolbar:false,
requires: [
'App.MyWinCon.PanelController'
],
xtype: 'MyWin',
name:'MyWin',
controller: 'MyWinCon',
layout: {
type: 'border'
},
gridConfigs:{},
initComponent:function(){
var p=this;
p.items = [{
//items
}];
p.callParent(arguments);
}
});
And In my Product app I am using overriding like this way :
var Window1 = Ext.create('App.win.Panel', {
title: Windo,
modal:true,
height: '90%',
width: '95%',
parentGridObj:gridObj,
});
Window1.show();
There is no problem in that part. Window is coming.
Now in similar passion I have written controller in generic. I will show you small piece of code
Ext.define('App.MyWinCon.PanelController', {
extend: 'Ext.app.ViewController',
alias: 'controller.MyWinCon',
init: function(){
var p = this;
p.control({
#:{
beforeclose : function(this){
// SOme code
}
}
});
}
Now can anybody help me how to access this beforeclose or similar kind of methods in my app which is written in generic class.
Thanks for all the help.
You can't, or it's at least really really complicated; but there is a really really easy way with a minimum of refactoring:
Ext.define('App.MyWinCon.PanelController', {
extend: 'Ext.app.ViewController',
alias: 'controller.MyWinCon',
init: function(){
var p = this;
p.control({
#:{
beforeclose : p.beforeClose // just a reference to function below!
}
});
},
beforeClose: function(component){ // thou ought not use a variable named "this"!
// SOme code
}
Now you can access the function from your view:
view.getController().beforeClose()
In a CKEditor plugin, you can specify a toolbar for a button with this :
init:function(editor){
editor.ui.addButton('myplug',{
label:'my plug',
command:'myplug',
toolbar:'mytoolbar'
With widget, I don't find this possibility. Is there a way to do that without move the node in JS, that is a bit complicated ?
You can do the same with widgets. Here's a widget's plugin.js file with a button and toolbar declaration under the init function:
CKEDITOR.plugins.add( 'mywidget', {
requires: 'widget',
icons: 'mywidget',
init: function( editor ) {
CKEDITOR.dialog.add('mywidget', this.path + 'dialogs/mywidget.js')
editor.widgets.add( 'mywidget' , {
//
// Your widget logic is here ...
//
});
editor.ui.addButton('mywidget', {
label: 'My Widget'
command: 'mywidget'
toolbar: 'mytoolbar, 1'
});
}
} );
You'll need to add the "mytoolbar" toolbar in your config.js file, but I suppose you already have because you mentioned being able to add a button for a plug-in.
I had tried many WYSIWYG editors like TinyMCE, Ckeditor, and Summernote.
I like the simplicity of Summernote and the edit/save feature, but summernote seems not have an image manager plugin like TinyMCE or CKEditor.
My webapp has a pool (media library) of photos which can be uploaded by an individual user. I would like to have an feature that allows the user to select the photos from the pool, and adds it into the textarea when editing an article in Summernote (just like Wordpress did).
Could anyone give me some hint how to accomplish this feature by hand if truly no plugin supported?
as seen on my post at summernote github issue. https://github.com/summernote/summernote/issues/1203
this is what I do to integrate elFinder file manager with Summernote.
Create the Button at the Editor
(function (factory) {
/* global define */
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals: jQuery
factory(window.jQuery);
}
}(function ($){
// template, editor
var tmpl = $.summernote.renderer.getTemplate();
// add plugin
$.summernote.addPlugin({
name: 'genixcms', // name of plugin
buttons: { // buttons
readmore: function () {
return tmpl.iconButton('fa fa-long-arrow-right', {
event: 'readmore',
title: 'Read more',
hide: false
});
},
elfinder: function () {
return tmpl.iconButton('fa fa-list-alt', {
event: 'elfinder',
title: 'File Manager',
hide: false
});
},
},
events: { // events
readmore: function (event, editor, layoutInfo) {
layoutInfo.holder().summernote("insertText", "[[--readmore--]]");
},
elfinder: function (event, editor, layoutInfo) {
elfinderDialog();
},
}
});
}));
There are two button i made for my cms. see the elfinder button for the file manager. The elfinder event run the elfinderDialog() function and we had to make the function after that.
after that, add the button at summernote config.
$('.editor').summernote({
height: 300,
toolbar: [
['style', ['style']],
['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'video', 'hr', 'readmore']],
['genixcms', ['elfinder']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
],
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0],editor,welEditable);
}
});
See this tag ['genixcms', ['elfinder']] it will show the button separately from the others as it had it own division.
There is default image upload at the summernote image button. And it can upload to the server. I had it work and running well. The problem is some times we need to make modifications and we need the file manager.
Add the elFinder javascript function
After all summernote requirements is ready for loading the button. We need to create the function which will be executed when the button was clicked. See the code below.
function elfinderDialog(){
var fm = $('<div/>').dialogelfinder({
url : 'http://localhost/genixcms/inc/lib/Vendor/studio-42/elfinder/php/connector.minimal.php',
lang : 'en',
width : 840,
height: 450,
destroyOnClose : true,
getFileCallback : function(files, fm) {
console.log(files);
$('.editor').summernote('editor.insertImage',files.url);
},
commandsOptions : {
getfile : {
oncomplete : 'close',
folders : false
}
}
}).dialogelfinder('instance');
}
To insert the image is easy, Just double click the image and the image will inserted at the editor.
I hope this little snippet can help anyone who need file manager and want to use elFinder as the file manager.
thanks
Their main page demo has an image uploader in it. Also, the documentation for it can be viewed here
I'm trying to build a WebSite but i'm running into some porblems when it comes down to use 2 versions of jquery qith the bootstrap system (also with bootstrap validator).
First of all, i do already know there is a lot of questions in here about 2 versions of jquery, but i spent the last 2 days reading and trying to make this work, but i just can't!
This is why i'm here.
So, in my head tag i had set up the 2 versions i need to run.
1- is to make the bootstrap scripts work, like the dropdown menu and the form validation.
2- is to run the magnific popup script.
This is my head code so far:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="validator/vendor/jquery/jquery-1.10.2.min.js"></script>
the part of the script i'm trying to use with the noConflict () but i had no success.
This is what i did.
*the script i need to change the version of the jquery is for the magnificpopup
<script>
jq1111 = jQuery.noConflict(true);
</script>
<script type="text/javascript">
jq1111(document).ready(function() {
jq1111('.zoom-gallery').magnificPopup({
delegate: 'a',
type: 'image',
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'mfp-with-zoom mfp-img-mobile',
image: {
verticalFit: true,
titleSrc: function(item) {}
},
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 500, // don't foget to change the duration also in CSS
opener: function(element) {
return element.find('img');
}
}
});
});
</script>
Can anyone please help me? Because i'm out of ideas and i'm not that advanced in jquery, of course.
Thanks!
You need to run the jQuery.noConflict between the 2 script tags that include jQuery, including the one for magnificPopup and magnificPopup first:
<script src="jquery-1.11.1.min.js"></script>
<script src="magnific-popup.min.js"></script>
<script type="text/javascript">
var j1111 = jQuery.noConflict() ;
</script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
j1111.magnificPopup(/* ... */) ;
});
</script>
Use require.js and make whatever module dependant of the necessary jQuery version. For example :
require.config({
enforceDefine: true,
baseUrl: '/js',
shim: {
'jquery#1.11.1': {
exports: '$'
},
'jquery#2.1.1': {
exports: '$'
},
'bootstrap#3.1.1': {
deps: [ 'jquery' ], // use jQuery 2.1.1 !
exports: '$' // need to export something.... so... export jQuery!
},
'magnific': {
deps: [ 'jquery#1.11.1' ],
exports: '$.fn.magnificPopup'
}
},
paths: {
'jquery#1.11.1': 'http://code.jquery.com/jquery-1.11.1.min', // or a CDN...
'jquery#2.1.1': 'lib/jquery.min', // local copy!,
'bootstrap#3.1.1': 'lib/bootstrap.min', // local copy!
'magnific': 'http://dimsemenov.com/plugins/magnific-popup/dist/jquery.magnific-popup.min'
},
map: {
'*': {
'jquery': 'jquery#2.1.1',
'bootstrap': 'bootstrap#3.1.1'
}
}
});
Then, simply require your jQuery library
require(['jquery', 'jquery#1.11.1', 'jquery#2.1.1', 'magnific'], function ($, $1, $2) {
console.log($.fn.jquery, $.fn.magnificPopup);
console.log($1.fn.jquery, $1.fn.magnificPopup);
console.log($2.fn.jquery, $2.fn.magnificPopup);
});
Which, of course, will result in the correct output
2.1.1 undefined
1.11.1 function (n){_();var i=e(this);if("string"==typeof n)if("open"===n){var o,r=b?i.data("magnificPopup"):i[0].magnificPopup,a=parseInt(arguments[1],10)||0;r.items?o=r.items[a]:(o=i,r.delegate&&(o=o.find(r.delegate)),o=o.eq(a)),t._openClick({mfpEl:o},i,r)}else t.isOpen&&t[n].apply(t,Array.prototype.slice.call(arguments,1));else n=e.extend(!0,{},n),b?i.data("magnificPopup",n):i[0].magnificPopup=n,t.addGroup(i,n);return i}
2.1.1 undefined
I created a plugin named timestamp.
Code for plugin.js is this:
CKEDITOR.plugins.add( 'timestamp',
{
init: function( editor )
{
editor.addCommand( 'insertTimestamp',
{
exec : function( editor )
{
var timestamp = new Date();
editor.insertHtml( timestamp.toString() );
}
});
editor.ui.addButton( 'Timestamp',
{
label: 'Insert Timestamp',
command: 'insertTimestamp',
icon: this.path + '/icons/timestamp.png'
} );
}
} );
Icon is in /_source/plugins/timestamp/icons
But when I tried to add plugin in ./samples/fullpage.html, even toolbar not appearing
code:
<script>
CKEDITOR.replace( 'editor1', {
fullPage: true,
extraPlugins: 'wysiwygarea,timestamp',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList' ],
[ 'Timestamp' ]
]
});
</script>
If i tried to add this plugin in config.js, toolbar appear but without timestamp(my custom plugin)
code:
config.extraPlugins ='timestamp';
please let me know whats going wrong.Thanks
Just remove extraPlugin: 'wysiwygarea' or extraPlugins : 'docprops' is not required in full.html. Hopfully it will work:)
Your toolbar stopped appearing after you've added your plugin much probably because you've got some JS error in that plugin which breaks everything. Check your console and paste info here (or try to fix the issue by yourself :)).