I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js
Related
It's really hard to understand how Tinymce can be considered as WYSIWYG, because I cannot get what I see (visually exactly). So it is more likely "what you see is just what you see".
Currently I use getContent() to get the HTML. But it lacks embedded style and if we show that output html in some container, the visual rendering will look different.
I've tried implementing my own solution to help embed the current style (based on getComputedStyle) to each element. But that's not very efficient (many redundant styles can be included) and not always works (such as for embedded video, I'm not so sure why the <video> is not kept with getContent() and all <video>s disappear in the final output html).
The Tinymce team has done a lot of works, but really not sure why they did not even think about this feature? We need the exact HTML that renders what you see in the editor. We can sanitize the HTML after that by ourselves.
Here is a demo helping you imagine better what's so bothersome with this WYSISWYG editor:
https://jsfiddle.net/L83u5v0n/1/
Clicking on the Show HTML button shows this:
So you can clearly see it's just more likely to be WYSIWYS rather than WYSIWYG. Is there a solution to get the exact output HTML based on some hidden feature of Tinymce that I've not known of? If it's based on some custom script using getComputedStyle then really I do not need it (actually my solution is fairly good).
This is a function of demos that are set up to look good in the editor versus real world usage. The intention of the content_css configuration is to provide the CSS that will be used to render the content.
If you apply the content CSS elements to the page then "Show HTML" works perfectly.
https://jsfiddle.net/xzh8utbp/
Alternatively, delete the content_css configuration (but that won't quite work in your example because JSFiddle adds CSS to the result window).
Note that I've added mce-content-body to the view div because it turns out our codepen demo CSS leverages it. Normally that wouldn't be required, but then I don't think normal integrations use our codepen CSS.
Is there a way to change the defalt behaviour of TimyMCE, so that when you insert a link, it renders something like this:
<span onclick="window.open('http://google.com', '_blank', 'location=yes');"></span>
instead of
Ideally, I would like this to be done by the Link button, but it could be done onSubmit.
ADDED:
The reason for doing this (as I know it seems like bad practice) is to be able to port to PhoneGap (using the InAppBrowser plugin), as is not intended for browser use.
Overlooking that this really isn't a good practice, I will assume you have a valid use case for wanting to do such black magic.
But before, a few things to consider:
I would advise you to keep links as links while working in TinyMCE. That way, your users will be able to insert and edit them as usual. Changing them to span elements inside the editor will practically eliminate the ability to edit them without editing the full source. You should probably convert them to span elements outside the editor.
If you're the stubborn type and don't care about #1 or your users, you should note that the default TinyMCE 4 configuration doesn't allow onclick attributes, so you'll need to update extended_valid_elements, otherwise they will be removed during the cleanup process.
There is probably a better way to do what you're trying to do. As #Vic suggested, an event listener would probably be a better option.
Nevertheless, I will humor you. Below is an overview of the process with a working example.
Overview
If you are developing with TinyMCE 3.x, you'll want to tap into the onSaveContent event. If you are using 4.x, use the saveContent event. In both cases, the concept is the same.
This event gets fired whenever the content of the editor is "saved". This happens automatically if TinyMCE is submitted as part of a form, but you can also use tinymce.triggerSave() to force it on all editors at once.
So, simply setup your callback function to replace all links with the evil span alternative. You can use pure JS or TinyMCE's built-in DOM utilities (probably only a good idea if you're already familiar with them), but for clarity (and sanity) it's much easier with jQuery.
Working Example
TinyMCE Fiddle: http://fiddle.tinymce.com/mAdaab/1
This example uses TinyMCE 4
Open your browser's console to see the output
After TinyMCE loads, press the Save button
The resulting HTML will appear in your console
Do with it what you wish, but remember that there probably is a better way.
What you are proposing is a really bad practice (as in not using anchor tags for links) wouldnt it be easier to actually give your link an id or class and attach event listener with javascript and on click prevent default behavour grab the href attribute and use your window.open?
I am using CKEditor asp.net page for allowing client to easily edit/format text. Also i am using tabs option within CKEditor as shown in the fig. attached. But tabs are not working at all. Initially i have created tabs withJS. I thought it’s the JS that not working with CKEditor so i have chosen alternative solution using css3. But tabs are still not working in CKEditor. I have searched on CKEditor forum but unable to get good resource or help.
For css3 I am using checkbox hidden through opacity 0; but checkboxes are not working in CKEditor. What comes finally in my mind is CKEditor doesn’t run html. Is there any solution for this?
CKEditor secures JavaScript code so it's not executed to prevent unexpected editor behavior. Also mouse/keyboard events from form elements are captured for robust editing, making regular manipulation impossible. The conclusion is: editor is for creating rich content, not for rendering layouts.
The simplest advice I have is to put the editor one level down. Namely:
Create tabs.
Make each tab title an inline editor (it must be a block element).
Put an inline instance of CKEditor into each single tab contents.
Serialize your tabs when saving. It's easy.
Bonus: With a little help from ACF (since 4.1) you can prevent the layout from being destroyed by thoughtless users. Basically restrict which plugins are loaded for every editor to manipulate the result of the editing.
I was recently on CodeSchool's website and took the JQueryAir course that features a web-based text editor that shows - in real time - what elements of the DOM are being selected as you write your JQuery code. It does this by highlighting the selected elements of the html page in light gray.
Does anyone know of text editor (or plugin) that can recreate that functionality? I'm mainly looking to use it for practice purposes. Or if you know of a website that would allow me to do they same thing, that would be great too.
Here is a screenshot to give you an idea of what I mean:
As the JQuery in the bottom panel changes, the html above is highlighted.
Any advice appreciated - thanks!
A simple way to do this (although perhaps not quite as dynamic as you would like) is to use FireBug's console (or similar in Chrome, IE9 etc.). After loading a page containing a jQuery reference in FireFox, go to FireBug's Console tab and paste this.
$("p").css("background-color", "gray");
Hit Enter. You can change the selector to see the results, though they will be additive until you refresh the page. Use the up arrow to bring back your most recent selector to edit.
EDIT: OK, this was before you added the screenshot showing the desired HTML source highlighting. Still, perhaps this method will come in handy at some point.
I want to know the basic principle used for WYSIWYG pages on the web. I started coding it and made it using a text area, but very soon I realized that I cannot add or show images or any HTML in the text area. So I made it using DIV, but I did not understand how I could make it editable.
So, in gist, I want to know how(in principle) to make an editable DIV section on a web page, something similar to Google docs or FCKEditor or TinyMCE.
I would be very grateful for any pointers and info.
Thanks!
There's the contentEditable flag that can be added to any element on a page to make it editable, eg.
<div contentEditable>I am editable!!!!</div>
Should work in all major browsers nowadays, and things like shortcuts keys (cmd/ctrl-b, etc) will Just Work.
Form submission can then be done by pulling innerHTML out of the editable region.
What you see is what you mean is the way - don't follow the WYSIWYG path as it is full of traps.
WYMeditor is the best when it comes to outputting semantic and clean HTML.
TinyMCE is open-source, so you could take a look at how it works under the hood. :)
It appears from the installation directions that an HTML form section (to allow submitting the form to the server for storage) is made with a textarea inside which gets replaced with the TineMCE editor.
The source itself is referenced from the tiny_mce.js file that is referenced in the target HTML file, so that might be a good starting point to see how it works.
Good luck!
Edit:
Although I didn't spend a lot of time, looking at the source for TinyMCE seems to indicate that the editor itself is inside of an iframe, so that may explain how the images can be displayed in an "editable" area.
If you're curious, download the development package, and take a look at the tiny_mce/jscripts/tiny_mce/classes/Editor.js. From around line 400, it appears that they're setting up an iframe and adding it to the DOM of the target HTML.
Use TinyMCE and turn off the toolbars.
Seriously, making a WYSIWYG editor for the web is a lot more complicated than it sounds and there are a million ways you can go wrong. You could spend the next two months battling with different browsers and stuff that breaks for no good reason, or you can trust the people who know more about the subject than you or I do.
TinyMCE is impressively configurable, and you can hide all the toolbars just by using the simplest configuration options:
tinyMCE.init({
mode: 'textareas',
theme: 'advanced',
theme_advanced_buttons1 : '',
theme_advanced_buttons2 : '',
theme_advanced_buttons3 : '',
theme_advanced_statusbar_location : "none",
});
You can also use normal CSS to make the
.mceLayout {
background: none !important;
border: none !important;
}
I'm not sure what you want the WYSIWYG area for, but chances are you'll need to get the contents at some point. You can do this with simple Javascript:
var editor = tinyMCE.get('editorid');
var stuff = editor.getContent();
It's free, easy to use, and proven reliable by lots of users. There's no good reason to reinvent the wheel.