Home > Developer > Web Develop
Recently in the angular need to integrate Rich text editor, originally already integrated Baidu Ueditor, backstage feel configuration too much, let me get something else, and then found the Wangeditor, this configuration and get started is simple, the following to see the specific operation steps:
First of all you can download in Https://github.com/wangfupeng1988/wangEditor or official website http://www.wangeditor.com/, the contents of the document is also easy to understand, can be configured on their own. After downloading the extract, we need to use the main is Wangeditor.js or wangEditor.min.js. The following is the catalogue and code:
1 <HTML>2 <Head>3 <title>Angular integrated Wangeditor</title>4 <MetaCharSet= "Utf-8">5 <Scriptsrc= "Js/angular.min.js"></Script>6 <Scriptsrc= "Js/wangeditor.min.js"></Script>7 </Head>8 <BodyNg-app= "MYAPP"Ng-controller= "Myctrl">9 <DivID= "Editor"Ng-model= "SENDPROMT"></Div>Ten <ButtonNg-click= "getcontent ()">Get HTML</Button> <BR/> One <ButtonNg-click= "GetContent2 ()">Get text</Button> <BR/> A <Scripttype= "Text/javascript"> - varapp=Angular.module ('myApp',[]); - App.controller ('Myctrl',['$scope',function($scope) { the //Configure Wangeditor - varE, editor; - E=Window.wangeditor; - Editor= NewE ('#editor'); //ID must be consistent + Editor.customConfig.menus= [ - 'Head', //title + 'Bold', //Bold Body A 'fontSize', //Font Size at 'FontName', //Font - 'Italic', //Italic Body - 'Underline', //Underline - 'ForeColor', //text color - 'BackColor', //Background Color - 'Link', //Insert Link in 'List', //List - 'Justify', //Alignment to 'Image', //Insert Picture + 'Table', //Table - 'Video', //Insert Video the 'Code', //inserting code * 'undo' //Revoke $ ];Panax Notoginseng //If you need to insert a picture directly into the content using Base64 encoding, refer to the sample configuration - editor.customConfig.uploadImgShowBase64= true; the //limit the picture size to 10M + editor.customConfig.uploadImgMaxSize= Ten* 1024x768 * 1024x768; A editor.create (); the //How to get content + $scope. GetContent= function(){ - alert (editor.txt.html ()) $ } $ $scope. GetContent2= function(){ - alert (Editor.txt.text ()) - } the }]); - </Script>Wuyi </Body> the </HTML>
Well, the simplest and accomplished, the following direct access to the URL to test, you can upload pictures, get text content, etc., need other configuration of their own settings.
Thank you.
Angularjs Integrated Rich Text editor
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
