angular+squire实现一个简洁的富文本编辑器效果代码-html代码-BFW代码库

angular+squire实现一个简洁的富文本编辑器效果代码

代码语言：html

所属分类：其他

代码描述：angular+squire实现一个简洁的富文本编辑器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/angular-material.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Roboto'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
  
<style>
body,
#app {
  height: 100%;
}

sw-editor article {
  min-height: 200px;
}
sw-editor article:focus {
  outline: 0;
}
</style>



</head>

<body translate="no" >
  <div id="app" ng-controller="DemoCtrl" ng-cloak ng-app="app" layout="row" layout-padding layout-align="center center">

  <h2>Rich Text</h2>
  <sw-editor flex></sw-editor>

  <!-- this will be required in app -->
  <script type="text/ng-template" id="editor.html">
    <div layout="row">
      <md-button ng-class="{'md-primary':buttonState.bold}" ng-click="bold()" class="md-raised md-icon-button">
        <md-icon> format_bold </md-icon>
      </md-button>
      <md-button ng-class="{'md-primary':buttonState.italic}" ng-click="italic()" class="md-raised md-icon-button">
        <md-icon> format_italic </md-icon>
      </md-button>
      <md-button ng-class="{'md-primary':buttonState.underline}" ng-click="underline()" class="md-raised md-icon-button">
        <md-icon> format_underline </md-icon>
      </md-button>
      <md-button ng-class="{'md-primary':buttonState.link}" ng-click="link($event)" class="md-icon-button md-raised">
        <md-icon> insert_link </md-icon>
      </md-button>
      <md-button ng-class="{'md-primary':buttonState.bullet}" ng-click="bullet()" class="md-raised md-icon-button">
        <md-icon> format_list_bulleted </md-icon>
      </md-button>
      <md-button ng-class="{'md-primary':buttonState.numbered}" ng-click="numbered()" class="md-raised md-icon-button">
        <md-icon> format_list_numbered </md-icon>
      </md-button>
      <md-button ng-class="{'md-primary':buttonState.quote}" ng-click="quote()" class="md-raised md-icon-button">
        <md-icon> format_quote </md-icon>
      </md-button>
    </div>
    <md-card layout-padding>
      <article></article>
    </md-card>
  </script>

</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular-1.4.6.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular-animate.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular-aria.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular-messages.min.js"></script>
<script type="text/javascript" src=".........完整代码请登录后点击上方下载按钮下载查看