代码之家 › 专栏 › 技术社区 › Vikas Bansal

决战标记编辑器:如何调整图像大小以适应内容?

showdown pagedown markdown angularjs javascript

Vikas Bansal · 技术社区 · 8 年前

我正在尝试使用 烟囱溢流 降价编辑器 showdown 通过Angularjs模块 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>

2 回复 | 直到 8 年前

Tivie 8 年前

免责声明:

我是当前决战的项目负责人。

根据 showdown's documentation :

parseImgDimensions:(boolean)[default false]支持从标记语法中设置图像尺寸。示例:
![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

因此,您需要启用该选项 解析ImgDimensions 然后使用上述语法。

实例

在构造函数中传递选项:

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

或

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

Vikas Bansal 8 年前

终于找到了一条路

声明链接add的URL时 abc.png =100x* 将高度设置为100,宽度将自动计算。

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前