I am trying to contenteditable attribute of summernote html editor pluging making false on page loading , but it doesnt affect.
Here My JS Code:
<script>
$(function(){
$('div#son_durum').children('.note-editor')
.children('.note-editing-area')
.children('.note-editable')
.attr('contenteditable',false);
});
</script>
What Can I Do Achive This?
Thanks
Why did you try to set contenteditable as false? Just leave it and don't initiate summernote on div#son_durum when your page is loading.
Or, do you want to toggle enable/disable state of summernote? A similar issue was already reported. See https://github.com/summernote/summernote/issues/1109
Using v0.8.2.
Here's my solution, though it's not perfect, especially if the developers change the html and or class names, but it works for what I need.
My MVC application has many summernote controls being dynamically added to a page, and each has an ID assigned to it. Some controls only display the image (upload) button, while others only display the text style buttons. For my image-only summernote controls I don't want the user to have the ability to type text, so I have to only disable the text-entry/image panel, not the whole control. This way I still allow the buttons to be used.
Here is my solution, and this works! Make sure this fires after the summernote control initialization.
var container = $('#summernote2').nextAll('div.note-editor:first').find('.panel-body');
if ($(container).length)
{
$(container).prop('contenteditable', 'false');
}
What's Happening?
Within my specific summernote control (id = summernote2), I locate the first div immediately below it with the specific class ('note-editor'). All of these are added dynamically to the page when the control is initialized. See the image below:
Then, using FIND, continue to work down the tree looking for the class 'panel-body', which is where the text is actually placed, highlighted in the image above.
Assuming I find it, then I change the contenteditable property to false. BAM!
There is probably more chaining that could be done, and perhaps more efficient methods but this works pretty neatly.
Why this way?
Because I have multiple controls on the page, and nothing directly linking my ID'd summernote DIV to all those other DIVs that are created as part of the initialization, I thought this was a good solution. Otherwise, how could I guarantee getting the correct panel-body class?
Good luck and let me know what you think! If this answers your question sufficiently, remember to check it as answered!
In a perfect world you'd think the developers would have made it easier. This should be all it takes, but no it doesn't work...:
$('#summernote2').summernote('contenteditable','false');
Related
On the website I have form which is generated from ipresso. I'd like to style agreement to hide this content and after click I'd like to show it. But where I can find names of classes, id etc.? I'd like to add button "hide/show" which will hide or show content inside form.]
You can solve the problem using jQuery toggle class just add jquery to your website if not present
$("#button").click(function(){
$("#target_div").toggle();
});
based on your requirement set the initial css for the div to display:none if it is to be hidden initially.
In browser on the page generated by ipresso right-click on an element that you would like to change and select option Inspect-Element/Inspect. In the source code your form should have an id/class which you then would use in jQuery as selectors, in a way that I describe below.
$("#toggle-button").click(function(){
$("your-form").toggle();
});
OR
$("#hide-button").click(function(){
$("your-form").hide();
});
$("#show-button").click(function(){
$("your-form").show();
});
If the elements are always generated with different ids/classes on every refresh (I highly doubt that) another thing to do is to use more descriptive css selectors which rely on the structure of the html tags staying consistent. Again, you will be able to find them using the Inspect/Inspect-element found in most browsers. It is a workaround, but not something I would recommend doing since if the structure changes, you will have to edit in more than one place.
Here is the simple form I'll be working from in this question...
<form method="get">
<input type="text" value="test">
</form>
It works fine here or on jsfiddle. Notice how if you click "Run code snippet" and click in the field then the text remains in the field along with the cursor?
However, on my custom WordPress website, the field's value is behaving like a placeholder value. Hopefully these images will demonstrate what I mean by that.
When I click in the field the existing text disappears...
... and when I click away from the field it reappears...
You can see from the form HTML above that the field has a value assigned and does not have a placeholder. My first thought was there must be some placeholder value being assigned dynamically at runtime via javascript. However, Safari's web inspector shows this...
It appears that it's not a placeholder but some Shadow DOM code being added, and that new code is making it function like a placeholder. To view the Shadow DOM code I enabled Shadow DOM in Chrome's web inspector. This is what I found.
When the field isn't highlighted the Shadow DOM shows this...
When I click in the field to highlight it the Shadow DOM shows this...
It appears that something is creating a shadow root and adding this div to it...
<div id="inner-editor"></div>
Then it's setting the innerHTML of that div to "" or "test" based on the highlight state.
I don't work with the Shadow DOM much and I'm not sure how to determine where this code is coming from. I've searched my entire code base through the web inspector and done several different recursive grep (e.g. grep -r "inner-editor" *) from the root of my project to try to find any code in the css, javascript or php that might be adding this Shadow DOM code at runtime. There are no instances of "createShadowRoot" or "inner-editor" or "parent-focus" or "parent-active" or "text-active" anywhere in my project. I'm not sure if these might be coming from the browser code itself or through some obfuscated code from one of the js libraries I'm using like jQuery, or a dynamic browser rewrite of some library code.
How can I get this text field to behave normally on my site rather than like an empty text field with a placeholder value?
Thank you for taking the time.
After spending hours disabling and enabling wordpress plugins, swapping out jQuery library versions on the site and dealing with the accompanying theme compatibility issues, I finally found the offending line of code in my theme's jquery.main.js file. Here it is...
// clear inputs on focus
function initInputs() {
PlaceholderInput.replaceByOptions({
// filter options
clearInputs: true,
clearTextareas: true,
clearPasswords: true,
skipClass: 'default',
// input options
wrapWithElement: false,
showUntilTyping: false,
getParentByClass: false,
placeholderAttr: 'value'
});
}
replaceByOptions calls several other functions but the fix is available in the Boolean settings above. Changing clearInputs and clearTextareas to false fixed the problem. I hope this helps someone else experiencing the same issue.
1) How to set HTML to already created panel or any other Element?
I am a beginner. I tried the below to set some content inside the HTML
var clickedElement = Ext.getCmp('id').el.child('>');
clickedElement.setHTML("hello");
The above is working fine but the problem is that as the panel has many div's inside it.. the above approach is erasing those inside html (i.e div's) and replacing it with the above content.
I saw through Chrome that the panel has three nested div's. So, if I want to add HTML to it then I need to give something like below:
var clickedElement = Ext.getCmp('id').el.child('>').child('>'); //two times child
When I tried the above approach, I am successfully adding the html content and also the div's doesn't remove. Here the problem is that, I can't see the added content (maybe because of some default stylings, I can see the content is being added in Chrome console though.)
I am just asking whether there is any efficient way of adding HTML to the panel. In my opinion, this should be very easy approach which I am complexing here.
2) How to check whether a Element has a particular child ?
Suppose, for example, If I added a extjs Button as a child(item) into my panel while creating it. (which I can do). How to check whether the panel has the particular element (i.e button here)?
Before asking here, I searched alot and found somewhat relative but not helpful link to my problem.
In ExtJS most components are considered to have only one body element even if you see more on the dom. In contrast to jQuery which is basically added above a markup ExtJS generate the whole markup by itself.
Now to your question, to update the HTML of a component you can simply call the update() method like that
Ext.getCmp('id').update('hello');
See JSFiddle
Ext.ComponentQuery.query('#itemIdOfComponent').update('new value');
Do not set id's on components instead add an itemId configuration and see the documentation for Ext.ComponentQuery.query.
Adding HTML/any tags to either side of selection - Javascript
The problem:
After creating a textarea box in my PHP/html file I wished to add a little more functionality and decided to make an textarea that can use formatting, for example
<textarea>
This is text that was inserted. <b>this text was selected and applied a style
via a button<b>
</textarea>
It doesn't matter what the tags are, (could be bubbles for all that I care due to the fact the PHP script, on receiving the $_POST data will automatically apply the correct tags with the tag as the style ID. Not relevant)
The Question/s
How can I create this feature using javascript?
Are there any links that may help?
And can, if there is information, can you explain it?
EDIT: Other close example but not quite is stackoverflow's editor and note that I do not wish to use 3rd party scripts, this is a learning process for me.
The tags that are inserted in the text are saved to a database and then when the page is requested the PHP replaces the tags with the style ID. If there is a work around not involving 3rd party scripts please suggest
And for the anti-research skeptics on a google search, little was found that made sense and there was Previous Research on SOF:
- https://stackoverflow.com/questions/8752123/how-to-make-an-online-html-editor
- Adding tags to selection
Thanks in Advance
<textarea> elements cannot contain special markup, only values. You can't apply any styling in a textarea.
What you'll need to do is fake everything that a text box would normally do, including drawing a cursor. This is a lot of work, as hackattack said.
You can do a lot if you grab jQuery and start poking around. Toss a <div> tag out there with an ID for ease and start hacking away.
I've never made one personally, but there is a lot to it. HTML5's contentEditable can maybe get you a good chunk of the way there: http://html5demos.com/contenteditable/
If you want to pass this data back to the server, you'll need to grab the innerHTML of the container and slap that into a hidden input upon submission of your form.
Here's other some things you can check out if you're just messing around:
tabindex HTML attribute, to get focus in your box from tabbing
jQuery.focus() http://api.jquery.com/focus/, to determine when someone clicks in your box
cursor: text in CSS for looks http://wap.w3schools.com/cssref/pr_class_cursor.asp
jQuery.keypress() http://api.jquery.com/keypress/, or similar for grabbing keystrokes
Edit: I think I completely misunderstood
If you're not looking for a rich text editor, and just want some helper buttons for code, maybe selectionStart and selectionEnd is what you're after. I don't know what the browser support is, but it's working in Chrome:
http://jsfiddle.net/5yXsd/
you can not do anything beside basic formatting inside a texarea. If you want complex formatting, look into setting a div's contentEditable attribute to true. Or you can make a wysisyg editor, but that is a big project. I strongly suggest using 3rd party code on this one.
I suggest you using the iframe to implement the WYSIWYG effect.
There is a property in iframe called designMode
See here for more
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
Also there is a lightweight example maybe you would like to take a look:
http://code.google.com/p/rte-light/source/browse/trunk/jquery.rte.js
So I tried to reproduce this in JS Bin but I couldnt get the dojo to work. It is the same on chrome and firefox.
I have a checkbox and a dojo ready function which looks like
dojo.ready(function() {
dijit.byId('checkbox1').checked = true;
});
Now when the page is rendered the checked = true is executed successfully however the checkbox does not appear check UNTIL YOU MOUSE OVER IT !
Its like the browser did not repaint the area over the checkbox. Waving your mouse over the checkbox and the browser repaints it so you can see the tick.
Anyone come across this before?
You need to use :
dijit.byId('checkbox1').set('checked', true)
instead of directly setting the attribute. This convention should be followed for all widgets since you never know what other processing may be required when changing attribute values.
For me, the problem was that I was not loading the widget's css properly.
Dojo's Checkboxes are shown using a sprite-sheet rather than a native html checkbox.
I had overridden dojo's css (I was using the claro theme), by hiding the spritesheet image, and showing the regular html checkbox that was backing it.
So, make sure that you are including one of the dojo theme css files (claro.css for me) with you css. and make sure that the <body> tag on your html has the class="claro" or whatever theme you are using.
With the sprite sheet (again, in this case claro) your checkbox should look like not