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
Related
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'm using TinyMce Style Formats to add custom formats to the ""Formats" dropdown.
The problem is that I have too many styles to add, and I would like to use another "Formats" dropdown, separated from the first one. I know I can nest formats but it's not enough, I want to add two different Dropdown, how can I do it?
Have a look at the style plugin in tinymce3 (in tinymce4 it is part of the tinymce core). You may copy that plugin rename it and configure it to your needs. Then you need to add the plugin to your plugin list and the tinymce button to your button list.
This is best done adding formats to the formatter programmatically and then adding a menu item and trigger the formatter
editor.on( 'Init', function( e ) {
editor.formatter.register(
'page-title',
{ 'selector': 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li',wrapper: false, classes : ['giga', 'primary-font'] }
);
} );
editor.addButton( 'typography', {
text: 'Typography',
icon: false,
type: 'menubutton',
menu: [
{
text: 'Page Title',
menu: [
{
text: '(Giga) 88 Clan pro thin #000000',
onclick: function() {
editor.formatter.toggle( 'page-title' );
}
},
]
},
]
});
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 :)).
What I am ultimately trying to do is to implement some simple code highlighter (/Syntax Highlighter) since there was nothing available in ckEditor. For this reason I am thinking to add a new button ( or modify one of the existing buttons) by clicking which the selected text changes in the following manner:
1- gets mono-space font to preserve indentations in source code (e.g. "Courier New")
2- the font color changes to blue
Since I don't know how to add a new button I was thinking to use one of the existing buttons, say block quote button, to do the job.
added note:
by the way I just noticed that the ckEditor 4 is out too: ckeditor 4
where the plugins are customizable too:ckeditor 4 builder
You can consider the following plugin I created from scratch in hurry (this is not a full solution but it shows the right direction):
(function() {
'use strict';
CKEDITOR.plugins.add( 'prettify', {
icons: 'prettify',
init: function( editor ) {
editor.on( 'mode', function( event ) {
if( editor.mode == 'wysiwyg' )
insertResources( editor );
});
editor.addCommand( 'prettify', {
exec: function( editor ) {
var selection = editor.getSelection(),
startElement = selection.getStartElement();
if ( startElement.hasClass( 'prettyprint' ) )
return;
var contents = startElement.getText();
// Naive pre-processing.
contents = contents.replace( /\n/g ,'<br>' );
contents = contents.replace( /\t/g ,' ' );
contents = contents.replace( / /g ,' ' );
startElement.setHtml( prettyPrintOne( contents, 'js', 0 ) );
startElement.addClass( 'prettyprint' );
}
});
editor.ui.addButton( 'Prettify', {
label: 'Prettify',
command: 'prettify',
toolbar: 'insert'
});
}
});
function insertResources( editor ) {
var outerHead = CKEDITOR.document.getHead(),
innerHead = editor.document.getHead(),
path = CKEDITOR.plugins.getPath( 'prettify' );
outerHead.append( CKEDITOR.document.createElement( 'script', {
attributes: {
type: 'text/javascript',
async: 'true',
src: path + 'lib/prettify.js'
}
}));
innerHead.append( CKEDITOR.document.createElement( 'link', {
attributes: {
rel: 'stylesheet',
href: path + 'lib/prettify.css'
}
}));
}
})();
To run it, extract Google Prettify library into lib directory of prettify plugin. Then try the following HTML and use the button in the toolbar to prettify pre:
<textarea cols="80" id="editor1" name="editor1" rows="10">
<pre>function insertResources( editor ) {
var outerHead = CKEDITOR.document.getHead(),
innerHead = editor.document.getHead(),
path = CKEDITOR.plugins.getPath( 'prettify' );
</pre>
<p>Foo:</p>
<pre>outerHead.append( CKEDITOR.document.createElement( 'script', {
attributes: {
type: 'text/javascript',
async: 'true',
src: path + 'lib/prettify.js'
}
}));</pre>
<p>Bar:</p>
<pre>innerHead.append( CKEDITOR.document.createElement( 'link', {
attributes: {
rel: 'stylesheet',
href: path + 'lib/prettify.css'
}
}));
}</pre>
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
extraPlugins: 'prettify',
toolbar: [
[ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
[ 'Bold', 'Italic' ],
'/',
[ 'Prettify']
]
} );
</script>
A WYSIWYG editor generates an HTML markup or encoded HTML at the back to store your formatting, let’s say for the quote it might be generating this code at the back:
<blockquote> … </blockquote>
(However this varies from one editor to another)
The easiest way to do it is to find out the tag it is generating in the background and apply CSS style to it as you want.
//.CSS
blockquote{
//Styles here…
}
Hope it helps.
Not sure what is your full use case, but here's mine, which ended up with a custom plugin
I wanted to be able to insert code snippets into CKEditor using a dialog window (not sure why you prefer the blockquote element)
I wanted to have these code snippets somehow visually marked in CKEditor, I did not care about having real syntax highlighter in CKEditor
At the end, after saving the content, I wanted to apply real syntax formatting to the inserted element without spending too much work on it. I used prettify for that.
Feel free to check the plugin and modify it to your needs.
I just found this super easy solution:
open the contents.css in the root of ckeditor
add the following:
blockquote {
color: blue;
font-family: "Courier New",
Courier,
monospace;
}
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/