Here is how I init TinyMCE:
tinymce.init({
selector: '.editable',
inline: true,
contextmenu: false,
setup: function (editor) {
editor.on('blur', function (e) {
var content = editor.getContent();
if ( !content )
selector.text('Enter text here...');
});
}
});
What I basically want is to use some placeholder in case a user has removed everything inside the current .editable element. The code above won't work, because selector is not defined. How do I select a current node a different way?
If you want to place content in the editor instance when its "empty" you can just do this:
tinymce.init({
selector: '.editable',
inline: true,
contextmenu: false,
setup: function (editor) {
editor.on('blur', function (e) {
var content = editor.getContent();
if ( !content )
editor.setContent('<p>Enter text here...'</p>);
});
}
});
You would then need to do something in reverse when the focus returns.
There is a 3rd party plugin that does what you appear to want:
https://github.com/mohan/tinymce-placeholder
I cannot vouch for how good the code is but perhaps that plugin will solve this issue for you in its entirety.
Related
I want to make that when creating a paragraph in the ckeditor, a certain class is automatically added to it. I wrote this code, but it does not work.
CKEDITOR.on('instanceReady', function (ev) {
var editor = ev.editor;
editor.dataProcessor.htmlFilter.addRules({
elements: {
p: function (el) {
el.addClass('myClass');
}
}
});
});
Why? How can I solve my problem?
Please use something like below. You should use dataFilter instead of htmlFilter and the best approach would be using both of them in order to avoid cases where you create paragraph with no class in design/wysiwyg mode and then you switch to source mode or get data from the editor.
var editor = CKEDITOR.replace( 'editor1', {
language: 'en',
extraPlugins : 'placeholder',
on: {
pluginsLoaded: function( evt ) {
evt.editor.dataProcessor.dataFilter.addRules( {
elements: {
p: function( el ) {
//The Html filter works when you load data into editor.
if(!el.hasClass('nomargins'))
el.addClass('nomargins');
}
}
} );
evt.editor.dataProcessor.htmlFilter.addRules( {
elements: {
p: function( el ) {
//The Html filter works when you get data from editor.
if(!el.hasClass('nomargins'))
el.addClass('nomargins');
}
}
} );
}
}
});
I'm using Summernote as a wysiwyg editor but I have one problem. Most of my text editing goes in the code view and the problem is that if you submit the form while in code view, the edited text does not become saved.
For some reason I need to switch between code view and wysiwyg view to save get the edited text saved. Anyone have any clues on how to fix this?
I have seen this Not saving content while in code view? #127 but it does not work for me.
Here is my code.
$(document).ready(function() {
$('#desc').summernote({
height: 1000, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true, // set focus to editable area after initializing summernote
codemirror: {
mode: 'text/html',
htmlMode: true,
lineNumbers: true,
theme: 'monokai'
},
callbacks: {
onBlur: function() {
//should probably do something here
},
onInit: function() {
console.log('Summernote is launched');
$(this).summernote('codeview.activate');
}
}
});
});
If necessary here is the html.
<textarea name="desc" id="desc" class="form-control" rows="40"></textarea>
Try to do something like this.
$(document).on("submit","#my-form-name",function(e){
$("#desc").val($('#desc').code());
return true;
});
$(document).on("submit","#my-form-name",function(e){
if ($('#desc').summernote('codeview.isActivated')) {
$('#desc').summernote('codeview.deactivate');
}
});
This copies summernote's code value into the value of the text
$(#desc).on('summernote.blur.codeview', function() {
$(#desc).val($(desc).summernote('code'));
});
Looks like using the onblur callback could have also worked: https://summernote.org/deep-dive/#initialization-options
$($('.summernote').closest("form")).on("submit",function(e){
if ($('.summernote').summernote('codeview.isActivated')) {
$(".summernote").val($('.summernote').summernote());
return true;
}
return true;
});
$($('.summernote').closest("form")).on("submit",function(e){
if ($('.summernote').summernote('codeview.isActivated')) {
$('.summernote').summernote('codeview.deactivate');
}
});
(I'm going to preface this with the fact that I'm a new javascript developer, and I'm sure I have gaps in my knowledge about how javascript/angular/quill all work together on the page.)
I'm wanting to know if this is possible. Instead of instantiating the editor in the script tag on the page, I want to instantiate the editor for the div when it gets clicked. I'm using an Angular controller for my page, and inside the on click event I set up for the div, I tried a few things:
editor = new Quill(myDiv, {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
But that didn't work, so I thought maybe I had to explicitly pass the id of the div:
editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
This didn't work, and didn't focus inside the div and allow me to edit. So I thought maybe the problem was that I was hijacking the click event with angular, and maybe I need to switch the focus to the div after instantiating the editor. So I created a focus directive (just copy/pasted from another SO article) which worked fine when I tested on an input.
app.directive('focusOn', function () {
return function (scope, elem, attr) {
scope.$on(attr.focusOn, function (e) {
elem[0].focus();
});
};
then in the on click function in the angular controller:
$scope.$broadcast('focussec123');
if (editor == null) {
editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
}
That worked to select the text inside the div, but it didn't show the toolbar and so I suspected it didn't really work. I'm sure I'm misunderstanding some interactions and I'm fully aware I lack a lot of necessary knowledge about JS. My bottom line is I want to know:
Is it possible to dynamically instantiate the editor only for the current section, and to instantiate the editor again for another section when it gets clicked, etc.
If so, how?
Thanks in advance.
yes you can create Quill instances dynamically by clicking on a <div>.
It's exactly what we do.
That's how (roughly):
export class TextbocComponent ... {
private quill: Quill;
private target: HTMLElement;
private Quill = require("quill/dist/quill");
private onParagraphClicked(event: MouseEvent): void {
const options = {
theme: "bubble"
};
if (!this.quill) {
this.target = <HTMLElement>event.currentTarget;
this.quill = new this.Quill($(target).get(0), options);
$(target).children(".ql-editor").on("click", function(e) {
e.preventDefault();
});
}
this.quill.focus();
event.stopPropagation();
event.preventDefault();
}
}
For those who aren't using Angular:
$(document).on('click', '#editor', function() {
if (!$(this).hasClass('ql-container')) {
var quill = new Quill($('#editor').get(0), {
theme: 'snow'
});
quill.focus()
}
});
Its much easier:
var quills = [];
counter = 0;
$( ".init_quill_class" ).each(function() { // add this class to desired div
quills[counter] = new Quill($(".init_quill_class")[counter], {});
//quills[counter].enable(false); // if u only want to show elems
counter++;
});
I am trying to load wp_editor on demand using jquery/javascript.
Somehow I got success using following code but it does not save changed data in the element.
tinyMCE.execCommand('mceAddEditor', false, textarea_id);
I'll really appreicate any contribution.
When we use wp_editor() it loads WordPress default visual editor.
You must load:
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
Working example : http://jsfiddle.net/rupomkhondaker/j7brgyL2/
<textarea id="test">Easy features.</textarea>
And the code is
$(document).ready(function() {
tinyMCE.init({
mode : "none"
});
tinyMCE.execCommand('mceAddEditor', false, 'test');
});
Simply use
tinymce.execCommand('mceAddEditor', false, 'textarea_id');
Here is another example example:
<textarea name="sectionContent_1" id="sectionContent_1"></textarea>
script:
var textAreaID = 'sectionContent_' + sectionID;
$(this).parent()
.find('.sectionOptions')
.html(ctHolder).ready(
function() {
tinyMCE.execCommand('mceAddEditor', false, textAreaID);
}
);
and the most simple way is
tinyMCE.execCommand("mceAddEditor", false, id);
tinyMCE.execCommand('mceAddControl', false, id);
I am trying to integrate javascriptspellchecker into a web page with ckEditor (note I am using ckeditor version 3.6). I would like to replace the default spellcheck and SCAYT (spell check as you type) plugins with new custom plugins that use javascriptspellcheck.
I have created a plugin following the example from the javascriptspellchecker website but it doesn't work properly. The javascriptspellchecker taked the id of the textarea and runs a spellcheck on it's value (or attaches event handlers to spellcheck after input when chosing SCAYT). The problem is, when I alter the text in a ckEditor instance, the hidden textbox doesn't seem to be updated in the background. This means the plugin I have written only checks the original value of the textarea, and the SCAYT doesn't work.
My plugin so far:-
(function () {
//Section 1 : Code to execute when the toolbar button is pressed
var a = {
exec: function (editor) {
$Spelling.SpellCheckInWindow($(editor.element).attr('id'))
}
},
//Section 2 : Create the button and add the functionality to it
b = 'javascriptspellcheck';
CKEDITOR.plugins.add(b, {
init: function (editor) {
editor.addCommand(b, a);
editor.ui.addButton("JavaScriptSpellCheck", {
label: 'Check Spelling',
icon: this.path + "images/spell.png",
command: b
});
}
});
})();
Does anyone know if it is possible to make a working plugin? Is there a way to force the editor to update the hidden textarea, or is there another DOM element I can pass to the spellchecker?
Update:
In case it is useful, the SCAYT version of my plugin uses the following execute function
exec: function (editor) {
$Spelling.SpellCheckAsYouType($(editor.element).attr('id'))
}
Update 2:
I found a soltion for the normal spell check, I can call editor.UpdateElement() before running the spell check and it works! I'm not sure why though, when I inspect the original textarea with firebug the value doesn't seem to have changed.
New Spellcheck plugin
(function () {
//Section 1 : Code to execute when the toolbar button is pressed
var a = {
exec: function (editor) {
editor.updateElement();
$Spelling.SpellCheckInWindow($(editor.element).attr('id'));
}
},
//Section 2 : Create the button and add the functionality to it
b = 'javascriptspellcheck';
CKEDITOR.plugins.add(b, {
init: function (editor) {
editor.addCommand(b, a);
editor.ui.addButton("JavaScriptSpellCheck", {
label: 'Check Spelling',
icon: this.path + "images/spell.png",
command: b
});
}
});
})();
I still can't get SCAYT to work though. I found a ckeditor plugin to catch change events, and tried to call the updateElement() funciton again on every change. This doesn't work though, can anyone help?
My SCAYT plugin using the ckeditor onchange plugin:
exec: function (editor) {
editor.on('change', function (e) { this.updateElement(); });
$Spelling.SpellCheckAsYouType($(editor.element).attr('id'));
}
After contacting support for JavaScriptSpellcheck, they replied saying "SCAYT will not work with any editor as it risks injecting junk HTML into your forms". So the SCAYT plugin for CK Editor is not possible. As in my question update, the code for a working Spell Check in Window plugin for CK Editor (v3.6) is below:
(function () {
//Section 1 : Code to execute when the toolbar button is pressed
var a = {
exec: function (editor) {
editor.updateElement();
$Spelling.SpellCheckInWindow($(editor.element).attr('id'));
}
},
//Section 2 : Create the button and add the functionality to it
b = 'javascriptspellcheck';
CKEDITOR.plugins.add(b, {
init: function (editor) {
editor.addCommand(b, a);
editor.ui.addButton("JavaScriptSpellCheck", {
label: 'Check Spelling',
icon: this.path + "images/spell.png",
command: b
});
}
});
})();