CKeditor doesn't work properly - javascript

I have a problem. I added CKeditor to my website.
Now i have a problem. If i add lines:
<script>
CKEDITOR.replace( 'tresc' );
</script>
In head section on my main page everything works, but if i go to contact or panel page unfortunetly editor doesn't work(name of the textarea is the same). If i add this lines at the end of body section in contant or panel works, but in the main page only one textarea working with editor, rest doesn't. Writing website on includes(my index is not changing and everything in content div is including from other files). Can some1 help me?

Please see: https://docs.ckeditor.com/#!/guide/dev_installation-section-adding-ckeditor-to-your-page
The replace method has to be used below textarea tag.
Your textarea tags need to have unique id and/or name attributes. So that each CKEditor instance knows to which textarea it is assigned. Unique element id's are also a requirement in HTML.
If your textarea tags can't have different names (they can't have same id's), please drop the names and assign fake class to each e.g. 'myeditor' and use replaceAll method: CKEDITOR.replaceAll('myeditor');.

I solve my problem.
I've added class and use another <script></script>. Now everything is working. Thanks j.swiderski for helping me. Best regards.

Related

Tags are overlapping (going inside another tags) in Tinymce

We are using Tinymce 5.6.2 in our project and facing really weird issue. We have two custom buttons and when you click on them they add some HTML (for example span tags). So to reproduce the issue, first click on Button1 this will insert below HTML into editor window:
<p><span class="container1"><span class="icon1">1</span>[[Test One]]</span></p>
Now press Home button from keyboard or use arrow keys and go to left most of the editor window i.e. just before newly added content. See highlighted cursor position in below image:
Now click on Button2 and that will insert another HTML. Technically it should insert new HTML before Button1 content because we have shifted our cursor to beginning of editor window and before Button1 content but when you see code of editor window, you find second set of HTML elements got inserted into Button1's HTML. See below image:
I've created a fiddle to reproduce this issue: https://fiddle.tiny.cloud/f5haab/3
Anyone has any idea why it's happening and how to resolve this issue?
I got to know that this behavior is expected because many people uses spans for different types of formats such as colors, case, font-sizes etc. and want to be able to write in that same format the beginning and end of a word.
However if you don't want above behavior the you can use the noneditable plugin to protect your tag. See below fiddle for working example:
https://fiddle.tiny.cloud/55haab/1
When I used this noneditable plugin I ran into another issue. Basically to use noneditable plugin we add "noneditable" in plugin in tinymce.init and use "mceNonEditable" class in elements. In my case when I try to apply this mentioned class I am getting JS error,
tinymce.min.js:9 Uncaught TypeError: Cannot read property 'class' of undefined
So, to solve this issue I apply this class using "extended_valid_elements" in tinymce.init:
extended_valid_elements: 'accessfilter[class=mceNonEditable]'
We have two directions to try:
An approach that does not require the use of noneditable specifically:
On the span:
contenteditable=false
https://fiddle.tiny.cloud/f5haab/5
Another option, using inline boundaries selector:
https://fiddle.tiny.cloud/f5haab/4 , e.g:
inline_boundaries_selector: 'span.container1',
More information:
https://www.tiny.cloud/docs/configure/content-appearance/#inline_boundaries_selector

Js styling, targeting an element by defining it's attribute?

I have spent some time creating this little Js snippet to create a char count. This is nested inside a textarea. (JsFiddle). My issue is that I have no access to CSS, HTML, or Js/Jq root files stored on the server. I am however allowed to insert my own Js through a seperate page that will excecute on the target page. So I figured what the hey, I'll give it a go.
First I generated the character limit in Js tested and all worked fine, but then I tried to target the textarea with Js to style it. As well as dynamically create a div for the char count to be displayed and style that. BAM no result. After digging around in the debugger I noticed that there are two elements that might be causing the problem but I'm not sure.
<label for="desinp">
Description
</label>
<textarea style="width: 417px; height: 237px;" class="required" id="desinp" name="desinp" maxlength="2500">
</textarea>
I noticed the for="desinp and the id="desinp" were identical. Would this cause conflict in the Js, if I don't define the attribute and target the attribute I want to target?
I would test it myself by pulling the label out, but I don't have access to the root HTML.
Any help here would be greatly appreciated. Many Thanks in advance...

Loading content from textarea when in view

I'm building a blog-like portfolio. I want the content of the posts to be loaded only when they are viewed. To do that I tried to store the HTML code in a textarea in the meantime and place it in a div when the post is viewed. This works fine but for some reason the content is not recognized as HTML when placed in the div.
Can anyone tell me why?
You can find the testpage here: http://www.raapwerk.nl/login/portfolio
Thanks!
A textarea contains text, no HTML, so when you copy the contents it will be plain text you're copying. Is there any specific reason you use a textarea?
Otherwise you can just change it to a div and it will work, see this update to your fiddle
EDIT
Easier method, which doesn't load the content before it is displayed: just get the value of the textarea instead of the innerHtml, see this fiddle

How to use same div tag with different content in HTML?

I want to use same div tag for different page displaying using html. how to use it
Ex:<div id ="name"> if{page1}else{page2}</div> is there any possible using if in html or give different solution plz.
when user clicks different tab the different page need to appear i used different div but click different tab it shows some empty space with the page2 i think that is page1 space.
Given that a page might have ids #page1 and #page2 and the <div> has an id of #brian
you could use jquery:
$('#page1 #brian').html(some_html_here);
$('#page2 #brian').html(some_html_here);
This example may aid you - http://jsfiddle.net/wQCDR/
Alex
If you don't want to use PHP in your HTML code you can use SSI (server-side include). Basically, you can include html files within other html files. Here's a link to read more:
http://httpd.apache.org/docs/1.3/howto/ssi.html
Cheers
you can don this usign javascript
get url first and according to that write content to particular div using
document.getElementById('one').innerHTML = "Content";

Require help with css, Autosuggest jquery by Drew Wilson

Because of stackoverflows spam prevention, links + image are in pastebin. HERE
On with question-
I want it so when I click an autosuggest it works as a link but that isn't the main question here.
If you go on my website (pastebin) you can see there are boxes around the text box.
[Please look at the image, also in pastebin] (Drew's form ontop, mine below)
It must be css, but I can not find which property has to be changed.
(the form is generated on-the-fly so I can't look at the html.
thanks
Pal, thats because you have called the plugin twice at $(document).ready.
Remove the following from your $(document).ready.
$(function () {
$("input[type=text]").autoSuggest(data);
});
JSFiddle here: http://jsfiddle.net/naveen/H7ptB/
Try commenting out all the border properties and box shadow properties in the Auto Suggest CSS file.

Categories