Something like that document.getElementById('example')['data-froala.editor'].html.get().
Can I do that or can other suggestions
Related
I need to save some content of an editor in some kind of backend, which currently is unspecified. At the moment I´m struggling the structure of the created document. In the editor the user should be able to write text and place videos or images without an fixed structure of how the images and text should be placed. The user should place these 3 components in any order he wants underneath each other.
In practice the editor looks something like this:
Q: How is it possible to save the structure, to load the exact same editor the next time or to create read-only<div> containers and editable rich text editors again with the content?
My first idea was to split the editor in smaller sub-editors as soon as the type of content changes. So for example you are starting with only one editor with text. Then the user adds another editor (for example with an button click) and adds an image. But I´m not sure if the user accepts this and nevertheless puts all content (text and images) in the first editor.
My second idea was to save the whole html created inside the editors code-view and to load it back inside the editor the next time the side is ordered. But I´m not sure if it´s possible this way to create "normal" read-only <div> containers with the same content.
In my opinion both of my ideas aren´t that good, so i´m asking you guys what you are suggesting to do.
Best way will be by saving the html source inside the WYSIWYG Editor. At load time start with empty editor and inject the saved html source inside it. This will provide the best fidelity of the saved content.
WYSIWYG editors mostly work with an DIV or IFrame tag, which takes input and transformed it to required html code. This code is inserted at appropriate location within the WYSIWYG tag. Locating and saving the content of this tag should work for you with any kind of formatting and media combination inside the editor.
Another aspect to look into will be saving of media files, in case they are not already being available as permanent URL. The image in the URL might be uploaded at temporary location at the time of editing. To save the content you might also need to save all those local media files (and later restore at loading time).
A Working concept with any Angular2+ compatible Rich Text Editor
My best pick would be Angular Froala since it provides a variety of integration using different tools such as Angular CLI, Webpack, Angular Seed etc.
If you're using Angular CLI, you can simply include it in your project through npm and declare it as your module's dependency.
npm install angular-froala-wysiwyg --save
app.module.ts
// Import Angular plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...
#NgModule({
...
imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
...
})
And in your .angular-cli.json, you can declare the related CSS and JS like below:
"styles": [
"styles.css",
"../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
"../node_modules/froala-editor/css/froala_style.min.css",
"../node_modules/font-awesome/css/font-awesome.css"
]
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/froala-editor/js/froala_editor.pkgd.min.js"
]
After you've done this setup, you can simply see the editor in your HTML by using froalaEditor component on any textarea element.
<textarea [froalaEditor] [(froalaModel)]="editorContent">Hello, Froala!</textarea>
It will create a two-way binding for the editorContent object. So whatever you write in the Froala editor will actually be saved in editorContent variable of your current component.
Now you can simply save the contents of editorContent to your API, and don't need to bother about transforming the HTML or so.
To know more about the features, refer to the usage documentation.
Check out some editors like CKEditor, UMEditor - Japanese/Chinese?, Kendo UI Editor, TinyMCE
I'm adding an *.php editor to a CMS similar to as is done in Drupal's node editor. Currently, I have a selectbox with the values WYSIWYG and PHP Code. If WYSIWYG is selected then code inside the text area will be parsed with something like Tinymce (I've read other answers and found markitup.jaysalvat.com but that seemed WYSIWYG less). Whatever the javascript editor, I'd like (or will be building) a bootstrap front end to allow col, rows, btn, etc.
If PHP Code is selected then the raw PHP code will be shown and editable. I played around with this a little the other day using htmlspecialchars_encode and htmlspecialchars_decode with $_POST and everything seems fine when using PHP Code editor.
However, when I used Tinymce it wrapped all my PHP in paragraph tags, etc. Is anyone aware of a addon or alternative WYSIWYG javascript script that can parse HTML code without messing up PHP code, preferably, but NOT necessarily with builtin Bootstap3 components?
If there is something open source already out there already, it could save me from developing the whole thing from scratch.
Thank you in advance.
Try adding this to your TinyMCE configuration:
protect: [
/<\?php.*?\?>/g // Protect php code
],
I'm using tiny mce in my project which was built using Kohana 3.0.7. If I try to add content to the editor and submit the form, the content is saved properly. But, if there is a validation error and the same page with the validation errors is displayed, there is some issue. After correcting the validation error and adding more content to the mce editor, when I try to post, only the content which was posted at the first attempt is posted. The content which I add after is lost.
I have confirmed this with a plain text-area and sure the editor is causing this. How can I fix this ?
Looks like your textarea content does not get updated after an error.
You may do this manually by calling tinymce.triggerSave(); in your javascript console (firebug or similar tool). triggerSave() orders all tinymce instances to write their content back to the html elment they had been created for.
Update: A javascript console is available using firebug or some other developertools (browser addons). What you need to have it functional all of the time is to use the setup init parameter and a handler: XXXX stands for the handler you will need (an event fired when you post)
setup: function(ed){
ed.onXXXX.add(function(ed, evt){
//console.log('paste');
tinymce.triggerSave();
});
},
I want to print a PDF when a button is clicked through javascript. i don't want to use iframes.
Can any one help me?
If your user doesn't have a PDF printer driver, you'd have to use something like this:
http://badassjs.com/post/708922912/pdf-js-create-pdfs-in-javascript
or perhaps a PDF webservice like one of these:
http://blog.nitropdf.com/index.php/2008/01/23/free-online-web-services-to-create-view-share-and-edit-pdf-files/
I am creating a project in Django, and I am using the Django Admin pages along with TinyMCE. But I would like to be able to toggle TinyMCE on and off like in this example:
http://tinymce.moxiecode.com/examples/example_01.php
but since the admin page is generated automatically I imagine I need to overide the base_site.html template which I can do. But my question is "Is there any way I can have something like -- if is textarea ..... -- in javascript?"
Thanks
You can use
document.getElementsByTagName("textarea")
to return an array of all the <textarea/> elements. Then iterate over it and do with it as you will.