使用ng-bind-html只转换特定的标签 [英] Convert only specific tags using ng-bind-html

问题描述

我正在使用文本编辑器 TinyMCE ，并试图区分代码来自数据库的数据。它意味着像StackOverflows编辑器。不过，我可以使用ng-bind-html转换 all html 标签，这是主要问题。我不想转换代码部分。
例如：

 < strong> hello< / strong> 
< code> 
< div>我不希望代码中的代码被转换< / div> 
< p>我是段< / p> 
< / code> 
  

所需的输出是：

hello

 < code> 
< div>我不希望代码中的代码被转换< / div> 
< p>我是段< / p> 
< / code> 
  

但是，使用ng-bind-html得到的输出是：

hello

我不希望代码中的代码被转换 p>

我是段落。

我使用角1.52 和 laravel php 。

我的部分：

 < div ng-bind-html =myResult> 
 
< / div> 
  

后端控制器：

  public function getquesdet（）{
 $ id = Request :: input（'id'）; 
 
 $ data = Data :: where（'id'，'='，$ id） - > first（）; 
 $ body = html_entity_decode（$ data ['body']）; 
 
返回html_entity_decode（$ body）; 
 
 
 $ / code> 

我的angularjs控制器：

  app.controller（'seperatequestion'，['$ scope'，'$ rootScope'，'$ http'，'$ stateParams'，function（$ scope， 
方法：'GET'，
 url：$ rootScope.apiend +'/ getquestiondet'，
 params：$ root $ {
 $ {
 id：$ stateParams.qid 
} 
}）。success（function（result）{
 $ scope.myResult = result; 
 
} ）.error（function（data）{
 console.log（data）; 
}）
 
}]）
  pre> 
 
 
所以，我想要的是转换不包含代码标记内的标记的html标记。
解决方案
 TinyMCE已经有一个插件来解决你要做的事情：
 
 
 
  https://www.tinymce.com/docs/plugins/codesample/ 
 
 
 
请注意当你在TinyMCE之外渲染内容，你需要包含Prism（ http://prismjs.com/index.html ）以获得相同的外观。
 
I am using the text editor TinyMCE and I am trying to differentiate code from the general description when retrieving the data from the database . It is meant to be like the StackOverflows editor. However, I can convert all the html tags by using ng-bind-html which is the main problem. I don't want to convert the code part.
For example:
<strong>hello</strong>
<code>
     <div>i dont want the tags inside code to be converted</div>
     <p>i am para</p>
</code>
The desired output is:

hello
<code>
     <div>i dont want the tags inside code to be converted</div>
     <p>i am para</p>
</code>
However, the output I am getting by using ng-bind-html is:

"
hello

i dont want the tags inside code to be converted

i am para."

I am using angular 1.52 and laravel php.

My partial:
<div ng-bind-html="myResult">

</div>
Backend controller:
public function getquesdet(){
    $id = Request::input('id');

    $data= Data::where('id','=',$id)->first();
    $body = html_entity_decode($data['body']);

    return html_entity_decode($body);

}
My angularjs controller:
app.controller('seperatequestion',['$scope','$rootScope','$http','$stateParams',function($scope,$rootScope,$http,$stateParams){
$http({
    method:'GET',
    url : $rootScope.apiend + '/getquestiondet',
    params:{
        id:$stateParams.qid
    }
}).success(function(result){
    $scope.myResult= result;

}).error(function(data){
    console.log(data);
})

}])
So, all I want is to convert the html tags excluding the tags inside the code tag.
解决方案
TinyMCE already has a plugin to address what you are trying to do:

https://www.tinymce.com/docs/plugins/codesample/

Note that when you render the content outside of TinyMCE you will need to include Prism (http://prismjs.com/index.html) in your rendered page to get the same look.

                        
这篇关于使用ng-bind-html只转换特定的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！