I am creating a simple ‘site news’ feature on an MVC 2 .net 4 web site. The site news articles are kept in a simple sql data base, actually I’m doing it with Entity Framework Code First and compact sql, consisting of colums articleID, articleDate articleSummary and articleDetail (model.ItemEntry in code below). The articleDetail is a textarea that I would like to edit with TinyMce or some other WYSIWYG editors if you have alternate editors to suggest or recommend please do so and why.
I’m looking for a way to have the text in the articleDetail enterd by TinyMce by way of the textarea, which may contain html as well as text, htmlencoded as it’s recorded into rows of the table. Seems to me that would be a likely configuration option, I haven’t found it. And that by htmlencoding the textarea would bypass all the difficulties I’ve encountered while attempting to save the TinyMce/textarea data to sql.
Although I will use this live it’s mainly a learning experience. And I’m a bit stubborn on wanting to learn how to do this. Otherwise I would just use the textarea and skip the WYSIWYG for this simple application.
While attempting to compose simple text using TinyyMce I’ve run into the problem of .net 4 and requestvalidation. It appears that I would have to relax my security by placing <httpRuntime requestValidationMode="2.0" /> in the web config and add [ValidateInput(false)] to my controllers create post action. I don’t want to relax the security that .net 4 is providing, kinda stuck now as to how to strip the html from the TinyMce/textarea.
At this point it occurred to me that what I really wanted to do was htmlencode the text as it could be valuable to have some html formatting in the articleDetail. Blog posts and other applications save information in sql that will somehow eventually be html, how do they do it?
In Summary (some of) my questions are
Are there any WYSIWYG editors that htmlencode their content? That way I could have htmlencoded html news articles stored in sql. I’ll then be attempting to htmldecode that for display when news articles are displayed.
alternately
How might I just simplify strip the html from the TinyMce/textarea before I save to sql?
Is relaxing to requestValidationMode="2.0" my only solution?
Research resources I’ve found helpful in this learning experience.
Ack! couldn't post 'em as this is my first post. Gee I thought I read the FAQ and was being a good Nerditquette kinda guy. Incidently I composed this in Live writer and it's posted here on my blog including the links I had researched and found helpful.
Some relevant pieces of source code.
Create.aspx
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
<div class="editor-label">
<%: Html.LabelFor(model => model.ItemEntry) %>
</div>
<div class="editor-field">
<%: Html.TextAreaFor(model => model.ItemEntry) %>
<%: Html.ValidationMessageFor(model => model.ItemEntry) %>
</div>
NewsController.cs
// POST: /News/Create
[HttpPost]
// [ValidateInput(false)]
public ActionResult Create(Item item)
{
if (ModelState.IsValid)
{
siteNews.Items.Add(item);
siteNews.SaveChanges();
return RedirectToAction("Index");
}
return View(item);
}
Why would you want to htmlEncode your content just to save it in the database? It's a useless step.
Why do you want to strip the html if you're using a rich text editor? If just want text, stay with a textarea. You can configure tinyMCE to use bbtags but I would only use that for users who can't be trusted.
Setting your requestValidationMode to 2.0 is how you can allow your code to save html. There is nothing wrong with that.
Related
My editors want to have an ability to edit raw html within editor.
For example, we can have simple list markup:
<ul>
<li>Some text<li>
</ul>
Or with custom classes and event tags:
<ul>
<li class="my_class">Some text
<span class="special">Some additional info</span>
<li>
</ul>
And so on.
I know that built-in Draftail doesnt support html editing.
But using third-party editor comes with problem:
Losing integration with system. For example, i cant just put image like with draftail. Or, preview mode cant handle all functionality of third-party editor.
So, maybe someone has working solution for this situation.
I thought about using special StreamField panels, but it seems to be overhead of blocks. Dont like this idea of having lots of blocks with little differences
Wagtail does not support raw HTML editing within the page editor out of the box intentionally. The philosophy (zen) of Wagtail is to help editors and developers 'wear the right hat' when working in Wagtail.
HTML editing is usually best provided to developers, where there is an expected knowledge of what is required for things like accessibility, security and the benefit of tooling (like git).
However, if HTML editing is a must, you will probably need to build your own editor field for that purpose or find a suitable package that works with HTML markup such as django-markupfield. Adding image/snippet/page chooser functionality however will have to be built for whatever you end up using. You may also want to look at the Wagtail markdown package either as an alternative to HTML or a starting point, it allows for a syntax of linking to pages/images.
Wagtail lets you use any kind of Django field or widget with the FieldPanel.
Please ensure you consider all the risks when implementing this feature, such as accessible HTML (e.g. heading levels), security (disallow some tags such as script tags), malformed HTML leaking into the rendered template and of course the end user experience.
At the end i made my own solution
Simple rewrite some methods in wagtail`s Html DbWhiteLister and HtmlConverter.
This gives me an opportunity to allow any tags with any attributes.
https://github.com/Chenger1/wagtailtinymce.-Full-Rich-Text-Editor
None of the bind examples in the documentation work - https://fancyapps.com/docs/ui/fancybox/api
The standard constructor examples work great, but anything that requires binding does not work. There is no error, but the gallery lightbox doesn't work - clicking an image just opens the image as a link. Here is the exact example code with markup:
<div id="gallery">
<a href="https://lipsum.app/id/1/800x600">
<img src="https://lipsum.app/id/1/300x225" />
</a>
<a href="https://lipsum.app/id/2/800x600">
<img src="https://lipsum.app/id/2/300x225" />
</a>
</div>
<script>
Fancybox.bind("#gallery a", {
on : {
ready : (fancybox) => {
console.log(`fancybox #${fancybox.id} is ready!`);
}
}
});
</script>
That console log never fires.
I'm importing FancyBox like this:
import { Fancybox } from '#fancyapps/ui';
I've tried searching around, but very little info on FancyBox 4 other than official docs and it's frustrating as they don't work. I've tried some of the examples in showcase also, and the same deal. If it's binding, it won't work and no errors are shown. Anyone have any insight into this?
Thanks,
Tom
It works perfectly fine. Since you did not provide a live demo (or at least a full HTML code), then it just not possible to help you.
It is so frustrating to read comments like this, no demo, no useful info, nothing. Maybe you did not include JS file, I do not know ... I would love to help you and to improve documentation, but, sorry, your comment is not helpful at all.
Fancybox is designed to be as easy to use as possible, all you have to do is:
Include two files - CSS and JS file (to get Fancybox object).
Add data-fancybox attribute to your links (or to call Fancybox.bind("YOUR_SELECTOR");)
Thats it! It can not be any simpler.
Sorry, it should have been a much clearer question. I didn't include a demo because it's a big wordpress site in production. It was giving me no useful feedback or errors or anything like that. I build websites day in and day out, so assumed it wasn't just me making some incredibly stupid mistake like a typo or something. I genuinely spent a lot of time on this, it wasn't me being lazy and just posting on stack overflow straight away...
It was me being stupid though.
In the process of making a demo to show you, I found the problem and (as you already know!) it's my mistake. I was able to make fancybox work by instantiating it straight away in my js, but binding (and therefore galleries etc) was not working.
The reason was the javascript was included in the head of the html document before the markup instead of at the bottom of the html document before the closing body. There was nothing for the js to bind to when it was executed.
I wouldn't normally include javascript in the head either but it's a wordpress project and because of some plugin, it's required there. Fancybox 3 worked with js in the head, but I suspect it might be jquery being more forgiving than native js with it's binding to DOM elements?
So, yes, entirely my fault. I was following the steps of the installation and startup guide almost exactly, but that inclusion of the js file in a slightly unusual (or bad practice at least) place was what caused all the issues.
We have a web application that its UI is based on GWT.
We are pretty satisfied from the technology, but we have one major problem: We get html files from our designer, and it takes a lot of time to integrate them into our GWT code.
Is there a quick way or rules to do that?
For instance, I would like to take the html, put it almost "as is" in a ui.xml file, and then start binding the components to UiBinder fields.
What is the quickest way to do that? What should I do with the CSS and JS files that I get?
I need some guidelines to make this conversion, so it will be quick & easy.
We have the same problem. It might be hard for a designer to get used to GWT widgets. But he'll have to forget about making HTML proof-of-concepts and using GWT directly.
We didn't overcame the difficulty. As a result, many GWT features are under-used (like CSSResources, or GWT-Bootstrap layout capabilities).
I would advise to have him learn the xml of GWT widget libraries.
You can also start by using GWT Designer. This way he can still do the design, learn the XML bit by bit, and you can still work on wiring the components.
Of course it is a slow process. People don't change old habits instantly.
Errai seems to fit your requirements.
Basically is uses regular HTML5 templates, binded to GWT logic.
"Create standard conform HTML5 templates or use existing HTML and CSS files to design your web and mobile applications."
http://errai.github.io/
Here is an example of a sign-in page:
<!DOCTYPE html>
<link rel=stylesheet href="css/TodoList.css">
<div data-field="main">
<h1>Get it done with Errai.</h1>
<div class=form>
<p class=error data-field=loginError>
Login failed. Please check that your email address and password were entered correctly.
</p>
<input type=text data-field=username placeholder="Email">
<input type=password data-field=password placeholder="Password">
<button data-field=loginButton>Sign In</button>
<p>New here? Sign up in seconds!</p>
</div>
</div>
source
(p.s. I've never used it, yet)
I have a site that uses the Hebrew language.
All the pages looks great, expect from the text that is generated in site.master.
This text comes a gibberish.
This is from master page:
<ul id="menu">
<li>
<%: Html.ActionLink("לקוחות", "List", "Customers")%></li>
same code from any other page shows hebrew chars.
The result is either gibberish, or encoded gibberish:
<div id="title">
<h1>
îòøëú ðéäåì ùéáåõ èëðàéí</h1>
</div>
<div id="menucontainer">
<ul id="menu">
<li>
ì÷åçåú</li>
tried to switch encoding in the browser but nothing gets me back to Hebrew.
This happens ONLY on production server, on my Dev machine (win7) it works fine.
The views inside the master pages shows OK also on production.
Any ideas ?
My advice would be: ditch the IIS 6 and use IIS Express, which you can install on most old OS's. It does introduce another technology into the question but this technology is newer, easy to use, maintain and script and more suitable for this new range of web development technologies like MVC, etc.
So, if you have an option to select what you use and can make decisions about it, definitely go for it.
Alternatively, you can play around with server regional settings and stuff like that but you might end up losing lots of hours to this.
I have been looking into why WYSIWYG editors are bad for content creation. The most common reason given is that they output incorrect html. But what if I use editors with reduced functionality?
My requirements are only the ability to italicize, make text bold, create ordered/unordered lists and (maybe at a later date) add inline images.
My users will hopefully be 'persistent' users (small numbers of laypersons using the app frequently)
In this context how do I choose between Markdown (WMD editor) & a stripped down WYSIWYG editor. How would page performance be affected with each? I consider fidelity & reproduciblity of data to be important.
You choose by considering your audience. Wiki markup and markdown is for geeks. Your customers sound like they're probably not geeks so I would suggest CKEditor or Twiki-style editor (good, simple Wysiwyg UI) for non-geek users.
Basic concern: Why force lay-people to learn a markup language when solid alternatives exist?
See the Custom Toolbar editor in this CKEditor demo. Or check out TinyMCE.
OK, I tested both.
Even for my basic formatting requirements, CKEditor generated quite ghastly html
Now this is the input
This actually appears to be better
I hope users understand what we are doing
Lets see
But in the meantime
CKEditor Output
<p> This actually appears to be better</p>
<p> I hope users understand what we are doing</p>
<p> Lets see</p>
<p> </p>
<p> But in the meantime</p>
And Markdown Output
<p>This actually appears to be better <br>
I hope users understand what we are doing <br>
Lets see</p>
<p>But in the meantime</p>
Now if this is the difference between these two for the most basic formatting (linebreaks and paragraphs), what will it be like in a 200 word submission. I think most users will need to know only this
For line breaks, two SPACES and hit ENTER.
For new paragraphs, hit ENTER twice
The rest of the stuff could be learnt incrementally
Is it that hard to engineer a 'basic' WYSIWYG editor?
EDIT
After adding these to config.js above problem is solved
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;