当前位置: 首页 > 面试题库 >

AngularJS和Redactor插件

李胤
2023-03-14
问题内容

因此,我正在AngularJS中创建一个新站点,并且对此非常喜欢!

但是,我遇到了一个问题。我试图在我的textareas中添加一个名为“
Redactor”的jQuery插件,但是我认为正在发生的事情是,当我初始化该插件时,它将替换textarea元素。之所以有问题,是因为我为文本区域设置了“
ng-model”属性,如下所示:

我正在使用AngularJS UI拾取焦点事件,然后在文本聚焦时执行以下代码

    $scope.addRedactor = function() {
        $('.redactor').redactor();
    });

现在,我似乎无法获得textarea的值,因为当我尝试访问ng-model’response’时,它显示为未定义。

在受到Redactor影响后,有什么方法可以将ng-model属性绑定到textarea吗?否则,还有其他方法可以让我获得textarea的价值吗?


问题答案:

我今天一直在寻找相同的答案,并提出了解决该问题的指令:

angular.module('Module', []).directive("redactor", function() {
  return {
    require: '?ngModel',
    link: function($scope, elem, attrs, controller) {

      controller.$render = function() {

        elem.redactor({
          keyupCallback: function() {
            $scope.$apply(controller.$setViewValue(elem.getCode()));
          },
          execCommandCallback: function() {
            $scope.$apply(controller.$setViewValue(elem.getCode()));
          }
        });

        elem.setCode(controller.$viewValue);
      };
    }
  };
});

然后,您可以使用以下HTML:

<textarea ng-model="yourModel" redactor></textarea>

每当用户单击工具栏上的按钮时,模型将在每个keyUp上更新。该模型将包含HTML代码。

我刚开始使用AngularJS,所以请让我知道是否有更好的方法来执行此操作,或者是否打破了一些我仍然不知道的约定。



 类似资料:
  • Redactor 是一个 jQuery 的插件,实现在线所见即所得的 HTML 编辑器。界面简洁,加载速度快。不过不支持 IE6 浏览器,如果你不需要考虑 IE6 不妨试试。 使用很简单: <!DOCTYPE html><html> <head> <title>Redactor</title> <meta charset="utf-8"> <script src="/js/jquery-

  • 问题内容: 我正在尝试在AngularJS应用程序中使用AddThis javascript Social插件,但是当我用ng- view加载部分插件时,它不会更新addthis插件图标。如果我刷新页面,则不会(ctrl + F5)。我认为AngularJs通过Ajax加载了部分视图,在这种情况下,addthis不显示加载页面的社交图标。 这是索引代码: 这是在section标签中加载的局部视图,

  • 我目前正在编写一个symfony应用程序,我在Imperavi Redactor图像上传方面遇到了问题。 我通常的形式在网站上的文本区域,但我不能使上传工作。 我在“base.html.twig”中调用Redactor,代码如下: ####################################################################################

  • 问题内容: 我试图弄清楚如何用角度绑定工具提示的内容。我有一个看起来像这样的指令: script.js 它从这里使用qTip2插件 我的index.html看起来像这样(请注意,在实际文件中,我已经包括了所有源文件,为了避免混乱,我只是未将其粘贴在此处): 和 button.html 如您在指令代码中看到的。将button.html加载到工具提示中,但是这会阻止angular正常运行-将butto

  • 通过查看kibana源码,发现很多组件都迁移成react组件,并且官网的文档也在推荐使用react来开发插件。建议大家在选型之前和官网文档保持一致,采用react写相应的插件。 实现 参考教程《app插件案例》 参考 Angular to React Migration

  • 问题内容: 我正在尝试使用angularjs和webpack运行简单的应用程序,这是我的代码: index.html app.js Webpackconfig.js main.js bundle.js 我也看到了这个:https : //github.com/jeffling/angular-webpack- example 问题是我如何正确运行? 问题答案: bundle.js 由webpack