Convert only specific tags using ng-bind-html

Question

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.

Answer 1

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.