I found javascript wysiwyg editor wysiHTML5.
I'm trying to add element <a href=...> to the editor or just turn on bold programmatically.
My code is:
var editor = new wysihtml5.Editor("textarea", {
toolbar: "toolbar",
stylesheets: "css/wysihtml5.css",
parserRules: wysihtml5ParserRules
});
editor.observe("load", function() {
editor.composer.commands.exec("bold");
});
Am I doing something wrong?
Actually no, but you have to be sure that your textarea (iframe) is focused. Try to use on instead of observe. Here is a sample code that worked for me with insertHTML.
editor.on("load", function() {
editor.focus();
editor.composer.commands.exec("insertHTML","<a href=....>text</a>");
});
mateusmaso's solution gave me the following error:
NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLDocument.execCommand]
[Break On This Error]
Object.defineProperty(object, property, config);
So I've investigated some more and found the following solution, which (IMO) seems more ok:
var value = 'whatever you want to set';
// The jQuery reference to the textarea
var $ta = $('textarea#your-selector');
// The reference to the wysihtml5 editor - everything is contained within it
var w5ref = $ta.data('wysihtml5');
// Check if you have it
if(w5ref){
// if yes it's really an enhanced / wysihtml5ed textarea
// and use its setter
w5ref.editor.setValue(value);
} else {
// otherwise just simply populate the textarea as you normally would
$ta.html(value);
}
Source
assuming you have instantiated the editor previously using $('#textarea-id').wysihtml5()
$('#textarea-id').data("wysihtml5").editor.setValue('new content');
font
Related
My main problem is initializing the text/value of a code editor(CodeMirror) on my website without it affecting the way I save/send POST requests to my backend. The following is the pug code I use for the POST request:
p
form(id='form' method='POST', action='/docs/edit/'+docs._id)
textarea(name="doo" id="content" style="display: none;")=docs.content
textarea(name="foo" id="editortext" style="display: none;")
input.btn.btn-primary(type='submit' value='Save Doc')
What I'm trying to do here, is send docs.content to textarea with id "content" so that I can use that to initialize the value of my code editor and then put the content of whats in the code editor in the textarea
"editortext" once I click the submit button. Thus, the POST request would fetch me the data from both textareas, where I can then save the content of the "editortext" textarea to my database. The logic of the code editor is referenced in the same pug file to a javascript file after rollup transpilation. The following is a chunk of the pre-compiled code:
/* eslint-env browser */
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
import { CodeMirrorBinding } from 'y-codemirror'
import CodeMirror from 'codemirror'
import 'codemirror/mode/clike/clike.js'
window.addEventListener('load', () => {
const ydoc = new Y.Doc()
const provider = new WebsocketProvider(
`${location.protocol === 'http:' ? 'ws:' : 'wss:'}${location.host}`,
'codemirror',
ydoc
)
const yText = ydoc.getText('codemirror')
const editorContainer = document.createElement('div')
editorContainer.setAttribute('id', 'editor')
document.body.insertBefore(editorContainer, null)
let content = document.getElementById("content").value
const editor = CodeMirror(editorContainer, {
mode: 'text/x-java',
lineNumbers: true
})
editor.setValue(content)
document.getElementById("form").onsubmit = function(evt){
document.getElementById("editortext").value = editor.getValue();
}
Most of this code is from the yjs-codemirror demo except for the declaration of the content variable,the invocation of the setValue method, and the document.getElementById("form") block. What this code currently does is send me the right information to my database. However, I am having trouble initializing the value of the code editor when I open up the document. The setValue method doesn't work, neither does doing the following:
const editor = CodeMirror(editorContainer, {
value: content,
mode: 'text/x-java',
lineNumbers: true
})
All of the prior examples fail even if I replace the content variable with some string. The only thing that seems to work is the following:
const editor = CodeMirror(editorContainer, {
mode: 'text/x-java',
lineNumbers: true
}).setValue(content)
However, the problem with this is that for some reason, I get the following errors in the console browser:
TypeError: codeMirror is undefined (y-codemirror.js:160:4)
TypeError: editor is undefined (index.js:28:10)
For reference, the javascript that I have been showing in this question was all from the index.js file. In any case, because the editor is undefined, I can no longer set the value of my "editortext" textarea to the CodeMirror Textarea and I can't save what is written to the code editor to my database. I'm not sure as to why this would happen, I'm not sure if this is particular to the CodeMirrorBinding from yjs but any help on this would be massively appreciated.
The following is quoted from dmonad who is one of the developers of Yjs. For future reference regarding any technical questions about Yjs, you will probably get better luck asking here as there isn't a tag for Yjs yet on StackOverflow.
Hi #notemaster,
I assume that you mean you are unable to set the value of the CodeMirror editor.
The CodeMirrorBinding binds the value of the Y.Text type to a CodeMirror instance. The setValue method works, but the value of the editor is overwritten by the binding:
ytext.insert(0, 'ytext')
const editor = CodeMirror(..)
editor.setValue('my value')
editor.value() // => "my value"
new CodeMirrorBinding(editor, ytext)
editor.value() // => "ytext value"
I suggest that you set the value after it has been bound to the YText type.
Another note: There is nothing like a default value in Yjs. Initially, the Yjs document is empty until it synced with the server. So you might want to wait until the client synced with the server before setting the value.
const setDefaultVal = () => {
if (ytext.toString() === '') {
ytext.insert(0, 'my default value')
}
}
if (provider.synced) {
setDefaultVal()
} else {
provider.once('synced', setDefaultVal)
}
const editor = CodeMirror(editorContainer, {
mode: 'text/x-java',
lineNumbers: true
}).setValue(content)
I assume editor.setValue() returns undefined . This is why the binding won’t work and you can set the initial value of the editor.
I'm currently working wit the CKEditor.
I have a form where user can fill data inside the CKEditor. When the user clicks the save button ajax is called. Inside the ajax call I replace the data with the form data. Before the ajaxFormOnSuccess() method I'm trying to destroy all the instances and replacing them again.
The destroy works properly but when I try to add an instance again i'm getting the error:
Uncaught TypeError: Cannot read property 'unselectable' of null
at c (ckeditor.js:227)
at a. (ckeditor.js:224)
at a.g (ckeditor.js:10)
at a.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:11)
at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
at a.fireOnce (ckeditor.js:12)
at a.CKEDITOR.editor.CKEDITOR.editor.fireOnce (ckeditor.js:13)
at Object. (ckeditor.js:177)
at k (ckeditor.js:161)
at Object.load (ckeditor.js:161)
Here is the code for destroying and adding them again.
$('textarea.ckeditor').each(function () {
var txtBoxID = this.attributes.id.nodeValue;
var editor = CKEDITOR.instances[txtBoxID];
if (editor) {
editor.destroy(true);
}
});
CKEDITOR.replace('GeneralData.TypeOfInsuranceGoods', { autoParagraph: false });
Currently just adding a single instance to test it but I'm getting the error(see above).
Does anyone know what I am doing wrong?
Thank you in behave.
Brent
I am creating a plugin for a template. After publishing the template to the web, there is an attribute inside an inserted script that I need to get its value and use it in my plugin.
Is there a way to do it with JS/jQuery?
Here is the part of the page in which the attribute is located:
Platform.Utils.initWidget('#skyline', function (elem) {
new Website.tool.Constantin(elem, {
event: 'click',
transitionDuration: 93000
});
});
I need to find a way to search the html and get the value for transitionDuration i.e 93000.
Additional comment:
This code is generated by the template and I have no control on changing how it is formed.
I inspected the html, and the template places the code as a JS code ( "the code" ) somewhere in the body.
So I assumed that there might be a way that the plugin that I am making could be able to read the html, find the attribute and use it to get the same transition duration that the html defines on its elements.
After re-reading and seeing your comments, I assume your template inserts
a script somewhere and you want to get at the transitionDuration with the plugin.
As in
var scripts = document.getElementsByTagName("script"), duration=0;
for (var i=0;i<scripts.length;i++) {
var text = scripts[i].textContent;
if (text.indexOf("transitionDuration") !=-1) {
duration = parseInt(text.split("transitionDuration:")[1],10);
break;
}
}
alert(duration);
<script>
Platform.Utils.initWidget('#skyline', function (elem) {
new Website.tool.Constantin(elem, {
event: 'click',
transitionDuration: 93000
});
});
</script>
You can get CSS values in javascript and jQuery but in this case, is better if you store the value in a variable.
var transDuration = 93000;
Platform.Utils.initWidget('#skyline', function (elem) {
new Website.tool.Constantin(elem, {
event: 'click',
transitionDuration: transDuration
});
});
alert(transDuration);
You can access to the transDuration variable when you need it.
If you need to read a CSS value, take a look at this:
Get a CSS value with JavaScript
Good luck
Im knocking my head to this scripts and I cant get my function to be displayed inside the Aletify.js alerts.
Some help will be incredibly helpful ;-)
The Function:
Oshoplang = {
// System Message Text
RemoveError: '<p>This item has now been removed from your cart.\n\nThank you.',
Added: 'Has now been added to your cart',
OutOfStock: '<p>This item is not currently available or is out of stock.</p>',
PreOrder: '<p>Your pre-order has been made successfully.\n\nThank you.</p>',
InvalidQuantity: '<p>It looks like you entered an invalid quantity.\n\nPlease try again.</p>',
}
window.alert = function() {};
$("#confirm-else").on('click', function() {
reset();
$('#e-content').addClass('blur');
alertify.alert(Oshoplang, function(e) {
if (e) {
alertify.success("OK");
$('#e-content').removeClass('blur');
location.reload();
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
I normally don't get a message on the run, but this way but i believe i'm close somewhere :-)
Not sure if you're still having this issue, but I believe that the alertify.alert function doesn't have any callbacks, as it's just a way to show a message. You're probably looking for the alertify.confirm instead.
The message is also not showing up because the first argument to alertify.alert or alertify.confirm needs to be a string. In your example, you're passing an object.
I've set up a demo of your code which has been adjusted to work on here on JSFiddle.
For what it's worth, the code sample is using an older version of alertify (0.3) and it has been updated, so that version 1 which is now out would have a somewhat adjusted syntax.
UPDATED POST
Ok I've managed to make Markdown and MathJax work together, it was relatively simple actually. I've used marked together with MathJax.
$(function() {
var $text = $("#text"), // the markdown textarea
$preview = $("#preview"); // the preview div
$text.on("keyup", function() {
$preview.html( marked($text.val()) ); // parse markdown
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]); // then let MathJax do its job
})
});
Problem now is: I think markdown is parsing my math 1st before MathJax can change it. How do i fix this? I think its fixed on Math StackOverflow, but how? I need to stop markdown from parsing math
UPDATE 2
This works, but not sure if its the way math.stackexchange does it, but it seems to produce similar/same results with what I tested so far ...
$(function() {
var $text = $("#text"),
$preview = $("#preview");
$text.on("keyup", function() {
$preview.html( $text.val() );
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]);
});
MathJax.Hub.Register.MessageHook("End Process", function (message) {
$preview.html( marked($preview.html()) );
});
});
OLD POST BELOW
In the math stackexchange, I can use MathJax with Markdown. I wonder what do I need to do that? I can use a library like marked to render Markdown, but for MathJax, it seems like it just renders on page loads. How can I call it to re-render or better just render whats needed (specified by me)
html = marked("some markdown string") // a HTML string
// is there something like
html = MathJax.parse(html)
UPDATE
I think I should be looking at http://www.mathjax.org/docs/1.1/typeset.html#manipulating-individual-math-elements. But when I try
$text.on("keyup", function() {
$preview.html( marked($text.val()) );
var math = MathJax.Hub.getAllJax("preview");
console.log(math);
MathJax.Hub.Queue(["Text", math, "a+b"]);
})
Where:
$text: is the jQuery element for my textarea
$preview: is the preview div
I find that math is undefined, so it seems var math = MathJax.Hub.getAllJax("preview") is not working. I have a div#preview btw.
The fastest way is to protect the math from your markdown-parser.
See this question for a detailed answer by Davide Cervone, including a link to the code used by math.SE.
For sublime, add the following code to Markdown Preview --> Settings - User,
{
/*
Enable or not mathjax support.
*/
"enable_mathjax": true
}
as shown below,
Refer to How to enable MathJax rendering in Sublimetext Markdown Preview.