Baidu editor serial number and bullets cannot be displayed to resolve

Source: Internet
Author: User

In doing forums, personal sites, office OA, for the use of Rich Text editor, the industry uses the most, the best should be Baidu editor.
In the use of Baidu Editor to do Rich text editing, hit the serial number, bullets, in the personalized page display can not display problems.
simple analysis, will Baidu editor, edited HTML Storage, which is then used to personalize the page display, has no associated style for the specified ordinal and bullet display.
That would be easier to solve, and it would be possible to add the relevant style to the personalization page by adding the references individually.

First, look at what the style is:

Second, personalize the page to add List-style-type style

by W3school Find, list-style-type Introduction, the relevant bullet style to add to the personalized page can be.

1. set a different list -like :

ul.circle {list-style-type:circle;}
Ul.square {list-style-type:square;}
Ol.upper-roman {List-style-type:upper-roman;}
Ol.lower-alpha {List-style-type:lower-alpha;}

2. Browser Support

IeFirefox Chrome Safari Opera

All browsers support the List-style-type property.

Note: Any version of Internet Explorer (including IE8) does not support attribute values "Decimal-leading-zero", "Lower-greek", "Lower-latin", "Upper-latin", " Armenian "," Georgian "or" inherit ".

3. Definitions and usage
the List-style-type property sets the type of the list item tag.

4. Possible values
CSS2 values of:

Value of CSS2.1:

Disc | Circle | Square | Decimal |decimal-leading-zero |
Lower-roman | Upper-roman | Lower-greek | Lower-latin | Upper-latin |
Armenian | Georgian | none | Inherit

Third, the processing of Chinese bullets do not display problems
After the above processing, about Baidu Editor can not display the serial number and the problem of bullets, is not able to solve?
After testing, it is found that the list of the listed style display can be supported, but for some Chinese bullets still can not, like (i), (ii), (three) similar symbols.
How do we deal with that? In-depth analysis, continue to view the Baidu editor after editing the page display HTML elements is what?

1. View the style of the build page

Did you find anything different? It seems to be a background image address, AO. Http://bs.baidu.com/listicon/list-cn-1-1.gif

Address bar input Look at:


2. Workaround

After the first step of the analysis, it can be deduced that Baidu editor for the Chinese project symbol display, using a picture rendering processing.
Then we can also create a new folder under our own site to store these images of Baidu, in the personalized page processing point to our own folder,
In case Baidu removed Baidu editor or bullets corresponding to the picture placed in another server;
The simplest way is to directly use the Baidu Editor's Road, in the personalized page with style OK , let's take a look again.
put the generated page's HTML All in Notepad, you understand:

See no, it is to add these pictures of bullets to your personalized page, you can solve the Baidu editor Chinese serial number and bullets can not display problems.

Four, Baidu editor other issues to deal with
1. Baidu editor ueditor Code highlighting effect The workaround is not displayed in the foreground

<Linkhref= "Your Ueditor path/ueditor/third-party/syntaxhighlighter/shcoredefault.css"rel= "stylesheet"type= "Text/css" /> <Scripttype= "Text/javascript"src= "Your Ueditor path/ueditor/third-party/syntaxhighlighter/shcore.js"></Script> <Scripttype= "Text/javascript">Syntaxhighlighter.all (); </Script>

PS: In the content inserted code highlighting, the background editor can be automatically wrapped, but after the publication, in the foreground view, found that the code can not be automatically wrapped, directly beyond the boundaries of the content page, resulting in a very unattractive effect. So I tried to find a solution to the problem, after unremitting efforts, finally solved the problem.

Here's how to share the following:
the following files need to be modified:
/ueditor/third-party/syntaxhighlighter/shcoredefault.css
Open:Shcoredefault.css
FindBayi Line,
<spanstyle= "FONT-SIZE:14PX;"  >.syntaxhighlighter Table {<br><br> width:100%!important;  <br><br> border:1px solid #c0c0c0!important; <br><br>}<br></span>
modified to:
<spanstyle= "FONT-SIZE:14PX;"    >.syntaxhighlighter Table {<br><br> width:100%!important;word-break:break-all; <br><br> border:1px solid #c0c0c0!important; <br><br>}<br></span>

can realize automatic line-wrapping, added a sentence:word-break:break-all; Code, This means: Force a break and change the meaning of a line.

2.After inserting a table, there is a table in the editing process, but after saving, there is no border or color in the foreground page.
( 1). Open the Ueditor.all.js file below the root of the editor to find:
For (var c = 0; c< colsnum; C + +) {
Html.push (' <td width= ' + tdwidth + ' "valign=" ' + opt.tdvalign + ' "> ' + (browser.ie? Domutils.fillchar: ' <br/> ') + ' </td> ')
}

Change to:
For (var c = 0; c< colsnum; C + +) {
Html.push (' <td style= ' border:1pxsolid #ccc; "width=" ' + tdwidth + ' "valign=" ' + opt.tdvalign + ' "> ' + (browser . ie? Domutils.fillchar: ' <br/> ') + ' </td> ')
}
different versions of the code may be slightly different.
(2 ). found in the ueditor.all.js file:
Table.setattribute ("Data-sort", cmd = = "Enablesort"?) "sortenabled": "sortdisabled");
Add a line below this code:
Table.setattribute ("style", "border-collapse:collapse;");
(3 ). found in the ueditor.all.js file:
Return ' <table><tbody> ' + html.join (') + ' </tbody></table> '
instead:
return ' <table style= ' border-collapse:collapse; ><tbody> ' +html.join (') + ' </tbody></table> '.
at this point, then refresh the background, insert a table, there is a border.
because the change isUeditor.all.js, so call Ueditor.all.js is valid, if the ueditor.all.min.js is called , then you need to change ueditor.all.min.js the file.
If you want to expand some of the new styling effects, you can just change these three places.

Reference article:
theCSS List-style-type Properties"
theBaidu Editorueditor Code highlighting effect not displayed in front of the workaround
theBaidu EditorUeditor after inserting a table, there are tables in the editing process, but after saving, there is no border or color in the foreground page.


Baidu editor serial number and bullets cannot be displayed to resolve

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.