I am creating my own wysiwyg editor and I encountered an issue.
As for the editor itself, it is pretty standard, I am using contenteditable iframe with some execcommand buttons for bold text and so on.
Now for my issue, I am not sure how to keep the html structure neat and clean.
For example, user clicks a button to make text he selected floated to the right which takes the selected text and wraps it in
<div style="float: right">selected text</div>
. But if the users selects the text multiple times floating it back and forth something like this be the result.
<div style="float: right">
<div style="float: left>
<div style="float: right">
selected text
</div>
</div>
</div>
, that is of course pretty messy and ugly.
Is there some clean way how to handle this?
(And I don't want to use some third party editors like MCE)
Thanks
Related
I have this bit of code:
<div class="kt-portlet__head">
<div class="kt-portlet__head">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="la la-user"></i>
</span>
<h3 class="kt-portlet__head-title">
Edit User
</h3>
</div>
</div>
</div>
The content changes across the project, ie, everything within the div with the class kt-portlet__head-label
I need to remove the duplicate wrapper div (i.e, you will see there are two div tags with class kt-portlet__head).
To my knowledge:
I cannot do a search and replace because searching for just the two open wrapper tags and replacing with one will leave two div close tags instead of one.
I cannot do a search and replace on the whole thing because the content changes as stipulated above
I can use 'code wrap/unwrap' on an open document - but this is manual and i might as well just delete the two lines individually.
Isn't there a way to do a kind of 'code unwrap' + search and replace to get this achieved?
I am using bootstrap (Twitter-Bootstrap 3) in a quiz style application and I use bootstrap buttons for the answers of the quiz. My problem is that sometimes the answers are quite long, and instead of wrapping the text to the width of the col that the buttons are placed in, the text just keeps going in one line and goes over the col and the width. Is there an easy way to fix this (Note that I canot define set widths as the length of the answers change)? Showing the code is a bit difficult, as it uses javascript to populate the answer buttons, but I will show a screen shot and the resulted populated HTML (after the javascript has populated the question and answers):
Here is the resulting HTML:
<div class="row">
<div style="float: none; margin: 0 auto;" class="col-sm-7">
<div class="panel panel-default">
<div class="panel-heading">Quiz 4 - This is the quiz 4 description</div>
<div class="panel-body" id="question" style="display: block;"><font color="#AAAAAA"><strong>Code: </strong>80559</font><br><br><font color="#888888"><strong>Instruction: </strong>Based on the provided correct answer, select the answer choice that correctly gives the required evidence from the text. Once the timer runs down you will be forced to move onto the next question.</font><br><br><div class="alert alert-info"><strong>Question: </strong>express a negative sentiment in humorous terms</div></div>
<div class="panel-footer clearfix">
<div class="row">
<div class="col-sm-1" id="submit"></div>
<div class="col-sm-11" id="answers" style="display: block;"><button onclick="submitAnswer(22)" class="btn btn-default btn-sm">negative sentiment: You couldn't pay me to watch that....that's how I feel / humorous terms: beach reading without the beach, airport reading without the airport...</button><br><br><button onclick="submitAnswer(23)" class="btn btn-default btn-sm">negative sentiment: they are just the wrong amount of time / humorous terms: they don't have the compressed energy of a short story</button><br><br></div>
</div>
</div>
</div>
</div>
I would think that bootstrap should be wrapping the button text within the div automatically, but it doesn't. I have been looking for solutions but I haven't been able to find anything that covers this problem particularly. Any help would be appreciated. I don't want to use <a href='#" ...> because it is important that the page not reload or be redirected when the button is pressed. Only the onclick function submitAnwers() should be called with no redirect.
The btn class in Bootstrap 3 contains 'white-space:no-wrap;', so the buttons will not wrap on mutliple lines. You can change this using a simple CSS override like:
.btn {
white-space: normal;
}
Demo: http://www.bootply.com/90082
This is an old question with an old answer. The answer solves the problem, but you can get ugly word breaks, where the button breaks in the middle of a word, seemingly wherever it wants to.
My answer forces the button to wrap between words, providing for a nice, clean, and responsive button.
.btn-responsive {
white-space: normal !important;
word-wrap: break-word;
}
Click Here
Hope it helps someone in the future.
I have a section of HTML that I would like to be editable with CKEditor but in 2 different pieces.
Ideally I would want my HTML to look like:
<div class="page-header">
<h1>
<span>Heading</span>
<small>Subheading</small>
</h1>
</div>
where the subheading would be displayed on the same line as the heading and each are editable separately. This looks fine without CKEditor enabled.
One attempt was to hack the editor to enable span and small tags: (Enable CKEditor4 inline on span and other inline tags)
CKEDITOR.disableAutoInline = true;
CKEDITOR.dtd.$editable.span = 1;
CKEDITOR.dtd.$editable.small = 1;
$("[data-allowed-formating='all']").ckeditor();
http://jsfiddle.net/OzzieOrca/PCH9z/1/
This mostly works but if you double click the Header (to select everything) and start typing, it deletes the subheading and you can't get it back until you refresh the page
I tried using <div style="display: inline"> instead of the small and span but when CKEditor is instantiated, it changes the styling of the div and the subheader drops below the header.
I will try see if there is anything else I can do with CKEditor or see if I have any other HTML layout or styling ideas but any suggestions would be appreciated.
(I had the same issue with TinyMCE so I tried CKEditor and I think I like it better so I decided to keep using it but I still have this same problem)
Edit:
I finally tried this:
<div class="page-header">
<h1 class="pull-left">Header</h1>
<h1 class="pull-left">
<small class="padding-left">Subheader</small>
</h1>
<div class="clearfix"></div>
</div>
but then realized that this wouldn't wrap the subheader but just moves it to a new line if it is too long. I submitted this bug report: http://www.tinymce.com/develop/bugtracker_view.php?id=6354 which includes this example of what I want to do and what is not working http://jsfiddle.net/OzzieOrca/jKmZ7/
First, make sure the editor doesn't attach itself to the <h1> element.
If that works correctly, then I suggest to wrap the elements that you want to edit in a block element during edit and restore the DOM when editing stops.
I don't know why CKEeditor might distinguish between inline and block elements but it's quite possible that it never occurred to the author that someone might want to edit only part of a block.
I am extremely OCD when it comes to the layout of my code, and it's a pain to press the down arrow key and Tab a hundred times in a row. Does anyone use a text editor that has the function of indenting chunks of code at the same time? Such as, if I have this:
<div>
<img src="blahblah" style="float:left" />
<span>Hey it's a picture.</span>
</div>
<div>
<img src="somephoto" style="float:right" />
<span>Another picture</span>
</div>
...then I come back later and want to wrap both divs in another div, but it comes out like this:
<div>
<div>
<img src="blahblah" style="float:left" />
<span>Hey it's a picture.</span>
</div>
<div>
<img src="somephoto" style="float:right" />
<span>Another picture</span>
</div>
</div>
When I want it to look like this:
<div>
<div>
<img src="blahblah" style="float:left" />
<span>Hey it's a picture.</span>
</div>
<div>
<img src="somephoto" style="float:right" />
<span>Another picture</span>
</div>
</div>
Obviously this is a minor example, but when it comes to large files this becomes quite a hassle. I use Bluefish on Ubuntu and Notepad++ on Windows, and neither seem to come with the capability to indent a block of code all at once. What are your thoughts?
Any decent text editor, including Notepad++, can do this.
Select the lines and press Tab.
Yup go with Notepad++, its brilliant. Dont forget Shift + Tab too though, just as useful:)
Any decent text editor will have this functionality implemented into the editor.
They already mentioned Notepad++, but there's also Geany which is available for Windows and Linux (Also has the ability for auto close tags), Droidedit for Android,Smultron for OS X users, and if you love web based apps like myself there's the CodeMirror JavaScript library.
If you want to indent a large selection of code use Tab.
If you want to unindent/outdent a large selection of code use SHIFT + Tab.
Becomes very helpful. Also CTRL + F to find text, CTRL + H to replace text (Notepad++ has a replace all function, but Geany does not)
I would like to experiment with the following user interface:
1. The content consists of quotes followed by comments.
2. The comments are editable, while the quotes are not. However, quotes should be able to have parts of the quote highlighted, bolded, etc.
3. The entire text (including quotations and comments) should be able to be selected and copied out as rich text. Preferably it would be possible to delete the selection including any quotations within it (though that might be interesting if the selection stops in the middle of a quotation).
4. Preferably highlighting functionality, etc. should be similar for the quotations and for the comments (probably a toolbar with bold, italic, etc. icons above the text area).
I tried doing this using a contenteditable div and surrounding quotations with a contenteditable=false element. An example is below
<div id="editor" contenteditable="true"
style="height:200px; border:1px solid black">
This is some editable content.
<p><div contenteditable="false">This content should not be editable
<i contenteditable="true">(but this is)</i>.
</div></p>
</div>
However, I discovered that while Chrome (and so presumably WebKit) allows you to select text within a readonly part of the contenteditable element, Firefox only allows you to treat the contenteditable as one big block and select it all at once. Is there any way around this? Is there a better way to do what I am suggesting?
You can try this.
<div id="editor" style="height:200px; border:1px solid black">
<p contenteditable="true">This is some editable content.<p>
<div>
<p>This content should not be editable
<i contenteditable="true">(but this is)</i>.
</p></div>
</div>
hope this helped