Showdown Markdown Editor:如何调整图片大小以适应内容?

时间:2016-06-21 08:09:52

标签: javascript angularjs markdown pagedown showdown

我试图通过其Angularjs模块showdown

使用堆叠流量降价编辑器ng-showdown

一切都很顺利但是包含的图像是实际/原始尺寸。

如何调整大小以适应文本?

以下是一个显示相同问题的假人。

非常感谢!!!



<html ng-app="theShowdown">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.3.0/showdown.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-sanitize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-showdown/1.1.0/ng-showdown.min.js"></script>
  <script>
    var theShowdown = angular.module('theShowdown', ['ngRoute', 'ngSanitize', 'ngAnimate', 'ui.bootstrap', 'ng-showdown']);

    theShowdown.config(function() {

    })

     theShowdown.controller('theMain', function($scope, $showdown) {

      $scope.mymarkdown = `**Hello** _Stackover Flow_ ![Showdown][sd-logo]

[sd-logo]: http://logz.io/wp-content/uploads/2016/02/stack-overflow-logo.png`;

      var htmlValue = $showdown.makeHtml($scope.mymarkdown)

    })
  </script>
</head>

<body ng-controller="theMain">
  <p markdown-to-html="mymarkdown"></p>
  <textarea rows="4" cols="150" ng-model="mymarkdown"></textarea>
</body>

</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

声明:

我是当前摊牌的项目负责人。

根据showdown's documentation

  

parseImgDimensions :( boolean)[default false]支持在markdown语法中设置图像尺寸。例子:

![foo](foo.jpg =100x80)     simple, assumes units are in px
![bar](bar.jpg =100x*)      sets the height to "auto"
![baz](baz.jpg =80%x5em)  Image with width of 80% and height of 5em

因此,您需要启用选项 parseImgDimensions ,然后使用上述语法。

实施例

在构造函数中传递选项:

var converter = new showdown.Converter({parseImgDimensions: true});

var converter = new showdown.Converter();
converter.setOption('parseImgDimensions', true);

答案 1 :(得分:1)

终于找到了办法

在声明链接的网址时添加abc.png =100x*,将高度设置为100,宽度将自动计算。