We Keep Coding

How to save structure of site/document created with a rich text editor to create read-only views and editable rich text editors again?

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

CKEditor Plugin Causes Editor to be Hidden

I'm attempting to use CKeditor on a website, and I need to be able to click to go to links within the editor itself. As this is not possible with the stock editor, I attempted to install the plugin at the following link: https://github.com/mlewand/ckeditor-plugin-openlink
Having downloaded the plugin and tried to install it, when I activate the plugin in config.js the editor on the site page now has the attribute style="visibility:hidden", and when I manually change this to visible via the browser debugger, it shows a default texture rather than the CKeditor editor. It's possible my method of installation of the plugin is to blame, as I'm finding no other instances of people having this issue. The download of the plugin contains a folder "icons" and a folder "lang", as well as plugin.js (the plugin file itself) and a readme.
To install, I simply pasted the relevant contents of the lang files into their respective counterparts in the main CKeditor fileset, and for the time being I ignored the icons folder, as it simply contains the image file for the tool icon; I also commented out the code which calls for this image so as not to have conflict. I then moved plugin.js into the plugins folder within the CKeditor fileset, within its own subfolder plugin as with the stock plugins already present. I then added the lines in the config called for by the readme. I finally added to the config
config.extraPlugins = 'plugin'; to enable the plugin. Once I updated all files on the server, it became clear that activating the plugin caused the editor to disappear as I mentioned. If anyone knows why this might be or what I may have done to interfere with the files incorrectly, I'd greatly appreciate it. Currently I'm unsure as to what I could have done better during installation. I can elaborate further if I've been at all unclear. Thank you.
I'll add that here(plugin activation in ckeditor) appears to be a similar issue, although the answer given and the specific issue don't quite seem to apply. If they do, feel free to mark this as a duplicate and I apologize for the redundancy.
EDIT: It appears that the reference added in config.js and the plugin folder name needed to correspond to the name in plugin.js, as I've now discovered.

Important to note that plugin name in plugin.js, name of plugin folder, and reference in config.js must all correspond.

Adding HTML, JQuery and CSS to drupal7

I am a very new user of Drupal and want to add this menu to my website. It has the HTML code with a CSS file, two .js files and a few images.
I want to embed this code in a block into my Responsinve blog themed Drupal7 site
I don't even know where to start or end.I tried drupal_add_js but I think I missed something somewhere and reading the forums has got me all the more confused.
In short I need to understand every small point of how and where to make changes to my site folders.
Any help would be highly appreciated.

You dont need to add your js & css in the template file.
When you go into sites/all/themes/your_theme_name
Look for a file that ends with .info
Best practice is to add all of your custom .js & css files there.
All HTML changes will be done in the .tpl template files.
Hope this helps.

The easiest way to do add js is:
Locate your theme folder, usually /themes/your_theme_name or /sites/all/themes/your_theme_name
Look for template.php in it
Look for your_theme_preprocess_html() function - 'your_theme' might be, 'bartik' or 'garland' or your theme name, if not - change it (usually, it's the name of the folder)
add `drupal_add_js('path_to_js') to function
That's it, clear your cache in Admin > Config > Perfomance and check your code
oh, and to add menu block,
Structure > Menu and create new menu or use existant, add menu items
go to Structure > Blocks, find your menu in list and select region for it
p.s.
and, yep, it's not the only way to add js, here you can find at least 7 ways to do it

javascript in Joomla custom module

I have a code generated by "highslide" software and what it does is to create an image gallery.
This code consists of .css html and javascript.
If I place the htmal code in the Joomla's "index.php" file and then the rest of the file in the root directory then the image gallery is working and is placed in every page in Joomla.
I do not want this. Is there a way of assigning that image gallery to only pages I choose?
Or is there a way to find out what is the index.php main file for that specific page I need to have the gallery and paste the code in there?
I have tried to insert the code in a custom module via the Joomla's editor but when I click on save then it compiles the code and remove certain parts of it and cannot work.
It removes the link to javascript and to css file.
Is there a way without any other third party extension to have that code into the custom module without then Joomla eliminate the half of the code?
Thank you,
Best Regards,
Andreas Achilleos

I would not add things like this to your index.php file. This is Joomla, not a static html website ;)
You have 3 options:
Option 1 would be to develop your own module and install it on your Joomla site. This option would take the longest amount of time and would require you to get your handy in a bit of coding.
Option 2 would be to firstly download, install and enable a plugin called Sourcerer. Once done, in the Joomla backend, create a new "Custom Module" and manually add your html code. After, below the big textbox, you will see a button below saying "Insert code". O modal will popup allowing you to add your custom code. Simply add your CSS and JS using the <style> and <script> tags.
Option 3 would be to use a pre-built Image Gallery extensions from the Joomla Extensions Directory. There are loads to choose from.
Hope this helps

TODOs in javascript files not showing up in Task list

For some reason the TODO Tags i added to my .js files are not showing up inside the Tasks View. I've already made sure, that the "TODO" tag itsself is set under Task Tags for javascript but thei're still not showing up in the list. I've made a filter for the view to show all Tasks in the working set i'm using but nothing is there.

nitind's answer is perfect. I would like to make it comprehensive.
Right click the project & select properties. In 'Builders' , select 'JavaScript Validator'.
Similarly, to parse tasks in HTML, CSS & XML files, goto Preferences->General->Editors->Structured Text Editors->Task Tags and click 'Enable searching for Task Tags'
NOTE: The answer is validated only in eclipse indigo (3.7.1)

You must have your files in JavaScript Source Folders within a project and be running the JavaScript Validator Builder (or having it installed and automatic builds enabled).