I have a college project in which i am using ace editor on a webpage. https://github.com/ajaxorg/ace
Ace editor customizes tag to look like a editor. I can extract its value usign jquery .val() function or editor API but the source code looses its syntax.
For example if the code is :
System.out.printls("Enter number");
int value = ScannnerObj.nextInt();
The extracted values looks like :
System.out.printls("Enter number");int value = ScannnerObj.nextInt(); //All in one line
I have to extract this value from editor and save it in database I am using Django for it.
Later I also want to retrieve it in such that the Program Syntax is not altered.
Can anyone tell my correct way to achieve this. I am missing some link in here.
Thanx in advance :)
Ok guys I found the solution for it :) use the following code to render ace editor
editor = ace.edit("editor");
not
var editor = ace.edit("editor"); //(not to write var)
Related
I'm currently trying to implement a visual editor using a library called tiptap.
https://v1.tiptap.dev/
I think v2 is the most common tiptap, but there are circumstances where v1 must be used.
However, I was not satisfied with the behavior when I pasted plain text into tiptap, and when I looked into it, I found that the condition set in the library prosemirror was different from what I expected.
https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.js#L57-L59
text.trim().split(/(?:\r\n?|\n)+/).forEach(block => {
dom.appendChild(document.createElement("p")).appendChild(serializer.serializeNode(schema.text(block, marks)))
})
It seems that prosemirror converts a single newline to <p></p>.
I would like to change the condition so that it converts to <br> if there is one newline, and <p></p> if there are two newlines.
But I don't know how to make it happen, and I'm having a very hard time.
editorProps: {
clipboardTextParser(text, $context) {
console.log(text)
console.log($context)
// :(
}
}
I started by using tiptap's EditorProps feature to overwrite the entire processing of prosemirror's clipboardTextParser.
However, clipboardTextParser uses a number of variables and objects in prosemirror, and I have no idea how to write them in editorProps.
And I gave up because I didn't know how to proceed.
Is there any way to solve this?
I'm thinking that if tiptap can do almost the same thing as clipboardTextParser, it should be fine.
Pardon my broken English.
Please help me!
You should use transformPastedHTML
https://prosemirror.net/docs/ref/#view.EditorProps.transformPastedHTML
That will give you a html node then you can simply change the output it like this:
private cleanHtmlHanlder (html: string): string {
const elementHtml = document.createElement('br')
elementHtml.innerHTML = html
return elementHtml
}
Hope it helps
i have a html file that have this javasscript code
var a=["","#"]
so i want to add a value after the # by writing that value in the website link
like :
site.com/#value
so the js code will be
var a=["","#value"]
is that possible by using GET in php?
and how ?
Thank you
You can do it in pure JS:
var a = ["", window.location.hash];
I have a am working on project where i load a lot of tinyMCE editor instances dynamically. Do not have access to element id, because user has a possibility to add new editor instance.
Previously when I was using regular textfields, so I was looping through all of them and doing something like this:
var obj = {
$(this).find('.mytextfieldselector').val()
}
problem is, that when I try to find tiny mce like this:
$(this).find('.mce-tinymce').getContent();
It doesn't work.
Is there any solution?
TinyMCE maintains an array of all editor instances on a page via tinymce.editors - it returns an array.
Here is a TinyMCE Fiddle that shows how to use it to iterate over all the editors and collect their content:
http://fiddle.tinymce.com/migaab/1
Today I found a solution. It was much simpler than I thought.
Loop through all the divs you have.
First take attribute 'id' of your editor using jquery. Then use tinyMCE.get(id).
it would be something like this:
$(this).find('.yourDivSelector').each(function() {
var currentEditorId = $(this).find('.yourTinyMCEEditorSelector').attr('id');
var textAreaValue = tinyMCE.get(currentEditorId).getContent();
//Here do what you want wit textAreatValue
}
tinyMCE.activeEditor.getContent()
This is probably a stupid mistake that i have made; i am still new to web development so be nice please :)
Here i create the object
var crs0 = {ID:1, TITLE:"test", DESC:"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",ER:"a",LENGTH:"a", FEE:"a"};
Here i use an onclick event to call a function & pass the object as a parameter
<div class = "btnDC" onclick="display(crs0)">test</div>
Here is the function that i use to replace data in some textarea's & text inputs with properties from the object.
function display(crs)
{
document.getElementById("ttl").value=crs.TITLE;
document.getElementById("dsc").value=crs.DESC;
document.getElementById("er").value=crs.ER;
document.getElementById("lng").value=crs.LENGTH;
document.getElementById("fees").value=crs.FEE;
document.getElementById("ID").value=crs.ID;
}
The onclick does nothing & i have no idea why. (Other javascript on the page does work so i haven't missed a semi-colon :D )
[Update 1]
All of the data is pulled from a database the code above is copied from the page it produces; i have done a few tweaks & i can get it to produce an alert box for the display function however if i try & make it show any data of the object within that alert box it doesn't display anything (i hate not having a debugger), which suggests that the object isn't being passed.
Here is the PHP code i use to create the onclick
echo '<div class = "btnDC" onclick="display(crs'.$n.')">'.$inf['TITLE'][$n].'</div>
Could that be the issue?
it produces this line of code
<div class = "btnDC" onclick="display(crs0)">test</div>
As mentioned the code i have shown works (thanks juvian);
I generated this code from php & although the javascript generated was correct there was a problem with some of the php, i didn't find the exact problem but i have re-written most of the php & now it works.
As mentioned the code i have shown works (thanks juvian); I generated this code from php & although the javascript generated was correct there was a problem with some of the php, i didn't find the exact problem but i have re-written most of the php & now it works.
This question already has answers here:
Get formatted HTML from CKEditor
(12 answers)
Closed 9 years ago.
I'm using CKEditor in my web app, but I don't know how to get html content from it.http://cksource.com/ckeditor
I searched online found one said using getData() method, but there is no getData() method after typing dot after the controler. Can anyone give me a sample code to get html from CKEditor controller? Thank you in advance.
To get htmlData from editor you should use the code snippet bellow:
var htmldata = CKEDITOR.instances.Editor.document.getBody().getHtml();
If this solution won't work, check if you have BBCode plugins installed.
getData() is part of the javascript API.
It seems that you are trying to do it at the server side, so you should check the specific API of whatever wrapper you are using, or just check the value in the form posted data.
Not sure how you're implementing usage of the CKEditor.
If you're replacing a textarea using CKEDITOR.replace( 'NameOfTextarea', this should work:
CKEDITOR.instances.NameOfTextarea.on( 'instanceReady', function( instanceReadyEventObj )
{
var editorInstanceData = CKEDITOR.instances.NameOfTextarea.getData();
alert( editorInstanceData );
});
Replace "NameOfTextarea" with the name of your textarea, it's used to name the editor instance.
It's a good idea to put it inside the "on instanceReady" function so you don't get an undefined error.
Joe