个人中心
gpt4 book ai didi

angularjs - tinymce 不在 ng-view 内工作？

转载 作者：太空宇宙 更新时间：2023-11-03 21:54:54 25 4
gpt4 key购买 nike

我正在从事 MEAN 项目。

在后端我需要tinymce来进行cms编辑。

我对每个页面内容使用 ng-view 。但是tiny mce在ng-view中无法工作

这是我的index.html 文件，它工作正常

<html lang="en" ng-app="AdminApp" >
<head>
<script type="text/javascript" src="/asset/tiny/tiny_mce/tiny_mce.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script type="text/javascript" src="includes/tinymce.js"></script>
    <script type="text/javascript">
    tinyMCE.init({
        // General options
        width : "505",
        height : "150",
        mode : "textareas",
        theme : "advanced",
        extended_valid_elements : "iframe[src|width|height|name|align|type|class|frameborder]",
        plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,imagemanager",

        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,search,replace,|,media,|,bullist,numlist,|,blockquote,|,undo,redo,|,link,unlink,|,",
        theme_advanced_buttons2 : "fontsizeselect,forecolor,backcolor,|,preview,fullscreen,code,insertimage",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        relative_urls : false,
        remove_script_host : false,
        document_base_url : "",
        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",


        // Style formats
        style_formats : [
            {title : 'Bold text', inline : 'b'},
            {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
            {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
            {title : 'Example 1', inline : 'span', classes : 'example1'},
            {title : 'Example 2', inline : 'span', classes : 'example2'},
            {title : 'Table styles'},
            {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
        ],

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
    });
</script>
<base href="/admin/" />
</head>

<body>


<!--div ng-view></div-->
<textarea>hello</textarea>
</body>
</html>

ng-view 代码内部

  <textarea>home</textarea>

我正在使用node.js服务器

请帮我解决这个问题

谢谢

最佳答案

您不能像在 angularjs 应用程序中那样使用 tinymce。您应该为此创建第一个指令。

但是已经有您可以使用的指令:https://github.com/angular-ui/ui-tinymce

下载ui-tinymce后，以下是开始使用它的步骤:

index.html

<!DOCTYPE html>
<head>
  <script type="text/javascript" src="bower_components/tinymce-dist/tinymce.js"></script>
  <script type="text/javascript" src="bower_components/angular/angular.js"></script>
  <script type="text/javascript" src="bower_components/angular-ui-tinymce/src/tinymce.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp">
  <form method="post" ng-controller="TinyMceController">
    <textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
    <button ng-click="getContent()">Get content</button>
    <button ng-click="setContent()">Set content</button>
  </form>
</body>

app.js

var myAppModule = angular.module('myApp', ['ui.tinymce']);

myAppModule.controller('TinyMceController', function($scope) {
  $scope.tinymceModel = 'Initial content';

  $scope.getContent = function() {
    console.log('Editor content:', $scope.tinymceModel);
  };

  $scope.setContent = function() {
    $scope.tinymceModel = 'Time: ' + (new Date());
  };

  $scope.tinymceOptions = {
    plugins: 'link image code',
    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
  };
});

关于angularjs - tinymce 不在 ng-view 内工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43534554/

25 4 0
文章推荐： CSS - 保持悬停状态和延迟转换
文章推荐： javascript - 清理草率的代码 html/css/javascript
文章推荐： C/C++ : Caching the Camera Data
文章推荐： c# - 如何在 Windows 8 中设置闹钟或提醒事件？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com