I am using an inline editor ipweditor tool which internally use tinyMCE editor. On their demo page it is using old version of tinyMCE which is not working in my IE. So I updated tinyMCE with latest version.
In old version of TinyMCE it was returning me defined content with all the HTML tags, while in new version it is returning me only text without HTML tags.
Here is the link of jsFiddle demo. Anyone know how do I configure tinyMCE so it return me HTML tags also.
HTML
<div style="display:none">
<form method="post" action="somepage">
<textarea name="content" style="width:100%"></textarea>
</form>
</div>
<div style="border: solid thin gray; padding:5px;">
<div class="my_text"><b> <span>Click me! I am editable and WYSIWYG!!!</span></b>
</div>
Javascript
$(document).ready(function () {
var ed = new tinymce.Editor('content', {
mode: "exact",
theme: "advanced",
plugins: "emotions,table",
theme_advanced_toolbar_location: "top",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
theme_advanced_buttons1: "bold,italic,underline,fontselect,fontsizeselect,forecolor,backcolor,|,code,",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
table_default_cellspacing: 0,
table_default_border: 1,
remove_linebreaks: false
});
$('.my_text').editable({
type: 'wysiwyg',
editor: ed,
onSubmit: function submitData(content) {
alert(content.current);
},
submit: 'save',
cancel: 'cancel'
});
});
It's always not preferable to make any modification in plugin library, but this really need some modification. The problem was with 'ipweditor.js' tool. It's creating new tinyMCE editor object internally and getting response in "text" format from tinyMCE.
var r =options.editor.getContent({format : 'text'});
We need to replace 'text' with 'html'
var r =options.editor.getContent({format : 'html'});
It's more preferable to make this format setting also dynamic so append a setting variable in inital settings and fetch value from there.
var defaults = {
onEdit: null,
onSubmit: null,
onCancel: null,
editClass: null,
submit: null,
cancel: null,
type: 'text', //text, textarea or select
submitBy: 'blur', //blur,change,dblclick,click
editBy: 'click',
editor: 'non',
options: null,
format:'text'
}
var options = $.extend(defaults, options);
and now retrieve using the format defined in setting.
var r =options.editor.getContent({format : options.format});
You can use content.previous. Here is a modified fiddle.
Related
In my code I created an editor like so:
this.monacoEditor = monaco.editor
.create(
document.getElementById('ide'), {
model: null,
readOnly: true,
contextmenu: false,
}
);
So now that editor is readonly. How would I change this.monacoEditor to be writable/editable?
I figured it out. In the context of the code above:
this.monacoEditor.updateOptions({readOnly: false});
I have the following file structure
And in content.php i have the following JS code
var file = "http://2sense.net/blog/posts/my-second-post.md"
var opts = {
basePath: "http://2sense.net/blog/posts/",
container: 'epiceditor',
textarea: null,
basePath: 'epiceditor',
clientSideStorage: true,
localStorageName: 'epiceditor',
useNativeFullscreen: true,
parser: marked,
file: {
name: 'epiceditor',
defaultContent: '',
autoSave: 100
},
theme: {
base: '/themes/base/epiceditor.css',
preview: '/themes/preview/preview-dark.css',
editor: '/themes/editor/epic-dark.css'
},
button: {
preview: true,
fullscreen: true
},
focusOnLoad: false,
shortcut: {
modifier: 18,
fullscreen: 70,
preview: 80
},
string: {
togglePreview: 'Toggle Preview Mode',
toggleEdit: 'Toggle Edit Mode',
toggleFullscreen: 'Enter Fullscreen'
}
}
window.editor = new EpicEditor(opts);
editor.load(function () {
console.log("Editor loaded.")
});
$("#openfile").on("click", function() {
console.log("openfile");
editor.open(file);
editor.enterFullscreen();
})
When i try to open the file with "editor.open(file);" does not happen anything. And I have verified that the event is triggered proprely when i press the button.
Do you have any idea how to fix this, or do you have a real example... the documentation for the API on the epiceditor website does not say so much.
Cheers
Client side JS cannot open desktop files (or, not easily or cross browser). This would be a nice feature to use with the File API, but that's not implemented. EpicEditor stores "files" in localStorage. When you do editor.open('foo') you're basically doing: JSON.parse(localStorage['epiceditor'])['foo'].content. This has been asked a few times, so I made a ticket to make it more clear in the docs.
https://github.com/OscarGodson/EpicEditor/issues/276
Does that help?
P.S. a pull request with docs that make sense to you are always welcome :)
I try to create template and this template should be from 1 element - textarea, but this textarea should be extended to TinyMCE control.
I try to do it via following ascx control:
<textarea id="SubComment" name="SubComment" style="width: 80%">
<% = Html.Encode(ViewData.TemplateInfo.FormattedModelValue) %></textarea>
<script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,nonbreaking,xhtmlxtras,template,imagemanager,videoupload",
// Theme options
theme_advanced_buttons1: <% = txtAdvButtons %>,
theme_advanced_buttons2: "tablecontrols",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "",
theme_advanced_resizing: true,
onchange_callback: "changed",
// Example content CSS (should be your site CSS)
content_css: "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "js/template_list.js",
external_link_list_url: "js/link_list.js",
external_image_list_url: "js/image_list.js",
media_external_list_url: "js/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
},
setup: function(editor) {
editor.addButton('myupload', {
title: 'Insert image',
image: '/tiny_mce/plugins/imagemanager/pages/im/img/insertimage.gif',
onclick: function() {
mcImageManager.upload({
path: '{0}',
onupload: function(info) {
var i, html = '';
for (i = 0; i < info.files.length; i++)
html += '<img src="' + info.files[i].url + '" />';
editor.execCommand('mceInsertContent', false, html);
}
});
}
});
}
});
</script>
but when I try to use this template I see simple textarea. How to apply this javascript extention (it works correctly out of ascx control)?
Thanks
So I read up on the documentation for tinyMCE and it turns out that the code you posted there should be placed in the Head tag or another script file.
Change your textarea to this:
<textarea name="SubComment" class="tinyMCETextArea" style="width: 80%">
And in your tinyMCE initialization code:
$(function(){
tinyMCE.init({
/// all your options
editor_selector: "tinyMCETextArea",
/// More stuff
});
});
This is the code that is used to trigger Plupload in my Rails App:
<% content_for :deferred_js do %>
$("#uploader").pluploadQueue({
runtimes : 'gears,html5,flash,browserplus,silverlight,html4',
url : '/uploads.js',
//browse_button : 'pickfiles',
max_file_size : '10mb',
chunk_size : '2mb',
unique_names : false,
container: 'uploader',
autostart: true,
//RoR - make sure form is multipart
//multipart: true,
// Specify what files to browse for
filters : [
{title : "Image files", extensions : "jpg,gif,png,bmp"}
],
// PreInit events, bound before any internal events
preinit : {
UploadFile: function(up, file) {
up.settings.multipart_params = {"upload[stage_id]" : compv.steps.selectedStage.getID(), "authenticity_token" : compv.tools.csrf_token()};
}
},
// Post init events, bound after the internal events
init : {
FilesAdded: function(up, files) {
// Called when files are added to queue
up.start();
},
FileUploaded: function(up, file, info) {
// Called when a file has finished uploading
console.log('[FileUploaded] File:', file, "Info:", info);
info.responseText = info.response;
compv.updateStepView('upload', info);
$('tr[data-upload] td.selectable-step').each(function(index){
compv.steps.selectedUpload.primeUploadDisplay($(this));
});
},
Error: function(up, args) {
// Called when an error has occured
up.stop();
compv.tools.clientError();
}
},
// Flash settings
flash_swf_url : '/plupload/js/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url : '/plupload/js/plupload.silverlight.xap'
});
compv.steps.selectedUpload.uploader = $('div#uploader').pluploadQueue();
//compv.steps.selectedUpload.uploader.init();
// Client side form validation
$('form#new_upload').submit(function(e) {
var uploader = $('#uploader').pluploadQueue();
// Validate number of uploaded files
if (uploader.total.uploaded == 0) {
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('UploadProgress', function() {
if (uploader.total.uploaded == uploader.files.length)
$('form').submit();
});
uploader.start();
} else
$('div#upload-empty-dialog').dialog("open");
e.preventDefault();
}
});
$('div#upload-empty-dialog').dialog({modal:true, autoOpen: false, minWidth: 325, buttons: { "Ok": function() { $(this).dialog("close"); } }});
$('div#upload-cancel-dialog').dialog({modal:true, autoOpen: false, minWidth: 325});
<% end %>
<div class="dialog" id="upload-empty-dialog" title="No Files">
<p>You must select files to upload first.</p>
</div>
<div class="dialog" id="upload-cancel-dialog" title="Cancel Uploading?">
<p>Do you want to stop uploading these images? Any images which have not been uploaded will be lost.</p>
</div>
Is there anything obvious that jumps out that could be causing this ?
Edit1: Btw, when I try this upload form - http://jsfiddle.net/Atpgu/1/ - the add files button fires for me on both Chrome & FF - so I suspect it has something to do with my JS, I just don't know what.
Edit2: This is what the definition of compv is. I know it's a bit verbose, and I was going to reduce it - but decided not to at the risk of removing something important.
var compv = {
exists: true,
tools: { exists: true,
csrf_param : null,
csrf_token : null},
comments: { exists: true,
updateView: null,
selectImage: null,
upvote:null,
downvote:null,
showVotes:null,
getUploadID: function(element){
return $(element).parents("li").attr("data-upload-id");
}},
steps: { exists: true,
selectFn:{},
selectedClass: "selected-step",
selectableClass: "selectable-step",
selectedClient: { element: null,
id: null,
stepType: "client",
ajaxSuccess: null },
selectedProject: { element: null,
id: null,
stepType: "project",
ajaxSuccess: null },
selectedStage: { element: null,
id: null,
stepType: "stage",
ajaxSuccess: null,
getID: function(){
return compv.steps.selectedStage.id;
},
displayCompare: function(){
window.open($(this).attr('data-url'), "_blank");
}},
selectedUpload: { element: null,
id: null,
stepType: "image",
primeUploadDisplay: null,
ajaxSuccess: null,
uploader: null,
noCloseDialog: false} }
};
Plupload is not rendering correctly for hidden elements, that is why it should be refreshed after shown.
In given example, after DIALOG is opened, there should be added few lines of code:
var uploader = $('#uploader').pluploadQueue();
uploader.refresh();
I noticed, that in chrome, it has problems to set z-index correctly for input container. To workaround that, just add another line after previous two:
$('#uploader > div.plupload').css('z-index','99999');
You can solve this problem with Chrome easier by setting the css of your browse_button (= Select Files Button) to a higher z-index (z-index:99999) !
Lucian
I know this is an old question but it seems that the z-index issue is still around in the later versions of plupload (1.5.2).
The problem is caused by code in plupload.html5.js which changes the z-index of the "Add Files" button specifically for Webkit browsers and in doing so breaks things:
zIndex = parseInt(plupload.getStyle(browseButton, 'z-index'), 10);
if (isNaN(zIndex)) {
zIndex = 0;
}
plupload.extend(browseButton.style, {
zIndex : zIndex
});
plupload.extend(inputContainer.style, {
zIndex : zIndex - 1
});
If you view the DOM you will see that style="z-index: 0;" is added to the #uploader_browser anchor element, and the div containing the "Add Files" button gets a z-index of -1 which effectively hides it behind the page (depending on your pages z-index of course).
To fix this I set the zIndex value in the file mentioned above to something higher than the page that the plupload div was being displayed on.
Deele's solution with css is good but little better is to do it this way:
$('#uploader > div.plupload input').css('z-index','99999');
That way hover of button will be not broken...
I am reloading content of a div using an ajax request.
<div>
<textarea id="content-value" rows="15" cols="40" class="tinymce" style="width:100%"></textarea>
</div>
Within this div I have a text area that is initialized with tinymce...
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "tinymce",
theme : "advanced",
theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|formatselect,fontsizeselect,|,code",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "",
height: "340",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false
});
After loading the content with an AJAX request, I remove the editor, replace the content, and then attempt to re-add the editor to tinyMCE.
function OnCreateResponse(response) {
if(response.success) {
tinymce.EditorManager.execCommand('mceRemoveControl',true, 'content-value');
$(dlgElem).html(response.html);
tinymce.EditorManager.execCommand('mceAddControl', true, 'content-value');
}
}
}
Upon re-adding tinyMCE gives me the following error
Error: tinyMCE.get("content-value") is
undefined
when executing ...
tinymce.EditorManager.execCommand('mceAddControl', true, 'content-value');
Does anyone have any ideas as to what I am doing wrong?