Home > Developer > Web Develop
Because of the project needs, the need to get a text editor on the PC page, and the user input content format completely passed to the background to display on another page;
Try a few plug-ins feel or wangeditor good, use it relatively simple, the following I will meet today's pits are displayed, see this blog you must be very lucky
Because you can immediately get started with this plug-in, good nonsense not much to say;
1 Official website Download plugins need CSS and JS (note: The plugin relies on jquery all the need to first introduce jquery): https://github.com/wangfupeng1988/wangEditor/releases
2 Case Code
<! DOCTYPE html><meta charset= "UTF-8" >
<title>wangeditor Menu Configuration </title>
<body>
<p>wangeditor Customizing menu Configuration </p>
<div id= "Div3" >
<p> Welcome to the Wangeditor Rich Text editor </p>
</div>
<button id= "BTN1" > Click </button>
<script type= "Text/javascript" src= ". /.. /release/wangeditor.min.js "></script>
<script type= "Text/javascript" >
var E = Window.wangeditor
var Editor2 = new E (' #div3 ')
Editor2.customConfig.menus = [ //Menu configuration, do not directly remove this default all functions are like
' Head ',
' Bold ',
' Italic ',
' Underline '
]
Editor2.create ()</script>
Figure 1 (all functions are available from the default menu)Figure 2 (Configured menu)
3 So far you can implement an editor, but to the background I need to have HTML tags in order to completely write the user's bold color of the line to see what is passed
Code:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>wangeditor Get content </title>
<body>
<p>wangeditor Get content </p>
<div id= "Div3" >
<p> Welcome to the Wangeditor Rich Text editor </p>
<p> Welcome to the Wangeditor Rich Text editor </p>
</div>
<div>
<button id= "BTN1" > Get html</button>
<button id= "btn2" > Get text</button>
</div>
<script type= "Text/javascript" src= ". /.. /release/wangeditor.min.js "></script>
<script type= "Text/javascript" >
var E = Window.wangeditor;
var Editor2 = new E (' #div3 ');
Editor2.create ();
document.getElementById (' btn1 '). AddEventListener (' click ', function () {
Console.log (editor2.txt.html ());
Alert (editor2.txt.html ())
}, False);
document.getElementById (' btn2 '). AddEventListener (' click ', function () {
Alert (Editor2.txt.text ())
}, False)
</script>
</body>
</body>
4 for two simple small examples you need other functions to become JSON or other on the author's git have a lot of demo as should have you need
: https://github.com/wangfupeng1988/wangEditor/releasesFinally thank the plugin author to develop this simple and useful widgetJS Text Editor Plugin Wangeditor tutorial and summary
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
