lets say you have html like this,
<span class="full-sentence">
<span class="subject">She</span><span class="verb">loves</span><span class="object">him</span>
.</span>
What the user sees is,
She loves him.
Using a wysiwyg HTML inline editor, you could change the "She loves him." string into something else, like "He loves her coat." for example, but you would have no way of adding the span class "noun" to the word coat in the wysiwyg editor without displaying the source code to some extent.
I'm trying to find a way to do this, first by displaying the span classes text, such as "verb" from the , display the "verb" string in the output, and allowing it to be changed inline, and have it transform the string inside the sourcecode right inside the parenthesis of class=""
I'm trying to accomplish this WITHOUT displaying anything irrelevant, such as the <span class=""></span> characters. All the user really needs to work with is the spot inside the "" marks, the text itself, and have the ability to add new span class boundaries, by highlighting a string and pressing some kind of button that wraps that highlighted string in <span class=""></span> and then allows you to write classes to fill the "".
It would ideally look something like this, without the awkward spacing between text strings as in a libreoffice writer table, which this is a picture of,
![enter image description here][2]
The default ckeditor shows parent elements in the bottom bar, and permits right click to edit properties of select elements. You could use a bar or a mouseover to edit and display the word type, and you would also want some cleanup code for when people paste html and join two words etc.
From a technical perspective it's relatively trivial once you are clear on the interface you want to make your own custom WYSIWYG.
<div contenteditable="true">
Editable text...
</div>
Related
Really having trouble with this and can't find any results on it.
I want my html text to utilize the carrots <> for some of my text.
Specifically for a navbar menu item. But I can't seem to build it without activating the text as an actual div.
I want it to say "< Dev>" without using quotes or spaces, but it when I take the quotes/spaces away it activates it as a div. How do I keep the entire message "< Dev>" without turning it into a div item?
E.g:
<p> Welcome to my <Dev> portfolio</p>
Also what is the term used to override reserved code functions as text? Will help me research answers for other issues too. Like when using & as text and not as code.
Thanks for the assistance!
You'll want to use <p> Welcome to my <Dev> portfolio</p>
You can find a list of HTML character codes Here
Try using the html unicode values for those characters instead.
Welcome to my &60Dev&62 portfolio
Sorry it looks like this forum reads those unicode characters and prints them correctly. Add # signs at the after the & characters to get the html code.
I have a website featuring a long list of names.
To make it more oversee-able, I'd like to put a text link in to
(on load) show all
(on clicking word "pears") hide all elements with class="apple"
(on clicking word "apples") hide all elements with class="pear"
(on clicking "show all") show all
I suppose it'd be like a really simplified version of "as you type" filtering.
Does a plug-in exist for this? I don't even know where to start!
Just bumped into this post, I know it's old but to be honest are none of the given answers pretty helpful. In my opinion, you can filter out the elements using the filter with :not, as in filter(':not()').
As Joel Potter stated, using $("span[class='apple']").hide(); will only select the spans with exactly one classname, apple. If multiple classes are present (which is highly likely) then such an approach would not work.
If you click on a word, e.g. pears, you can then filter out the elements that do not contain the class pears.
$('span').show().filter(':not(.pears)').hide();
and you're done ;)
hmm.. if you had a list like the following:
<span class="apple">red apple</span>
<span class="apple">green apple</span>
<span class="pear">big pear</span>
<span class="pear">little pear</span>
the following would show all:
$("span.*").show();
the following would hide all elements with 'class="apple"':
$("span[class='apple']").hide();
or you could go with hiding everything that doesn't have 'class="pear"':
$("span[class!='pear']").hide();
To filter out elements that contain a given class or any other attribute value, using the Attribute Contains Word Selector would be a good solution:
$("span").filter("[class~='apple']")
Actually, for the class attribute, it's even easier to just write:
$("span").filter(".apple") // or:
$("span.apple")
[This is also what Joel Potter wrote in his comment to this answer.]
That way you'll be able to match all of the below:
<span class="apple">...</span>
<span class="apple fruit">...</span>
<span class="fruit apple sweet">...</span>
So whenever you're not 100% sure that you'll only have a single class set on an element, use the ~= operator.
Using watir-webdriver, I am trying to click the "down" button next to some known text on the screen (in this case, "An Example"). When I click the down button, the text itself will move down a list of arbitrary length. I don't always know where the text will appear in the list, and also there is no ID on the text or the down button to uniquely identify the location to click. The button has a class attached ("rowDown down"), but as there can be multiple rows of text, the button class is not unique.
In situations where I can't get get a unique ID, I always turn to XPath.
In this case, I know the XPath of the text I care about will end with /div[2]
and the button I want to click is in div[1], more specifically the button I want will have XPath ending in div[1]/button[2]
The question is, how do I get the XPath for the text using watir-webdriver?
(An example of the full XPath I could be dealing with is "//*[#id='sortOrder0']/tbody/tr[2]/td[1]/div[2]".)
Alternately, and equally acceptable, is there some other, reliable way of getting to the button I care about?
Here is the relevant portion of my HTML, which produces an up arrow and a down arrow next to the words "An Example":
<div>
<button class="rowUp up"></button>
<br />
<button class="rowDown down"></button>
</div>
<div>
An Example
</div>
You can check the text of node during an XPath using text(). Therefore you could write an XPath that finds the div with text "An Example", goes to the preceding div and then clicks the down button:
browser.button(xpath: '//div[normalize-space(text())="An Example"]
/preceding-sibling::div[1]
/button[contains(#class, "rowDown")]').click
Personally I find this hard to read and error prone. I prefer to use basic locators and leave the XPath generation to Watir-Webdriver's internals. A similar effect to the XPath can be achieved with:
browser.div(text: 'An Example').parent.button(class: 'rowDown').click
I need to show paragraph marks, spaces and other formatting marks in a contenteditable div as you can in MS Word by pressing the Formatting Marks button Formatting Marks button http://blogs.mccombs.utexas.edu/the-most/files/2011/04/show-hide-button-in-outlook.jpg
Is there a simple way to achieve this?
<html>
<head>
<style>
span::after{
color:black;
content:"\00b6";
}
p::after{
color:black;
content:"\00b6";
}
</style>
</head>
<body>
<h3>
<span class="label">This is the main label</span>
<span class="secondary-label">secondary label</span>
</h3>
<P>Quote me</p>
</body>
</html>
Creating a font which draws spaces as dots and newlines as paragraph marks should solve your problem.
In code it will look like
.editable-div {
font-family: "Your custom font with spaces as dots and stuff", "Actual character font";
}
Here's an article which elaborates on this approach http://www.sitepoint.com/joy-of-subsets-web-fonts/
(I don't have access to Word, but I'm assuming it's the exact same functionality present in most text editors, or InDesign's 'show hidden characters' option &c.)
No, there definitely isn't a simple way to do this, because it's a fairly complex feature.
Your best bet if you really want to do this is to capture the input within the div as a user enters text. Something like Bacon that can easily capture keyed user input as a stream (and allow you to map across the stream) would simplify the process somewhat.
You'll then need to replace* (in realtime) every space/paragraph mark/&c with a relevant marker for the user. The actual input still needs be either saved as typed, or parsed again before saving to strip the new, pretend characters. And though you can use use unicode entities for many of the markers (pilcrows, maybe?), a space (for example) will still show as whitespace (or as the entity code if escaped), so you would need to use a representative icon - essentially, the majority of the hidden characters will each need to have their own specific, defined rendering rules.
This is all fairly nightmarish. It's doable if you can ensure the max amount of text can be kept small, and if you can control what users can enter. For large amounts of text, I can see it becoming horrific: not sure what the JS overhead would be in terms of performance, but I can't imagine it would be particularly good.
* or append - for example newlines/carriage returns etc need to be both displayed as a marker, and actually occur within the contenteditable element.
Edit: What you could do in addition to the above is to edit a font, replacing/adding unicode points for hidden characters instead/as well as visible ones - you would still need to capture input, but this would remove a few headaches. It would deal with spaces quite nicely, for example. Still a bit of a nightmare, but hey.
I want to make each sentence in a paragraph stored inside a html widget. For instance, "I go to school. School is in city. My mom cooks for me. She is one I love"
There are 4 sentences in this paragraph and I want to store each of these sentence inside a html.
HTMLPanel testHTMLPanel=new HTMLPanel("<p></p>");
HTML html1=new HTML("<b>I go to school.</b>");
HTML html2=new HTML("<i>School is in city</i>");
HTML html3=new HTML("<b>My mom cooks for me.</b>");
HTML html4=new HTML("<i>She is one I love</i>");
testHTMLPanel.add(html1);
testHTMLPanel.add(html2);
testHTMLPanel.add(html3);
testHTMLPanel.add(html4);
But it showed one new line for each sentence. The sentences didn't go one after another like in a normal paragraph.
PRINT OUT:
I go to school.
School is in city
My mom cooks for me.
She is one I love
But I want it like this:
I go to school. School is in city. My mom cooks for me. She is one I love.
Note: if the sentence is very long, then some part of the sentence will be showed in the next line. For example, If we show this long sentence "This is very very long sentence ...... ......some part of it will be on the next line". "some part of it will be on the next line" will be flowed to next line naturally like a sentence in a paragraph. Thus, we can't use label because the whole label will take the whole sentence.
I used HTMLPanel("<p></p>"), but it didn't work. How to modify this HTMLPanel or any other kind of panel that can solve the problem?
FlowPanel and HTMLPanel will both work, but it depends on the widget you feed into them. HTML is a block level widget (root element is a <div>); use an InlineHTML instead (root element is a <span>).
But for assembling pieces of HTML, better use a SafeHtmlBuilder as Dvd Prd suggests; unless the pieces have to be dynamically updated later, but you can mix and match (use HTMLPanel.createUniqueId() to create placeholders for the widgets).
Try the following :
SafeHtmlBuilder builder = new SafeHtmlBuilder();
builder.appendHtmlConstant("<b>I go to school.</b>");
builder.appendHtmlConstant("<i>School is in city</i>");
builder.appendHtmlConstant("<b>My mom cooks for me.</b>");
builder.appendHtmlConstant("<i>She is one I love</i>");
HTMLPanel panel = new HTMLPanel(builder.toSafeHtml());
RootPanel.get().add(panel);
Have a look at gwt flow panel
A panel that formats its child widgets using the default HTML layout behavior.
It just creates a html div which you need.
And when ever adding any html content use safehtml interface to covert your content.
http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/FlowPanel.html