I am using Summernote WYSIWYG editor and I'm stuck in this issue:
Every time the view changes from Rich Text to HTML I want to make some calculations and update the editors content.
But when the editor changes from Rich Text to HTML .code() doesn't seem to work...
After a while I realised that when the editor is in HTML mode, .code() does not work at all - that's why when pressing "codeview" button from text to html doesn't work...
See this feedle: http://jsfiddle.net/Lpp1Lmhn/4/ (press the "Update" button when in Rich Text and then when in HTML mode)
So the question is:
Is there a way to update the editor's content when in HTML view?
Thank you in advance.
Yes you can, but the funny little change you have to make is change ".live" to ".on". here is a link to discussion on the significance of that little change
$(document).ready(function(){
$('#editor').summernote({
height:200,
toolbar: [ ['text', ['bold', 'italic', 'underline']],
['misc', ['codeview']]
]
});
$('[data-event="codeview"]').on('click', function(){
$('#editor').code($('#editor').code()+'a');
});
$('#btn').click(function(){
$('#editor').code($('#editor').code()+'a');
});
});
and you can visit the working fiddle http://jsfiddle.net/2tnua16k/
Related
Can anyone tell me how to disable the textarea/content area without disabling the buttons?
It's not clear to me what you'd like to accomplish, so perhaps you could explain that in a bit more detail.
In any case, you can make CKEditor read-only by using the setReadOnly() method. This will disable both the toolbar and the content area. Making just the content area disabled with buttons enabled would create a really confusing UX, with the users not really understanding what's going on so perhaps you can re-think your idea?
You can see the Read-only Mode demo and read more about this feature in the Read-Only Mode documentation.
You can try using below hack but please note that you will only be able to style existing content but you won't be able to insert anything (e.g. you won't insert table but you will be able to bold or link your text).
var editor = CKEDITOR.replace( 'editor1', {
language: 'en',
on : {
contentDom : function( event ) {
CKEDITOR.instances.editor1.document.getBody().setAttribute( 'contenteditable', false );
}
}
});
I am trying to extend a "code view" and a "design view" within an application of mine. I am able to use either the code view (Ace Editor) or the design view (tinymce) with no issues. However I would want the two to work together and update the code on either side when developing. This would make me only have to POST one tag rather than doing two and may have issues down the road.
I created this fiddle to show what problem I am having.
In my fiddle I show a tinymce textarea, a regular textarea and a ace editor textarea. The tinymce and regular textarea share the same name and it's being called by Ace editor to update as I am typing. You can see the regular textarea works perfectly however, the tinymce textarea is not.
I believe the issue may be coming from the fact that TinyMCE is using an iFrame and updating the textarea behind the scenes but I am not exactly sure the best way to call that iframe in javascript.
I've tried to sync both, but due to some missing callbacks/events on tinyMCE, this is best I get. The content in ACE is only updating after blur on tinyMCE. There's currently no direct input event:
Fiddle forked
Code:
var editor = ace.edit("edit");
var textarea = $('textarea[name="test"]');
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
// copy ace to tinyMCE
tinymce.get('test').setContent(editor.getSession().getValue());
});
editor.setTheme("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/theme-terminal.js");
editor.getSession().setMode("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/mode-html.js");
tinymce.init({
selector: ".test",
relative_urls: false,
apply_source_formatting : true,
setup : function(ed) {
ed.on('change', function(e) {
// copy tinyMCE to textarea
textarea.val(tinymce.activeEditor.getContent({format : 'raw'}));
// copy tinyMCE to ace
editor.getSession().setValue(
tinymce.activeEditor.getContent({format : 'raw'})
);
});
}
});
You should be setting ACE theme and mode this way:
editor.setTheme("ace/theme/terminal");
editor.getSession().setMode("ace/mode/html");
I am having trouble retain the format of the text when pasting into a text area housed by TinyMCE. I have seen that a similar question has been asked, but has not been answered so thought I'd try my luck.
I have tried various variations of the TMCE configuration, but no dice and I'm not sure if I've missed something.
TinyMCE is working, all but when I use my drop downs to paste content into the text area. The paste into the text area is done through code behind VB.NET and the files being accessed are txt files which have spaces and line breaks; this format is kept correct without TinyMCE's presence, so I am not sure what to do regarding TMCE, and whether anyone has any solutions for this.
If any more code is required please say and I'll amend but this issue appears to be with TMCE only.
Thank you.
<script src="../Scripts/tinymce/tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
tinymce.init({
menubar: false,
paste_retain_style_properties: true,
paste_merge_formats: true,
selector: "textarea"
Update
I am getting a .txt file via a drop down box that pastes into a text file using code behind, see below example, ideally I want to achieve this programmatically without having to edit the source files as that'll be a real pain.
VB.NET
Dim ddl2 As DropDownList = CType(sender, DropDownList)
Dim ctl2 As TextBox = DirectCast(ddl2.NamingContainer.FindControl("TextBox2"), TextBox)
If ddl2.SelectedValue = 1 Then
ctl2.Text = My.Computer.FileSystem.ReadAllText("C:\Users\Dave\Documents\Templates\message.txt")
I am not sure exactly what you are doing but if you take txt files and want to keep their formatting in an HTML editor, you will, most likely, need to replace the new lines (\n and/or \r) with the HTML <br /> tag.
We have a redactor editor which we populate from the database but once we have submitted the data back we need to clear the textarea.
We have tried various combinations but are unable to clear it out.
jQuery("#redactor").redactor('set', '');
AND
jQuery("#redactor").val("");
$("#redactor").redactor('code.set', '');
updated version
With Redactor version 3, I had to use below code in order to clear redactor textareas:
$('.redactor-in').html('');
Note: This clears all redactor textareas in the current page, one need to change the class name .redactor-in inside the jQuery DOM selector if they want to clear specific textareas and leave some.
As you are working with the DOM you can just clear the innerHTML
$('.redactor_editor').html('');
Source: How to clear input or HTML or text on the redactor wysiwyg editor?
There's also some more documentation on http://imperavi.com/redactor/docs/api/
$('#redactor').redactor('insertHtml', 'your code');
you can use this code sample for RedactorX
$('.rx-editor p').html("")
so I have a textarea surrounded by a DIV container:
<div>
<textarea id="code"> some text here </textarea>
</div>
and this textarea is tranformed into a code editor using CodeMirror:
CodeMirror.fromTextArea('code', {
lineNumbers: true,
matchBrackets: true,
mode: 'text/html'
});
the problem is that when the container of the textarea is hidden (some times it is, depending on what the user chooses to display), then after toggling to unhide it the CodeMirror editor doesn't appear like it should. It only shows one line, and you have to actually click inside it to redraw and show properly.
Does anyone know a fix for this?
refresh()
If your code does something to change the size of the editor element (window resizes are already listened for), or unhides it, you should probably follow up by calling this method to ensure CodeMirror is still looking as intended.
from CodeMirror manual (assuming you're using version 2)