I have an angular2 app with tinyMce as a HTML editor. The only problem is, I need to convert the URLs in the html through my REST API. To do that I attempted to use "urlconverter_callback" from tinyMce, but I loose the reference to this and get stuck:
ngAfterViewInit(): void {
console.log('tinymce');
tinymce.init({
selector: `[data-tinymce-uniqueid=${this.uniqueId}]`,
theme: "modern",
skin: 'light',
height: 768,
toolbar: 'undo redo | styleselect | bold italic | link image | code',
plugins: 'code',
schema: 'html5',
urlconverter_callback: this.urlConverter,
setup: ed => {
ed.on('init', ed2 => {
if (this.innerValue) ed2.target.setContent(this.innerValue.text);
this.init = true;
});
}
});
// I chose to send an update on blur, you may choose otherwise
tinymce.activeEditor.on('blur', () => this.updateValue());
}
urlConverter(url, node, on_save): string {
console.log("TinyDirective.urlConverter(%o, %o, %o)", url, node, on_save);
console.log("TinyDirective.urlConverter: this = %o", this);
console.log("TinyDirective.urlConverter: this.innerValue = %o", this.innerValue);
return this.innerValue.url_converter(url);
}
From the console I can see, that this is no longer pointing to my directive. As a result I can't access the innerValue property.
How can I create a callback that will have a correct reference of my directive?
You can try one of these options:
1) use bind within tinymce.init
urlconverter_callback: this.urlConverter.bind(this)
or within constructor:
constuctor() {
this.urlConverter = this.urlConverter.bind(this);
}
2) use arrow function on the urlConverter method
urlConverter = (url, node, on_save): string => {
...
}
or within tinymce.init
urlconverter_callback: (url, node, on_save) => this.urlConverter(url, node, on_save)
Related
I have some Froala Editor inputs and I want to use generic propierties for all of them and then add some custom properties according to the current input.
For assign the froala object I use this code:
new FroalaEditor('.froala-editor-inline-horari', {
toolbarInline: true,
placeholderText: 'Editar',
toolbarButtons: [
['bold', 'italic'],
['textColor', 'backgroundColor']
],
events: {
contentChanged: function () {
guardarFila(this);
}
},
spellcheck: false
});
I want to use some generic properties as a constant like:
const FROALA_PROPERTIES = {
toolbarInline: true,
placeholderText: 'Editar',
toolbarButtons: [
['bold', 'italic'],
['textColor', 'backgroundColor']
],
events: {
contentChanged: function () {
guardarFila(this);
}
},
spellcheck: false
});
and then add to this object some modification like:
events: {
initialized: function () {
this.html.set('some value');
}
so, in this example I want to obtain the first object FROALA_PROPERTIES plus the new events: {...} key.
Is it this possible?
I answer myself because I found the solution. I can add this keys and values or functions by the next code:
FROALA_PROPERTIES.events.initialized = function () {
this.html.set('some value');
}
But if events key doesnt exist, then I need to create it first.
I based my andwer by this web research: http://researchhubs.com/post/computing/javascript/add-a-key-value-pair-to-a-javascript-object.html
To prevent the tab-event to be fired in my Angular 5+ component, I overrode the standard quill implementation for the tab-event with a binding as mentioned in the documentation
const bindings = {
// This will overwrite the default binding also named 'tab'
tab: {
key: 9,
handler: function(range) {
// Handle tab
},
},
};
As we don't want to deal with nested ordered or unordered lists, I expected the tab-event not to be triggered on empty list entries.
Does anyone knows how to modify a custom handler to prevent this functionality?
You must define the 'modules' property on this way:
var quill = new Quill('#editor', {
modules: {
keyboard: {
bindings: {
indent: {
key: 'Tab',
handler() {
return false;
},
},
outdent: {
key: 'Tab',
shiftKey: true,
handler() {
return false;
},
},
}
}
}
});
Well, there are other default handlers for tab like indent, outdent and outdent backspace. You can check this file https://github.com/quilljs/quill/blob/develop/modules/keyboard.js#L184
So you have to overwrite more :)
Is there an option to paste always from the clipboard as plain text?
I tried it that way, but that does not work:
$(document).ready(function () {
ClassicEditor.create(document.querySelector('#text'), {
toolbar: [
'heading',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'blockQuote',
'undo',
'redo'
]
}).then(function (editor) {
this.listenTo(editor.editing.view, 'clipboardInput', function (event, data) {
// No log.
console.log('hello');
});
}).catch(function (error) {
});
});
https://docs.ckeditor.com/ckeditor5/latest/api/module_clipboard_clipboard-Clipboard.html
https://docs.ckeditor.com/ckeditor5/latest/api/clipboard.html
https://docs.ckeditor.com/ckeditor5/latest/api/module_engine_view_document-Document.html#event-event:paste
The clipboardInput event is fired on the Document, not the View. So the first thing will be to listen on the right object.
The second thing is ensuring that the content inserted into the editor is a plain text. This can be done in two ways:
HTML taken from the clipboard can be "plain-textified". But this is hard.
We can take plain-text from the clipboard and insert that into the editor. However, the editor expects HTML to be pasted, so you need to "HTMLize" this plain-text. CKEditor 5 offers a function for that – plainTextToHtml().
To override the editor's default behaviour we'll need to override this callback: https://github.com/ckeditor/ckeditor5-clipboard/blob/a7819b9e6e2bfd64cc27f65d8e56b0d26423d156/src/clipboard.js#L137-L158
To do that, we'll listen to the same event (with a higher priority), do all the same things, but ignore text/html flavour of the clipboard data. Finally, we 'll call evt.stop() to block the default listener from being executed and ruining our job:
import plainTextToHtml from '#ckeditor/ckeditor5-clipboard/src/utils/plaintexttohtml';
// ...
const clipboardPlugin = editor.plugins.get( 'Clipboard' );
const editingView = editor.editing.view;
editingView.document.on( 'clipboardInput', ( evt, data ) => {
if ( editor.isReadOnly ) {
return;
}
const dataTransfer = data.dataTransfer;
let content = plainTextToHtml( dataTransfer.getData( 'text/plain' ) );
content = clipboardPlugin._htmlDataProcessor.toView( content );
clipboardPlugin.fire( 'inputTransformation', { content, dataTransfer } );
editingView.scrollToTheSelection();
evt.stop();
} );
EDIT:
Starting from CKEditor 27.0.0 the code has changed (you can read more about it here https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-27.html#clipboard-input-pipeline-integration)
import plainTextToHtml from '#ckeditor/ckeditor5-clipboard/src/utils/plaintexttohtml';
//...
const clipboardPlugin = editor.plugins.get( 'ClipboardPipeline' );
const editingView = editor.editing.view;
editingView.document.on( 'clipboardInput', ( evt, data ) => {
if ( editor.isReadOnly ) {
return;
}
const dataTransfer = data.dataTransfer;
let content = plainTextToHtml( dataTransfer.getData( 'text/plain' ) );
data.content = editor.data.htmlProcessor.toView( content );
editingView.scrollToTheSelection();
}, { priority: 'high' } );
Without any imports:
.then(editor => {
editor.editing.view.document.on('clipboardInput', (evt, data) => {
data.content = editor.data.htmlProcessor.toView(data.dataTransfer.getData('text/plain'));
});
})
You have complete methods in documentation of ckeditor clipboard events
I've been struggling hard with getting VueJS and TinyMCE to work together. I've come to the conclusion that using directives would be the way to go.
So far I've been able to pass in the body as a directive parameter, and tinyMCE sets the content. However, I can't get the two way binding to work. I'm also afraid that I'm doing things completely wrong based on the tinyMCE api.
The relevant tinyMCE functions I assume would be:
http://community.tinymce.com/wiki.php/api4:method.tinymce.Editor.setContent
// Sets the content of a specific editor (my_editor in this example)
tinymce.get('my_editor').setContent(data);
and
http://community.tinymce.com/wiki.php/api4:method.tinymce.Editor.getContent
// Get content of a specific editor:
tinymce.get('content id').getContent()
HTML
<div id="app">
<h3>This is the tinyMCE editor</h3>
<textarea id="editor" v-editor :body="body"></textarea>
<hr>
<p>This input field is properly binded</p>
<input v-model="body">
<hr>
<pre>data binding: {{ body }} </pre>
</div>
JS
tinymce.init({
selector:'#editor',
});
Vue.directive('editor', {
twoWay: true,
params: ['body'],
bind: function () {
tinyMCE.get('editor').setContent(this.params.body);
tinyMCE.get('editor').on('change', function(e) {
alert("changed");
});
},
update: function (value) {
$(this.el).val(value).trigger('change')
},
});
var editor = new Vue({
el: '#app',
data: {
body: 'The message'
}
})
Fiddle
https://jsfiddle.net/nf3ftm8f/
With Vue.js 2.0, the directives are only used for applying low-level direct DOM manipulations. They don't have this reference to Vue instance data anymore. (Ref: https://v2.vuejs.org/v2/guide/migration.html#Custom-Directives-simplified)
Hence I recommend to use Component instead.
TinymceComponent:
// Use JSPM to load dependencies: vue.js 2.1.4, tinymce: 4.5.0
import Vue from 'vue/dist/vue';
import tinymce from 'tinymce';
// Local component
var TinymceComponent = {
template: `<textarea class="form-control">{{ initValue }}</textarea>`,
props: [ 'initValue', 'disabled' ],
mounted: function() {
var vm = this,
tinymceDict = '/lib/jspm_packages/github/tinymce/tinymce-dist#4.5.1/';
// Init tinymce
tinymce.init({
selector: '#' + vm.$el.id,
menubar: false,
toolbar: 'bold italic underline | bullist numlist',
theme_url: tinymceDict + 'themes/modern/theme.js,
skin_url: tinymceDict + 'skins/lightgray',
setup: function(editor) {
// If the Vue model is disabled, we want to set the Tinymce readonly
editor.settings.readonly = vm.disabled;
if (!vm.disabled) {
editor.on('blur', function() {
var newContent = editor.getContent();
// Fire an event to let its parent know
vm.$emit('content-updated', newContent);
});
}
}
});
},
updated: function() {
// Since we're using Ajax to load data, hence we have to use this hook because when parent's data got loaded, it will fire this hook.
// Depends on your use case, you might not need this
var vm = this;
if (vm.initValue) {
var editor = tinymce.get(vm.$el.id);
editor.setContent(vm.initValue);
}
}
};
// Vue instance
new Vue({
......
components: {
'tinymce': TinymceComponent
}
......
});
Vue Instance (simplified)
new Vue({
el: '#some-id',
data: {
......
description: null
......
},
components: {
'tinymce': TinymceComponent
},
methods: {
......
updateDescription: function(newContent) {
this.description = newContent;
},
load: function() {
......
this.description = "Oh yeah";
......
}
......
},
mounted: function() {
this.load();
}
});
HTML (MVC view)
<form id="some-id">
......
<div class="form-group">
<tinymce :init-value="description"
v-on:content-updated="updateDescription"
:id="description-tinymce"
:disabled="false">
</tinymce>
</div>
......
</form>
The flows
First the data is loaded through remote resources, i.e., AJAX. The description got set.
The description got passed down to the component via props: initValue.
When the component is mounted, the tinymce is initialized with the initial description.
It also sets up the on blur event to get the updated content.
Whenever the user loses focus on the editor, a new content is captured and the component emits an event content-updated, letting the parent know that something has happened.
On Html you have v-on:content-updated. Since the parent is listening to the content-updated event, the parent method updateDescription will be called when the event is emited.
!!Couple Important Notes!!
By design, the component has 1 way binding, from parent to component. So when the description gets updated from Vue instance, the component's initValue property should be updated as well, automatically.
It would be nice if we can pass whatever the user types in tinymce editor back to the parent Vue instance but 2 ways bindings is not supposed. That's when you need to use $emit to fire up events and notify parents from components.
You don't have to define a function in parent and do v-on:content-updated="updateDescription". You can just directly update the data by doing v-on:content-updated="description = $event". The $event has the parameter you defined for the function inside the component - the newContent parameter.
Hope I explained things clearly. This whole thing took me 2 weeks to figure it out!!
Here's a Tinymce component for Vue.
http://jsbin.com/pucubol/edit?html,js,output
It's also good to know about v-model and custom input components:
https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events
Vue.component('tinymce', {
props: ['value'],
template: `<div><textarea rows="10" v-bind:value="value"></textarea></div>`,
methods: {
updateValue: function (value) {
console.log(value);
this.$emit('input', value.trim());
}
},
mounted: function(){
var component = this;
tinymce.init({
target: this.$el.children[0],
setup: function (editor) {
editor.on('Change', function (e) {
component.updateValue(editor.getContent());
})
}
});
}
});
<tinymce v-model="whatever"></tinymce>
Try this:
Vue.directive('editor', {
twoWay: true,
params: ['body'],
bind: function () {
tinyMCE.get('editor').setContent(this.params.body);
var that = this;
tinyMCE.get('editor').on('change', function(e) {
that.vm.body = this.getContent();
});
}
});
The trick was storing the directive in the temporary variable "that" so you could access it from within the change event callback.
There is now an npm package which is a thin wrapper around TinyMCE, making it easier to use in a Vue application.
It is open source with code on GitHub.
Installation:
$ npm install #tinymce/tinymce-vue
Usage:
import Editor from '#tinymce/tinyme-vue';
Templates:
<editor api-key="API_KEY" :init="{plugins: 'wordcount'}"></editor>
Where API_KEY is your API key from tiny. The init section is the same as the default init statement except you do not need the selector. For an example see the documentation.
For the software I am currently working on I am doing a small little CMS for our internal help documents, but I have been trying to use TinyMCE so that they can easily apply styles that fit our look and feel without needing to understand HTML. I have all of the custom buttons I need working, however I am having trouble with the final custom button.
What we need is a button that will automatically take a word they type as a query string parameter (FindWord?Word=[the input field]) which when clicked on the page later, would pop out a hidden div and anchor to the glossary word. However the getContent() function does not seem to be working for me, and after over 12+ hours of searching, and trying numerous examples, I can't seem to get it to work.
Other details i am not sure are important:
-Using MVC 4 with Razor views, TinyMCE 4 with the TinyMCE.Jquery package.
-This is the input field in question: http://i.imgur.com/wrMoTOP.png
Any help would be great! Thanks!
<script type="text/javascript">
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "mceEditor",
theme: "modern",
plugins: "pagebreak,textcolor,layer,table,save,hr,image,link,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,fullscreen,visualchars,nonbreaking,template,wordcount,code,customcss_1,customcss_2",
menubar: "edit format view table tools",
toolbar: "undo redo print glossaryword | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | outdent alignleft aligncenter alignright alignjustify indent | bullist numlist hr |",
contextmenu: "undo redo | cut copy paste | link | customcss_1 customcss_2 glossaryword |",
height: 500,
setup: function (ed) {
ed.addButton('glossaryword', {
title: 'Query String Parameter',
onclick: function () {
ed.windowManager.open({
title: 'Query String Parameter',
body: [
{ type: 'textbox', name: 'source', label: 'Source' }
],
onsubmit: function (e) {
ed.focus();
ed.selection.setContent('' + ed.selection.getContent() + '');
}
});
}
});
}
});
After messing around awhile longer I realized I was being silly.
setup: function (ed) {
ed.addButton('glossaryword', {
title: 'Query String Parameter',
onclick: function () {
ed.windowManager.open({
title: 'Query String Parameter',
body: [
{ type: 'textbox', name: 'word', label: 'Glossary Word', id: 'popupword' }
],
onsubmit: function (e) {
ed.focus();
ed.selection.setContent('' + e.data.word + '');
}
});
}
});
}