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 :)).
Related
I have a console error that says Uncaught ReferenceError: tinymce is not defined and I really don't know how to solve that. It says that the error is in the javascript file below:
(function() {
"use strict";
tinymce.PluginManager.add('wdm_mce_button', function( editor, url ) {
editor.addButton('wdm_mce_button', {
text: 'Team',
icon: false,
onclick: function() {
// change the shortcode as per your requirement
editor.insertContent('[team_section]');
}
});
editor.addButton('services', {
text: 'Services',
icon: false,
onclick: function() {
// change the shortcode as per your requirement
editor.insertContent('[services_section]');
}
});
});
})();
So the error should be in the "tinymce.PluginManager.add" line. I must mention that this code is running on wordpress and I use it to add some buttons in my classic editor. I'm waiting for some help please.
Thank you!
I am using sanitize-html in my project. Say suppose I get a mail which has anchor tag, something like this:
this is to test something open google
This mail appears in my mail box like this :
this is to test something open google
Which opens google.com in the same tab. But I need to open in new tab.
Here is my code.
__html = sanitizeHTML(children, {
allowedTags: sanitizeHTML.defaults.allowedTags.concat([ 'img' ]),
allowedAttributes: {
'*': [ 'href', 'align', 'alt', 'center', 'bgcolor', 'style', 'width' ],
'img': ['src'],
'a' : ['target']
},
}
Here I want to set or override target = "_blank" . How to achieve that in sanitize-html ?
Unfortunately I could not find a tag for sanitize-html.
According to READ.MD/doc and your problem description, something like:
__html = sanitizeHTML(children, {
...,
transformTags: {
'a': function(tagName, attribs) {// simpleTransform also possible...
return {
tagName: 'a',//tagName
attribs: {
target: '_blank',
href: '*'
}
};
}
...should do it.
EDIT:
A better solution preserving the current (allowed!) attributes:
....
transformTags: {
'a': sanitizeHtml.simpleTransform('a', {target: '_blank'})
}
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.
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/