I have a string (from a buffer) that I have to put into an ace editor (like a pre tag) but when I add the string ace is not showing any indentation whereas a normal <pre></pre> and the console both show all indentation.
In the console I see the indentation!
console.log(d.code.toString());
But when I add it to ace:
$('#view').html(
'<pre id="editor">'
+ (d.code.toString().replace(/\>/g,'>').replace(/\</g,'<'))
+ '</pre>'
);
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
Try using editor.session.setValue(d.code.toString()) instead of using html.
or simply pass option to ace.edit
var editor = ace.edit(null, {
theme: "ace/theme/monokai",
mode: "ace/mode/javascript",
value: d.code.toString(),
});
then append editor.container to the dom
editor.container.id = "editor"
$('#view').append(editor.container)
Related
I am using laravel and if some one puts the link in the description it shows as simple text only not as a link.So what needs to be done if the link should appear as link and simple text as simple text.
You can use jquery and regexp as below to achieve the same or you should use some wysiwyg editor
$(function(){
$("#yourTextArea").on("blur", function(){
var text = $(this).val();
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
var text1=text.replace(exp, "<a href='$1'>$1</a>");
var exp2 =/(^|[^\/])(www\.[\S]+(\b|$))/gim;
$(this).val(text1.replace(exp2, '$1<a target="_blank" href="http://$2">$2</a>'));
})
})
It is not possible to render HTML tags inside Textarea. It will treat it as a text. Either you make use of rich text editor or use div contenteditable.
Here is some more reference:
Rendering HTML inside textarea
I am using Ace editor in my text area for highlighting. I have my own tokenizer without using regex. The tokenizer is in the server side and called using http call. Now what I wanted to do is to highlight every token I got from the server. I tried to use addMarker function to highlight every token but does not work. Sample code below,
highlightToken = function(token) {
var
aceRange = ace.require('ace/range').Range,
row = editor.selection.lead.row, // editor is my ace editor
adjAceRange = new aceRange(row, token.position - 1 , row, token.position + token.length),
styleClass = token.type;
editor.session.addMarker(adjAceRange, styleClass, "text", true);
}
In my css,
.styleClass {
position:absolute;
color: blue;}
The color of the token does not change. But if I add background property in the css, the background of the token is changed. Did I miss something?
I have a problem. I'd like to show CKEditor without toolbar, and still keep colors on it. This is my code.
$(document).ready(function() {
var textAreaName = 'description';
CKEDITOR.replace( textAreaName, {
removePlugins: 'toolbar,elementspath',
readOnly: true
} ) ;
var oCKeditor = CKEDITOR.instances[textAreaName];
});
The problem is text color doesn't show. It seems that CKEditor disable color as well.
Assuming (because it's still unclear) that you want to keep text color in editor's contents (BTW. editor's contents is not rendered using textarea - it is only used for easier data submitting) this is a solution:
config.extraAllowedContent = 'span{!color}';
This will allow span elements with color style. Read more about Advanced Content Filter.
use this config.uiColor = '#AADC6E';
Where config is object of that component.
I want to use KendoUI editor to basically only allow users to format text into paragraphs. Possibly allow bold and underline.
I'm struggling with 2 things:
I want to strip all html formatting from text when pasting
I want to disable keyboard shortcuts for bold, underline etc - they seem to work even when toolbar element is not there.
Thanks!
For pasting the only the text you might define a paste handler that remove all but text. This is as simple as:
$("#editor").kendoEditor({
paste: function (ev) {
ev.html = $(ev.html).text();
}
});
The paste handler receives as argument an event that has in html the text being parsed. We can use jQuery for getting only the text using $(ev.html).text()
For removing the shortcuts, and as far as I could test it with latest Kendo UI version, if you define only the tools that you want, only those shortcut are active. So if you say something like:
$("#editor").kendoEditor({
tools: [
"italic"
],
paste: function (ev) {
ev.html = $(ev.html).text();
}
});
Only italic shortcut <ctrl>+i is available. If you leave tools array empty then you do not have any.
This can be easily achieved now with pasteCleanup option.
See here: http://docs.telerik.com/kendo-ui/controls/editors/editor/pasting
Kendo MVC has also extension for this purpose. Example of usage:
.PasteCleanup(x => x.KeepNewLines(false))
false in this case means that you want to clear everything except new lines.
for me this is the complete solution
pasteCleanup: {
custom: function (html)
{
html = html.replace(/<\s*br\/*>/gi, '');
html = html.replace(/<\s*a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link - $1) ");
html = html.replace(/<\s*\/*.+?>/ig, '');
html = html.replace(/ {2,}/gi, '');
html = html.replace(/\n+\s*/gi, '');
html = html.replace(" ", '');
html = html.replace(/<.*?>/g, '');
return html;
}
}
I'm building a simple dialog plugin to replace the default link tool. The design calls for a particular layout that is difficult to achieve with the CKEdit dialog definition: We want a single field to appear above the tab elements in the dialog (see illustration).
Can anyone suggest a way that this might be implemented? Thanks!
As far as I can tell it is not possible to achieve this using the built-in dialog definition.
I was able to get around this limitation by building my dialog plugin using the iframedialog plugin. This basically pops up a CKEditor dialog window and loads an external URL into it. You can do anything you want in that iframe, and then return the text to CKEditor when the user presses the OK button.
A simple example:
// plugins/iframelink/plugin.js
CKEDITOR.plugins.add('iframelink', {
requires: ['iframedialog'],
init: function(editor){
CKEDITOR.dialog.addIframe('iframelinkDialog',
// title
'Insert a Link',
// src
this.path + 'dialogs/link.html',
// minWidth
500,
// minHeight
250,
// onContentLoad
);
var cmd = editor.addCommand('iframelink', {exec: iframelinkOnclick});
editor.ui.addButton('iframelink', {
label: 'Insert a Link (Special Link Tool)',
command: 'iframelink',
icon: this.path + 'images/world_link.png'
});
}
});
function iframelinkOnclick(editor){
dialog = editor.openDialog('msiteslinkDialog');
};
// plugins/iframelink/dialogs/iframelink.js
$(function() {
if (typeof(window.parent.CKEDITOR) != 'undefined') {
CKEDITOR = window.parent.CKEDITOR;
var dialog = CKEDITOR.dialog.getCurrent();
var editor = dialog.getParentEditor();
// Get value of the selected text:
var selection = editor.getSelection().getSelectedText();
// Do something when the user presses the OK button:
var okListener = function(ev) {
link = yourFunctionToDoSomethingClever();
this._.editor.insertHtml(link);
dialog.removeListener("ok", okListener);
};
// Bind the OK button to your okListener method:
dialog.on("ok", okListener);
};
}
So you can make the dialog look any way you want: