AngularJs编辑器

问题:在使用过程中遇到的问题就是:angularJS绑定不上值。后来找到一种可以用的方式。

html页

1  <div class="all">
2                 <script type="text/html" style="margin:auto;height:300px;width:100%;" ng-model="LogContent" meta-umeditor
3                         meta-umeditor-config=‘all_config‘
4                         meta-umeditor-placeholder="请填写日志内容!">
5                 </script>
6             </div>

controller里要初始化

1 $scope.LogContent = ""; 2 $scope.all_config = {};

脚本引用

<link href="http://dylike.github.io/meta.umeditor/bower_components/meta.umeditor/lib/umeditor/dist/utf8-php/themes/default/css/umeditor.css"
      type="text/css" rel="stylesheet">
<script src="http://dylike.github.io/meta.umeditor/bower_components/meta.umeditor/lib/umeditor/dist/utf8-php/third-party/jquery.min.js"></script>
<script src="http://dylike.github.io/meta.umeditor/bower_components/meta.umeditor/lib/umeditor/dist/utf8-php/umeditor.min.js"></script>
<script src="http://dylike.github.io/meta.umeditor/bower_components/meta.umeditor/lib/umeditor/dist/utf8-php/umeditor.config.js"></script>
<script src="http://dylike.github.io/meta.umeditor/bower_components/meta.umeditor/src/meta.umeditor.js"></script>

这样就可以用了。

【问题描述】

这时取到的数据中带有各种各样的html标签,angularJs输出html的时候,浏览器并不解析这些html标签

我们用ng-bind-html这样的指令来绑定,浏览器中显示的还是html代码。

【解决办法---$sce】

通过使用$ sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”

要这样设置一下logList[i].LogContent = $sce.trustAsHtml(logList[i].LogContent);

就可以得到纯文本了。

注:仅个人理解和总结,有误处请各位指正

时间: 2024-10-03 13:09:44

AngularJs编辑器的相关文章

Angularjs在线编辑器

1.TextAngular: https://github.com/fraywing/textAngular textAngular是一个强大的Text-Editor/Wysiwyg 编辑器,用于Angular.js应用中.安装使用方便,可以创建多个编辑器实例,双向绑定HTML内容,可以查看编辑内容的变化.不足之处是不支持上传文件到服务器,只能进行简单的文字编辑,可用于网站的用户评论模块 2.angular.xheditor: https://github.com/cipchk/angular.

angularjs利用指令调用ueditor百度编辑器

ueditor中文是百度编辑器,而angularjs是一款优秀的前端JS框架了,下面我们来介绍在angularjs调用ueditor百度编辑器例子,有兴趣的可一起来看看. 一直以来,angularjs的富文本编辑器都比较难做,主要是第三方的编辑器很难集成进来,今天花时间研究了一下,发现ueditor主要加载两个js文件 ueditor.config.js ueditor.all.js 能不能把这两个文件异步加载呢?答案是肯定的.我们新建一个服务用来异步加载资源,并设置必要的回调方法. 服务代码:

AngularJS集成富文本编辑器

最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多,让我弄个别的,然后就找到了wangEditor,这个配置和上手都要简单一些,下面来看看具体操作步骤吧: 首先大家可以在https://github.com/wangfupeng1988/wangEditor或者官网http://www.wangeditor.com/ 进行下载,里面文档内容也很容易理解,可以自行配置.下载后解压,我们需要用到的主要是wangEditor.js或者 wangEditor

angularjs环境中为Tinymce编辑器取值或赋值

Tinymce版本,5.2.1 html: 取值或赋值, 方法1: 方法2: 原文地址:https://www.cnblogs.com/insus/p/12677535.html

AngularJS快速开始

http://www.angularjs.cn/A002 Hello World! 开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”: 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html. 将下面的源代码复制到您的HTML文件. 在web浏览器中打开这个HTML文件. 源代码 <!doctype html> <html ng-app> <head> <script src="http:/

AngularJs最简单解决跨域问题案例

我们以两个主域名或者一个主域名+一个二级域名为例,均可演示跨域问题. 客户端 a.com 服务端 b.com或者s.a.com angularJs版本 V1.2.25 准备工作做得很充分嘛,就差把我们的编辑器是subline暴露出来了,这个一般人我是不告诉他滴. 有人嚷嚷了,这问题老早就有了,你现在提出来有啥意义呢?难不成你还能把花忽悠开了?嗯,我还真能把花写开了.看戏吧,我们本篇要上演的是完整版跨域实例. 接下来我们先看客户端是如何请求数据的 注意哦,我们的代码是写在a.com域名下面的 <!

AngularJS Eclipse——新手入门【翻译+整理】

原文地址 本文介绍如何安装和配置 AngularJS Eclipse.Eclipse 插件是基于强大的 JavaScript 推断引擎(javascript inference engine)Tern.js, 它是由JavaScript编写的.若在 java 环境下使用该引擎,需要使用 tern.java.它用 node.js 执行 tern.js.这就是为什么你在下面将看到的必须安装 node.js 或是 Eclipse 内置的 node.js. 如果不安装 node.js 或使用 Eclip

linux-mint下搭建android,angularjs,rails,html5开发环境

目录[-] 必备软件: 环境配置: [open-jdk-6.0] [android-sdk] [ant] [github] [node.js] [rvm](ruby-1.9.3 rails-4.0.0 gemfile) 必备概念: 关于自动化部署我推荐大家参谋一下Fortune Zhang的一篇文章:android开发过程中我是怎么一步步让项目自动化起来的 最新更新链接:https://gist.github.com/Channely/8296901 系统以64bit为例进行配置/2013/11

关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p> .... <p id="#target">我是目标位置</p> ... 在js中实现跳转也是利用了这一点,下面直接在代码中解释吧: 1 <body> 2 <ul> 3 <li><a href="#/mus