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
Related
My CKEditor fields often contain lots of content with h1, h2, h3, etc headings, and I've written a script that presents all the headings in a sidebar for quick reference. I'd also like to use this sidebar as a navigation menu for the editor content, so clicking a heading in the sidebar scrolls the editor to the related heading, but I can't figure out how to wire it all up.
This post at https://davidwalsh.name/scroll-element-ckeditor leads me to believe that it should be possible, but I can't figure out how to get to the "editor" element described in the post.
My sidebar is built with jQuery from a CKEditor textarea with id="content" like this...
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
I imagine using jQuery :contains() to identify heading elements in the editor based on the text they contain, but I can't figure out how to hook back into the CKEditor instance in a way that enables this kind of DOM activity.
I am using CKEditor 4 but am happy to upgrade to version 5 if it offers a better solution to my problem.
Thanks!
This is what wound up working for me:
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
$('#sidebar .heading').click(function() {
var element = $('#cke_content iframe').contents().find(':contains(' + $(this).text() + ')')[2];
if (element) {
element.scrollIntoView();
}
});
In this jsfiddle I have a Kendo rich text editor. When the user starts writing text, I need the font to be Arial 12pt. How to accomplish that?
HTML
<textarea id="editor"></textarea>
Javascript
$("#editor").kendoEditor({});
You can use this script after you initialize the editor
var editorBody = $(".k-editable-area iframe").contents().find("body");
editorBody.css("font-family", "Arial");
editorBody.css("font-size", "12pt");
Or if you have multiple editor and you want to modify by using its ID, you can do this also
var editorBody1 = $($("#editor1").getKendoEditor().body);
editorBody1.css("font-family" ,"Arial");
editorBody1.css("font-size", "12pt");
The correct advance answer:
var editor = $("#editor").data("kendoEditor");
editor.body.style.fontFamily = "Lato,";
also try this option:
var editor = $("#editor").data("kendoEditor");
editor.body.style.font = "500 14px/1.2 Lato, Arial, sans-serif";
<script type="text/javascript">
function GetContents() {
var oEditor = CKEDITOR.instances.editor1;
document.getElementById('field').value = oEditor.getData();
}
</script>
Here i passed value from CKEditor to text field. In the similar way I want do vice verse from textbox to CKEditor.
field.value = oEditor.getValue();
oEditor.setValue(field.value);
But why do you need to do it? CKEditor perfectly works in form as it is when you apply it to the textarea.
Also as your function named GetContents it should return a value but not set it to the textbox. Follow the coding guidelines.
If you want to update <textarea> value with editor's data, use CKEDITOR.editor.updateElement.
If you want to synchronize editor's data with <textarea>, use CKEDITOR.editor.setData. There's no method in the API similar to updateElement that works the opposite way. Still, the official jQuery Adapter allows setting editor's data by calling $( textarea ).val( newValue ).
function GetContents() {
var oEditor = CKEDITOR.instances.editor1;
alert(document.getElementById('').value);
oEditor.setData(document.getElementById('').value);
}
I created the instance and did its working fine.
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;
}
}
How can I get Aloha Editor to recognize and edit the dynamically created dom/content?
I usually use jquery and use '.live' or '.on' to get this to work but not sure how to using Aloha.
Thanks
To create a dynamic aloha instance:
$(document).ready(function(){
// Add an editable upon clicking on some button Button
$("#Button").click(function () {
var $ = Aloha.jQuery;
$('#somewhere').append('<div class="editable" id="ed" ></div>');
Aloha.jQuery('.editable').mahalo();
Aloha.jQuery('.editable').aloha();
});
Now you can simply get the content:
var e = Aloha.getEditableById('ed');
getContents();
I haven't tested it but it should work.