Change WordPress background editor style to realize direct preview

16:03:01, September 11, 2011 WordPress fifty-two 13.4K Reading mode

After WordPress 3.0, there is a new practical function: you can change the style of the default background editor (TinyMCE) to implement an interesting function: directly preview the layout of the log content in the background visual editor mode, and maintain the consistency with the foreground browsing style. You do not need to go to the foreground to view the log editing. WordPress 3.21 default theme Twenty Eleven has integrated this function. The default theme Twenty Eleven has powerful functions and integrates many new WordPress functions. So far, I haven't studied it thoroughly Children's shoes with the theme of WP might as well study more.

Open the default theme TwentyEleven's functions.php, and you will see a clearly commented code:

// This theme styles the visual editor with editor-style.css to match the theme style.
add_editor_style();

The general meaning of the note in Chinese is: the visual editor matches the style of the theme editor-style. css.

The key is this sentence. Take the HotNews Pro theme as an example to easily implement this function.

First, create a new file named editor-style.css, copy the following style into it, or download it directly: Editor-style.css file , and put it in the HotNews Pro theme css directory.

body {
font : 13px 'Microsoft YaHei', Microsoft YaHei Arial , Lucida Grande, Tahoma , sans-serif ;
color : #000 ;
text-shadow : 0px 1px 0px #d1d1d1 ;
width : 700px ;
}
ul li{
list-style : square inside ;
line-height : 24px ;
}
h1 { font-size : 18px ; line-height :185%;}
h2 { font-size : 16px ; line-height :185%;}
h3 { font-size : 14px ; line-height :185%;}
ul,ol,dd, pre ,hr {
margin : 0 0 10px 0;
}
p {
line-height :185%;
text-indent :2em;
margin : 0 0 10px 0;
}
blockquote {
width : 660px ;
color : #4e6384 ;
line-height : 23px ;
margin : 5px auto 5px auto ;
padding : 10px ;
clear : both ;
border : 1px solid #ccc ;
}
code {
width : 660px ;
font : 12px / 17px tahoma , arial , sans-serif ;
color : #4e6384 ;
display : block ;
margin : 5px auto 5px auto ;
padding : 10px ;
border-left : 3px solid #8391A7 ;
border-right : 1px solid #8391A7 ;
border-top : 1px solid #8391A7 ;
border-bottom : 1px solid #8391A7 ;
}
blockquote td{
border-bottom : 1px solid #ccc ;
padding : 2px ;
}
/**Mixed arrangement of pictures and texts**/
img.centered {
display : block ;
margin-left : auto ;
margin-right : auto ;
margin-bottom : 10px ;
}
img.alignnone {
margin : 0 0 10px 0;
display : inline ;
}
img.alignright {
margin : 0 0 10px 10px ;
display : inline ;
}
img.alignleft {
margin : 0 10px 10px 0;
display : inline ;
}
.aligncenter {
display : block ;
margin-left : auto ;
margin-right : auto ;
margin-bottom : 10px ;
}
.alignright {
float : right right ;
margin : 0 0 10px 10px ;
}
.alignleft {
float : left ;
margin : 0 10px 10px 0;
}

Next, open the functions.php template file of the HotNews Pro theme and add a sentence:

//Background Preview
add_editor_style('/css/editor-style.css');

Third, there is no third. Ha ha, all the transformation is completed!

This function has been integrated in the upcoming official version of HotNews Pro 2.7.

Since the background editor and the foreground editor are in different style frames, if you want to transform other themes, just copy the styles related to the body in the theme style.css and remove the specific selectors. For example, the style code above can also refer to the editor-style.css in the default theme TwentyEleven, The key is to set the width of the body to be the same as the body of your theme.

Most of the articles on this site are original and used for personal learning records, which may be helpful to you, for reference only!

My Wechat

Copyright Notice

Please indicate the source and link of the original article reprinted on this site. Thank you for your cooperation!

Get this topic

five hundred and ninety-eight million eight hundred and forty-five thousand and six

Please add Q: 598845006

Multi functional theme Begin

This article is written by Robin Published on September 11, 2011 at 16:03:01
Please specify: https://zmingcx.com/change-style-editor-wordpress-preview.html |Robin

WordPress
course
HotNews Pro

five hundred and ninety-eight million eight hundred and forty-five thousand and six

Please add Q: 598845006

Multi functional theme Begin

Comments fifty-two Visitors forty-three Author eight

Horse gnawed spinach basket one
18:16:33, September 11, 2011 Shenzhen, Guangdong Province one F
reply
I'm a sofa. I'm going to see what Twenty Eleven is like
Brother Qiang four
18:42:04, September 11, 2011 Hefei, Anhui Province two F
reply
The sofa is gone. When will the official version be released?
- Robin
  20:02:06, September 11, 2011 China B one
  reply
  @ Brother Qiang It should be done quickly. We should catch up with the three days of the holiday to improve it, because we don't have much time to work at ordinary times
Jinan Decoration one
18:54:44, September 11, 2011 Jinan, Shandong Province three F
reply
The wp is indeed powerful.. It seems necessary to change
Pekko Wei two
20:17:18, September 11, 2011 Fujian Province four F
reply
Don't understand --#
Sichuanese six
22:11:31, September 11, 2011 Chengdu, Sichuan five F
reply
Boss, didn't you say there was no official version!
shtion three
00:55:44, September 12, 2011 Shiyan City, Hubei Province six F
reply
Every time Brother Bird shares his skills, he is different. Thank you very much for your efforts and permanent support! We look forward to the early completion and release of the official version of 2.7! Wish Brother Bird a happy Mid Autumn Festival!
Giant Panda five
04:44:14, September 12, 2011 Hangzhou, Zhejiang Province seven F
reply
Learned
ruantoo four
September 12, 2011 07:00:51 Suzhou, Jiangsu Province eight F
reply
Use a bird~~~
Jiujiang Blog two
10:44:22, September 12, 2011 Jiujiang City, Jiangxi Province nine F
reply
I wish bloggers a happy Mid Autumn Festival. Work is important, blogging is important, and festivals and family reunions are even more important! I wish you and your family a healthy and happy holiday, hehe!
People who can see the wind six
13:15:17, September 12, 2011 Huaihua City, Hunan Province ten F
reply
I wish Brother Bird a happy Mid Autumn Festival, good health, smooth work and happy family!
- Robin
  15:11:58, September 12, 2011 China B one
  reply
  @ People who can see the wind Tongle
Bob five
13:55:44, September 12, 2011 Hangzhou, Zhejiang Province eleven F
reply
Happy Mid Autumn Festival!
- Robin
  15:12:31, September 12, 2011 China B one
  reply
  @ Bob Wish everyone happy every day
Hefei SEO four
17:56:45, September 12, 2011 Hefei, Anhui Province twelve F
reply
Wish Brother Bird happy every day
Qianglong three
23:32:43, September 12, 2011 Chongqing City thirteen F
reply
We look forward to the official release of Bird Brother 2.7..
Beijing Art Photography one
17:42:30, September 13, 2011 Beijing fourteen F
reply
Very good. Learn.
Steam turbine one
20:12:28, September 13, 2011 Shandong Province fifteen F
reply
The best wordpress I've ever seen
Little fish four
13:59:30, September 14, 2011 Fuzhou, Fujian Province sixteen F
reply
Mm-hmm. It's very convenient..
Jialin four
September 17, 2011 01:23:51 Tianhe District, Guangzhou City, Guangdong Province seventeen F
reply
This should be named. I had thought about this function before.
Loong one
15:09:07, September 18, 2011 Baoding City, Hebei Province eighteen F
reply
How to set the classification at the bottom of the website page to display only the largest classified friendship links? That's also deformed
Studio four
10:14:46, September 19, 2011 Wuxi City, Jiangsu Province nineteen F
reply
I don't know much about code. I need to learn
Grassroots entrepreneurship three
15:46:51, September 20, 2011 Nantong City, Jiangsu Province twenty F
reply
Waiting for version 2.7 to appear, there is no end to technology
Learned
Fuju five
11:45:11, September 21, 2011 Zhengzhou City, Henan Province twenty-one F
reply
Brother Bird, let me give you a suggestion on our template. In the cms mode, the current four small color blocks of "green, yellow, blue and orange" in the column have been canceled? Because the overall feeling is that there are too many colors, and a long time of watching will cause great pressure on the vision, which is a bit messy.
- Robin
  22:28:08, September 21, 2011 China B one
  reply
  @ Fuju Just how you feel
Wuxi Stock Training three
10:31:06, September 22, 2011 Wuxi City, Jiangsu Province twenty-two F
reply
It's quite good!! Learned!!!
Website filing two
14:03:33, September 22, 2011 Harbin, Heilongjiang Province twenty-three F
reply
Other themes are not supported
My Mobile Internet two
18:54:35, September 27, 2011 Nanyang City, Henan Province twenty-four F
reply
It is said that Microsoft has now released the starter kit in the Marketplace of Windows Phone 7, making it easier and faster to develop WordPress mobile software. I hope that the background management of WordPress will be more powerful in the future
wmtimes seven
12:16:43, September 29, 2011 Xinyu City, Jiangxi Province twenty-five F
reply
This is very good. I have collected it.
Mischievous ghost three
16:20:57, September 29, 2011 Shijiazhuang, Hebei twenty-six F
reply
I'm used to editing in code mode. Preview mode is too resource consuming.
- Robin
  22:47:11, September 29, 2011 China B one
  reply
  @ Mischievous ghost What resources are consumed?
  - Mischievous ghost three
    09:46:47, September 30, 2011 Shijiazhuang, Hebei B two
    reply
    @ Robin In background preview mode, it will consume a part of the browser memory, although it is very small
I love talking four
September 29, 2011 17:32:19 Baoding City, Hebei Province twenty-seven F
reply
Hello, Brother Bird, I feel good using your template. My wp postviews plug-in, which records the number of views, makes statistics on a single log. If I refresh the page, the number of views will increase twice. Returning to the home page, he added it again. For example, refresh http://www.52liao8.com/archives/1636.html This article. Online solution, please brother bird.
- I love talking four
  17:38:31, September 29, 2011 Baoding City, Hebei Province B one
  reply
  @ I love talking In addition, this happens in Google Chrome, and other browsers display normally. But your website is normal in Google.
  - Robin
    22:50:47, September 29, 2011 China B two
    reply
    @ I love talking Count Views From in wp postviews plug-in settings: select Guests Only
    Don't take a vanity plug-in seriously
lcr99 zero
21:39:59, September 29, 2011 Mianyang City, Sichuan Province twenty-eight F
reply
Just leave it alone
If name one
20:20:33, October 5, 2011 Wuhan, Hubei Province twenty-nine F
reply
Let's see the idol again
The ending actor three
19:43:43, October 6, 2011 Songjiang District thirty F
reply
Yes, but the background is empty automatically. The front desk is empty as usual. Unless the background is empty for nearly 5 words, the front desk is basically empty. Where can I change it to be consistent?
Ziming two
23:21:35, October 17, 2011 Tianhe District, Guangzhou City, Guangdong Province thirty-one F
reply
I feel good when I use Hotnews. At first sight, I knew it was what I wanted.
Watsons official website five
20:35:35, October 26, 2011 art green thirty-two F
reply
Preview mode feels too resource intensive.
- Robin
  00:08:28, October 27, 2011 China B one
  reply
  @ Watsons official website What resources are consumed when only 7K CSS style files are loaded?
Handu Clothing House Flagship Store zero
21:19:13, October 28, 2011 Shaoguan City, Guangdong Province thirty-three F
reply
How awesome! I learned
soping zero
10:37:18, December 2, 2011 Shanghai thirty-four F
reply
Just after seeing such a practical article, I beat my chest and stamped my feet, and I will toss about tonight!
Taobao discount website one
15:01:09, December 15, 2011 Chizhou Anhui thirty-five F
reply
How awesome! I learned
ssa one
12:22:44, January 7, 2012 Chongqing City thirty-six F
reply
Very good blog, we like it. You may be interested in our services. We provide Beijing Fashion Design Course, Beijing Digital Photography Course, and Beijing Web Design and Development Course to help Chinese friends integrate into the international market, which is not only our responsibility, but also our pleasure. If it can help you, we will be very happy. Although we are from France to Beijing, we believe that knowledge and learning have no borders. Thank you webmaster:)
Aiko fish one
13:48:53, February 24, 2012 Chengdu, Sichuan thirty-seven F
reply
I used 2.7 very well! Thanks for your support, Brother Bird!
keke one
23:44:51, May 22, 2012 Nanchang City, Jiangxi Province thirty-eight F
reply
Hello blogger, the theme itself is indented by 2 spaces in the first line by default, but sometimes it needs to be indented by 2 spaces, so I simply indented the first line by 2 spaces, and deleted text indent: 2em in style.css; Code, but the background editor still displays the first line indented by 2 spaces. I think it should be modified here, so please ask the building owner how to modify it. I try to delete the text indent: 2em above; But it still failed. I still want to ask the blogger. I hope the blogger can find time to answer. Thank you
- Robin
  08:18:11, May 23, 2012 China B one
  reply
  @ keke Open the theme editor-style.css, delete text-indent: 2em
alexxiaoxie one
20:38:55, May 23, 2012 Ya'an City, Sichuan Province thirty-nine F
reply
Mockingbird has used your theme. The login on the home page is not available, and it has become an invalid connection
Solve it
Ferret three
13:30:30, October 19, 2012 Guangzhou, Guangdong Province forty F
reply
What is the specific selector? Please consult the blogger.
Xiao Hao zero
21:26:59, April 10, 2016 Chongqing City forty-one F
reply
Brother Bird, background editing of your theme Visual insertion or editing link is not available, only manual input in html<a herf= Can be repaired or provided with the following methods