I'm looking for a js WYSIWYG editor that lets me insert readymade content that should be non-editable via the editor's interface, but via a link on it and some custom user interface. Users should be able to add objects to the content that are too complex to be handled by the editor by default and that are finally rendered when the page is displayed.
Looking around I found some TinyMCE plugins, non-editable content and atomic sections, which both point in the right direction but don't look too promising to me. For that I'd like to know if anybody out there has experiences with implementing some functionality like this or can point me to an editor that is probably more suitable for that than TinyMCE?
I implemented something similar using YUI Rich Text Editor. Considering my requirements, dealing with non-editable elements inside an iFrame was a hassle. What I ended up doing is this: whenever the user inserts a custom item using the toolbar (in my case it was a custom gallery with embeddable videos, etc.), I'd "split" the content of the editor at the cursor and insert a gallery "between" the editors. You end up with 2 actual editors and a gallery:
It required a bit of work to manage and render all of the objects and it had its downsides. But with proper CSS and some JS it could be made to look like and work like it's part of the editor.
I think you should stick with Tinymce. Actually all real time editors for browsers use an iframe in which the text gets put due to styling issues i guess. So using another editor won't solve the iframe problem MK_Dev described.
Related
I'm trying to create a user experience that looks like this:
Basically, there is a <span> of non-editable text followed by a textarea/input and some other non-editable <span>s. A simple textarea/input poses no problem when the length of the gap is short, but when it's long, the layout gets pretty awkward. I've looked into contentEditable, but I'm not sure if it's what I need (I've also read several posts suggesting it's evil).
Do I have any other options?
Perhaps the contentEditable property can help you. Have a look here https://www.w3schools.com/JSREF/prop_html_contenteditable.asp
There is a tipical example
https://www.w3schools.com/JSREF/tryit.asp?filename=try_dom_body_contenteditable
You may switch on an editable mode for a span or inline div, for instance.
It is not possible to have an input as you're suggesting.
If you are having an issue with the layout at different sizes, perhaps look into media queries with CSS, which will allow you to alter the layout at different viewport sizes.
It might be easier for you to use a framework like bootstrap to help you layout your web page, although in my opinion frameworks like bootstrap can start to interfere with a custom design, but this will only be a problem when you are a little more experienced.
I know a bit of jQuery and Javascript along with Django for the backend. I am interested in building an editor somewhat like the editor of Quora. I have read that their editor is made with a DIV whose content-editable property is set to True. However, I am confused as to what material to study in order to understand how it works with text formatting and media upload. Although I like Quora's editor the StackExchange editor is pretty nice too. I think I'm not gonna be able to implement something so advanced but I need to start somewhere.
In short, can anyone point me to an article or tutorial which deals with coders trying to make an editor from scratch or customize from open source?
contentEditable was added by Microsoft in IE5. This feature allow to change innerHTML of any element. good place to start would be MDN and many open-source implementation of wysiwyg widgets available on github.
Short explanation
Start with empty div.
Set contentEditable to true.
Add button that would act as emphasis functionality.
Learn about text selection.
If button clicked and text was selected, wrap that text with span tag with emphasis styling css (or class).
Profit.
I need to build a visual designer image or card designer that lets you add text boxes of text (multiple fonts), or images, drag them around, and resize them.
This seems rather simple but I would yet think common - but so far I haven't found anything I could use as a basis for this.
What I'm looking for is something like Keynote but super basic.
I've looked at:
remark.js: presentation only
reveal.js: Pretty close, but only the presentation engine is open source. The visual editor is a closed source service.
mxgraph / jgraph: designed for directed graphs or flowchart
gojs: designed for directed graphs or flowchart
contentbuilder: its a layout engine for a page with stacked layout modules, I need something that authors a card
Of course also staple javasript editors like ACE, CK and TinyMCE but they solve the font editing / font selection problem, but not the drag & drop boxes & layout issue.
What I'm trying to build is something you might use on tinyprints.com or minted when you design your card, or canva.com.
But my needs are really basic - so I'm thinking that possibly the reason there isn't a library for this is that its pretty easy to build it? Anyway, would love some input.
It's less of a layout editor/designer but Fabric JS has a lot of the features you are looking for (multiple fonts, dragging images around and resizing). It's Canvas-based but can export to JSON if you need to transfer to a non-raster format. Might be adaptable if this is still a need.
I'm looking for a web-based wysiwyg style editor, that is straight-forward to customize. I want to limit the options to just a few choices...
undo/redo, uppercase, lowercase, spellcheck, find, clipboard options, and only a few choices of style that I would like to be able to name and possibly write the code for. It will basically grab the text around the cursor (without having to necessarily select) and format it according to parts of a video script.
What is a good editor to do this with (easy points to customize), and is there any examples of possibly similar customizations being done like this already out there?
Try http://ckeditor.com/demo
It used to be called fckeditor earlier.
I dont know whether I am reiventing the wheel.
I need to design an online WYSIWYG where users can make one/two/three-column layout page.The WYSIWYG should adjactly show the contents in design mode as well as preview mode.Therefore, the WYSIWYG should also have the supports for Header and Footer too.Therefore, the WYSIWYG will have at least three boxes(Header, Content,Footer) and in max it may contain six boxes.
IFRAME supports designmode (on/off) and it has content editable property and it also supported by most browsers. Though DIV also has the content editable properly in the latest browsers. Since there are many users who use IE6 still, probably choosing IFRAME is better(need your kind advice).
Now the question is whether I should use 6 IFrames or only one Ifrmae or no Iframe at all? Please suggest.
Thanks.
It sounds to me like you are trying to reinvent the wheel. You should be able to use one of the existing WYSIWYG editors with template support built-in. So I'd suggest you have a look at CKEditor, which probably has all the features you need.
Choose whatever existing editor that you like, but don't try to recreate one yourself, you'll become crazy.
I don't even know what do you understand as different between WYSIWYG and "Rich Text Editor", the main difference might be that no web-based editor can be really "What You Get", because there are lots of little problems.
Anyway, it seems that you want to create a page with one toolbar and several editing instances, I think that all the main editors does support that, but I would avoid using one based on a framework (YUI or Google closure) unless you are already using that framework.
Check instead the features of stand alone editors like CKEditor or TinyMCE. You'll hardly get anything better that those ones.
Don't reinvent the wheel! If you decide that you need to support designmode iframes as well as contenteditable, Google Closure Editor has a very performant implementation of multiple editing surfaces that only creates one iframe at a time.
I would look at YUI Editor from Yahoo, The YUI stuff does support a drag and drop column editing. I would say reuse in this case.
EDIT: Since you say you want to edit multiple areas per page you should also check out the YUI Editor's Multi edit example page