The best thing is start from the begining.. so :
At project im working on (AngularJS) I'm using CKEditor as wysiwyg editor. Everything was working very good till I wanted to add codesnippet functionallity.
CKE produces pure html code, which I can bind to a model to see in real time what's happening. On my side I've been using ng-bind-html to see the results and it worked well. Every basic-html code was working, bold, italic, headings.. fonts, size etc.
When CodeSnippet plugin (http://ckeditor.com/addon/codesnippet) went in...
It stopped working (I mean the codesnippet part).
Example of not-working HTML(btw CKE produces code with ‚< and > instead of normal tags < and >.. so I have to replace them… but nevermind its not an issue :) ).
Example of snippet (which doesnt work on ng-bind side):
<code class="language- html"><html><body>Test</body></html></code>
The problem is that inside editor everything works good, but outside (when binded to ng-bind-html directive), its not.
What Ive tried so far:
- I included CSS files which CKE editor uses inside.. worthless.
- code snippet plugin uses highlight.js so I tried to transform CKE html code into highlight.js one.. and it worked!
example:
<div compile="true" hljs language="css”>whatever</div>
But the problem is CKE editor produces complex text (including code snippets, other stuff, quotes etc..). So If i put all of this into HLJS directive.. it highlights everything. Its not what I wanted to achieve.
My solution to this problem was adding dynamically directives with HLJS + normal html code. Result example:
(hljs directive its angular directive for hightlight.js) :
<div id="hl" compile="true" hljs language="css">example</div>
<p><strong>Damn</strong></p>
<div id="hl" compile="true" hljs language="cpp">Other snippet</div>
To make it work I had to recompile whole code I’ve added.. So I’ve put it into directive which has watch and recompiles code once its updated.
And.. It worked!! but… and here comes the real problem:
*it only works for HTML-valid code snippets because $compile somehow validates all this stuff inside… whats happening? '<' tag is transformed into '& lt;' … If I open some HTML tag.. its immediatly closes it.. (if I 'forgot' about it) and many other weird and unacceptable stuff.
Do you have any idea?
I've tried to explain the issue as clear as possible but if you have any further questions..
Related
I am trying to get Isotope javascript ) to work on a test page.
I am trying to get their example of Filtering with Isotope working. (Stackoverflow not allowing me to post a link as I'm new to posting on here...!)
I have copied their example HTML, CSS and vanilla JS into a test page here on my domain: http://chrislydon.co.uk/testiso.php
(A php file because I want to test adding items from a MySQL DB once the basic thing is working!)
I think I have everything I need: reference to the Isotope JS in the head, their JS copied to between tags - and their exact HTML (and CSS).
I am following the example which was labelled as "Vanilla JS" (as their other examples relies on JQuery (which I will implement eventually...))
I can't see what I'm doing wrong that means this verbatim copy of their example won't work....
(Tried it on different browsers - their examples work in them, but my copied example doesn't)
I'm OK with PHP/HTML but only done basic stuff in JS so perhaps I'm missing something terribly obvious!
Thanks for any help you can offer!
There were two main problems:
1) in the <head> of the document, your <script> tag is missing a >: <script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js"</script>
Change to:
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js"></script>
2) If the above initializer runs in the <head> of the document, there will be no document available to query and document.querySelector('.grid') will return null.
Instead, put the script just before the </body> tag.
Working jsFiddle:
https://jsfiddle.net/dptve3s6/1
Bonus: You have a function called myFunction attached to a button's onClick event, but that function is not defined anywhere. Define it, and enjoy.
I found a code for a Top Commentators Blogger widget online, and it's perfect for my needs. The problem is, it seems the code lacks a </div> tag. This way, it messes up the code of everything below it on my Blogger (following widgets gets nested inside it, for eg.).
The widget's code is written in encrypted js (?), so I can't change it. So I decided to add the missing </div> tag manually, on the widget content. But Blogger magical autocorrection of HTML thinks it's just some extra wrong code and erases it. I've tried writing it with js and innerHTML too, but Blogger still erases it.
Any suggestions on how to add this </div> without it getting removed?
The widget can be seen live (and working wrongly, nesting the Archive inside it) at the bottom of my page: www.comoeurealmente.com
Doesn't seem like the </div> tag is missing to me. It seems that your css is indenting the archive with .footer and .widget having a padding of 25px. change that padding to 0px and the page displays correctly.
I have an html page with a TinyMCE editor in it.
In the editor I would like to edit HTML code that I get from external source.
Some of the HTML I want to edit are problematic, for example I had one code with an unclosed div. What happens in that case, is that the rest of the HTML (after the TinyMCE editing part) gets messed up - because the rest of the HTML is not parsed properly, and that's understood.
The question is how to solve this issue.
Approach 1 - Is to try and solve it on the server side. That's problematic, because I don't want to actually touch/modify that HTML source, the editing process that I need the Tinymce for is just for language changes by the editor. If I'd implement some HTML fixing mechanism on the server side, I might end up with automatic changes to the HTML I didn't plan to.
Approach 2 - If I had some tag in HTML - that would be great - and tag in which the html code in it does not effect the outside code. Do I have that kind of tag?
Approach 3 - Is to think of putting the HTML code inside an inline IFRAME. The problem here is that my control buttons for SUBMIT are outside of the IFRAME - and the TinyMCE is in the IFRAME, so how would I do the Javascript communication then?
Approach 4- Is to wrap the HTML code given to the tinyMCE with an tag, and then after editing, to strip it out. Would that sound like a decent solution? I couldn't actually succeed in wrapping the html in an iframe inside on the tinymce input.
What do you guys say?
I've been scratching my head for some time over this puzzle. I've been trying to load an external file into an ng-view (no problems here). And in that partial file I have text that get swapped for an input field when you click "Edit title", but this only works when all code is included in the same file.
If you take a look at this Plunker http://plnkr.co/edit/cgUGOKVzWKNWugqrFCbJ you'll see what I mean.
I would appreciate if you could point me in a direction that could solve this issue for me.
Thanks!
The "#" in the hrefs are probably making angular render the html and the controller again.
Change them as below and it should work:
Edit title
Right, i've looked around and can't seem to find an answer to this problem.
I'm running Expression Engine Core (the latest version), and I am building a template. I have built the template using Bootstrap and some other bits of code. I'm having a problem with using prettyPhoto within my template. I have a button which is calling a prettyPhoto modal window. My static HTML site works fine with this but there seems to be some sort of conflict somewhere. All my js files and css files link fine, but for some reason or another the js doesn't work for my prettyPhoto. The code i'm using is:
Need Help? <i class="icon-help-circle"></i><div id="maphelp" class="hide">text goes in here</div>
But I can't for the life of me work out why this isn't working. I've tried making the class= into a rel= but that still doesn't do anything. I've used the code from the http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ with the section on inline content.
I have also done the fix within the help pages to make sure that its is active. Still nothing happens...
Can anyone help me?
Have you tried moving your prettyPhoto.js to the bottom of your code perhaps inside the footer or better yet, below the footer.
I usually create an embeds template where I place all of my js, xml, css files and call out the embeds like so
<script src="{path="embeds/jsfile"}"></script>
this way it allows me to move the files all over the place in my visual template.
another is to use the no conflict
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
I hope this helps.